/* ============================================
   THEME VARIABLES - Dark Mode (Default)
   ============================================ */
:root{
  --bg: #050816;
  --bg-secondary: #0a1128;
  --surface: rgba(16,26,51,.65);
  --surface2: rgba(255,255,255,.06);
  --text: #f4f6ff;
  --text-secondary: #c4c9d4;
  --muted: rgba(255,255,255,.85);
  --border: rgba(255,255,255,.15);
  --accent: #6366f1;
  --accent2: #f97316;
  --accent3: #22d3ee;
  --radius: 20px;
  --container: 1200px;
  --shadow: 0 25px 50px -12px rgba(0,0,0,.5);
  --glow: 0 0 40px rgba(99,102,241,.3);
  --card-bg: rgba(255,255,255,.03);
  --card-border: rgba(255,255,255,.06);
}

/* ============================================
   THEME VARIABLES - Light Mode
   ============================================ */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-secondary: #f8fafc;
  --surface: rgba(5,8,22,.04);
  --surface2: rgba(5,8,22,.06);
  --text: #050816;
  --text-secondary: #0a1128;
  --muted: rgba(5,8,22,.7);
  --border: rgba(5,8,22,.12);
  --shadow: 0 25px 50px -12px rgba(5,8,22,.12);
  --glow: 0 0 40px rgba(99,102,241,.2);
  --card-bg: #ffffff;
  --card-border: rgba(5,8,22,.1);
}

/* ============================================
   LIGHT MODE OVERRIDES
   ============================================ */

/* Header - stays dark in light mode for contrast */
[data-theme="light"] .site-header {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
}

[data-theme="light"] .site-header.scrolled,
[data-theme="light"] .site-header.header-solid {
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 4px 30px rgba(0,0,0,.2);
}

/* Hero section - light mode */
[data-theme="light"] .hero-modern {
  background: #ffffff;
  color: #050816;
}

[data-theme="light"] .hero-modern .hero-content h1 {
  color: #050816;
}

[data-theme="light"] .hero-modern .hero-content p {
  color: rgba(5, 8, 22, 0.7) !important;
}

/* Hero diagram - orbit circles blue */
[data-theme="light"] .hero-hub-orbit {
  border-color: rgba(5, 8, 22, 0.15);
}

[data-theme="light"] .hero-hub-orbit-2 {
  border-color: rgba(5, 8, 22, 0.1);
}

/* Hero solution nodes - white bg with blue border */
[data-theme="light"] .hero-solution-node {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.12);
  box-shadow: 0 8px 30px rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .hero-solution-node:hover {
  background: #ffffff;
  box-shadow: 0 15px 40px rgba(5, 8, 22, 0.12);
  border-color: var(--accent);
}

[data-theme="light"] .hero-sol-info strong {
  color: #050816;
}

/* Hero connecting lines - blue */
[data-theme="light"] .hero-sol-line {
  background: linear-gradient(90deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

[data-theme="light"] .hero-sol-shop .hero-sol-line {
  background: linear-gradient(270deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

[data-theme="light"] .hero-sol-erp .hero-sol-line {
  background: linear-gradient(180deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

[data-theme="light"] .hero-sol-hosting .hero-sol-line {
  background: linear-gradient(0deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

/* Hero hub glow - subtle in light mode */
[data-theme="light"] .hero-hub-glow {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 60%);
}

[data-theme="light"] .hero-hub-inner {
  box-shadow: 0 0 50px rgba(99, 102, 241, 0.2);
}

/* Hero glass cards */
[data-theme="light"] .hero-modern .glass-card,
[data-theme="light"] .hero-modern .glass {
  background: rgba(5, 8, 22, 0.03);
  border: 1px solid rgba(5, 8, 22, 0.1);
  color: #050816;
}

[data-theme="light"] .hero-modern .glass-card span,
[data-theme="light"] .hero-modern .glass span {
  color: #050816;
}

/* Hero icon-glow - light mode */
[data-theme="light"] .hero-modern .icon-glow {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(249, 115, 22, 0.1));
  border: 1px solid rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .hero-modern .icon-glow i,
[data-theme="light"] .hero-modern .icon-glow .text-white {
  color: #050816 !important;
}

/* Hero orbs - reduce in light mode */
[data-theme="light"] .hero-orb {
  opacity: 0.3;
}

/* Hero analytics card - light mode */
[data-theme="light"] .hero-analytics-card {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.1);
  box-shadow: 0 20px 50px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .analytics-header span {
  color: rgba(5, 8, 22, 0.5);
}

[data-theme="light"] .analytics-chart-bar {
  background: rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .analytics-stats span:first-child {
  color: #050816;
}

[data-theme="light"] .analytics-stats span:last-child {
  color: rgba(5, 8, 22, 0.5);
}

/* Hero float stat - light mode */
[data-theme="light"] .hero-float-stat {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.1);
  box-shadow: 0 10px 30px rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .hero-float-stat .stat-value {
  color: #050816;
}

[data-theme="light"] .hero-float-stat .stat-label {
  color: rgba(5, 8, 22, 0.5);
}

/* Page hero - light mode */
[data-theme="light"] .page-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  color: #0f172a;
}

/* Main content areas */
[data-theme="light"] .site-main {
  background: var(--bg);
}

[data-theme="light"] .page-main {
  background: var(--bg-secondary);
}

/* Cards and panels */
[data-theme="light"] .card,
[data-theme="light"] .panel-card,
[data-theme="light"] .service-card,
[data-theme="light"] .feature-card {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

[data-theme="light"] .card:hover,
[data-theme="light"] .panel-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
}

/* Footer - stays dark */
[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, #0f172a 0%, #020408 100%);
  color: #f4f6ff;
}

[data-theme="light"] .site-footer * {
  color: inherit;
}

[data-theme="light"] .site-footer .footer-desc,
[data-theme="light"] .site-footer .footer-links li a,
[data-theme="light"] .site-footer .contact-label,
[data-theme="light"] .site-footer .footer-copyright,
[data-theme="light"] .site-footer .footer-legal a {
  color: rgba(255,255,255,.55);
}

[data-theme="light"] .site-footer .footer-links li a:hover,
[data-theme="light"] .site-footer .footer-legal a:hover {
  color: #fff;
}

/* Statistics section - light mode with subtle blue background */
[data-theme="light"] .stats-section,
[data-theme="light"] .kpi-strip {
  background: linear-gradient(180deg, #f0f4ff 0%, #e8eeff 100%);
  color: #050816;
}

/* Stats section after hero - light mode */
[data-theme="light"] .hero-modern + section {
  background: linear-gradient(180deg, #f8faff 0%, #f0f4ff 100%) !important;
  border-top: 1px solid rgba(5, 8, 22, 0.06) !important;
  border-bottom: 1px solid rgba(5, 8, 22, 0.06) !important;
}

[data-theme="light"] .hero-modern + section h3,
[data-theme="light"] .hero-modern + section .display-5 {
  color: #050816;
}

[data-theme="light"] .hero-modern + section p,
[data-theme="light"] .hero-modern + section .lead {
  color: rgba(5, 8, 22, 0.7) !important;
}

[data-theme="light"] .hero-modern + section .glass-card {
  background: #ffffff !important;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .hero-modern + section .glass-card p {
  color: rgba(5, 8, 22, 0.6) !important;
}

[data-theme="light"] .hero-modern + section .number-highlight {
  background: linear-gradient(135deg, #050816, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Clients/Logo section - light mode */
[data-theme="light"] .clients-section {
  background: linear-gradient(180deg, #e8eeff 0%, #f0f4ff 100%);
  border-top: 1px solid rgba(5, 8, 22, 0.08);
  border-bottom: 1px solid rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .clients-section h6,
[data-theme="light"] .clients-section span,
[data-theme="light"] .clients-section .text-muted {
  color: #050816 !important;
}

[data-theme="light"] .clients-section p {
  color: rgba(5, 8, 22, 0.6) !important;
}

[data-theme="light"] .logo-item {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.1);
  box-shadow: 0 4px 15px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .logo-item:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .marquee-fade-left {
  background: linear-gradient(to right, #e8eeff, transparent);
}

[data-theme="light"] .marquee-fade-right {
  background: linear-gradient(to left, #f0f4ff, transparent);
}

/* Process section - light mode */
[data-theme="light"] .process-section-home {
  background: linear-gradient(180deg, #f0f4ff 0%, #e8eeff 50%, #f0f4ff 100%);
}

[data-theme="light"] .process-section-home::before {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(249, 115, 22, 0.04) 0%, transparent 50%);
}

[data-theme="light"] .process-section-home h2,
[data-theme="light"] .process-section-home .display-5 {
  color: #050816;
}

[data-theme="light"] .process-section-home .process-lead {
  color: rgba(5, 8, 22, 0.7) !important;
}

[data-theme="light"] .process-card-home {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.05);
}

[data-theme="light"] .process-card-home:hover {
  border-color: rgba(5, 8, 22, 0.12);
  box-shadow: 0 20px 40px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .process-num {
  color: rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .process-card-home h3 {
  color: #050816;
}

[data-theme="light"] .process-card-home p {
  color: rgba(5, 8, 22, 0.6);
}

[data-theme="light"] .process-icon-home {
  border-color: rgba(5, 8, 22, 0.06);
}

/* Solutions/Services - light background */
[data-theme="light"] .solutions-section,
[data-theme="light"] .services-section {
  background: var(--bg-secondary);
}

/* Ecosystem diagram - light mode with blue lines */
[data-theme="light"] .ecosystem-section {
  background: #ffffff;
  color: #050816;
}

[data-theme="light"] .ecosystem-wrapper {
  background: transparent;
}

/* Blue rings/lines */
[data-theme="light"] .ecosystem-ring {
  border-color: rgba(5, 8, 22, 0.2);
}

[data-theme="light"] .ecosystem-ring-2 {
  border-color: rgba(5, 8, 22, 0.12);
}

/* Blue connectors */
[data-theme="light"] .node-connector {
  background: linear-gradient(to right, rgba(5, 8, 22, 0.4), rgba(5, 8, 22, 0.1)) !important;
}

[data-theme="light"] .node-crm .node-connector {
  background: linear-gradient(to right, rgba(5, 8, 22, 0.4), rgba(5, 8, 22, 0.1)) !important;
}

[data-theme="light"] .node-erp .node-connector {
  background: linear-gradient(to bottom, rgba(5, 8, 22, 0.4), rgba(5, 8, 22, 0.1)) !important;
}

[data-theme="light"] .node-shop .node-connector {
  background: linear-gradient(to left, rgba(5, 8, 22, 0.4), rgba(5, 8, 22, 0.1)) !important;
}

[data-theme="light"] .node-hosting .node-connector {
  background: linear-gradient(to top, rgba(5, 8, 22, 0.4), rgba(5, 8, 22, 0.1)) !important;
}

/* Node cards - light with blue text */
[data-theme="light"] .node-card {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.1);
  box-shadow: 0 8px 30px rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .node-card:hover {
  box-shadow: 0 20px 50px rgba(5, 8, 22, 0.12);
  border-color: var(--accent);
}

[data-theme="light"] .node-card h4 {
  color: #050816;
}

[data-theme="light"] .node-card p {
  color: rgba(5, 8, 22, 0.6);
}

/* Core center */
[data-theme="light"] .ecosystem-core {
  background: #ffffff;
  border: 2px solid rgba(5, 8, 22, 0.15);
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .ecosystem-core i {
  color: #050816;
}

/* Integration nodes */
[data-theme="light"] .integration-node {
  background: #ffffff;
  border-color: rgba(5, 8, 22, 0.1);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .ecosystem-integration-label span {
  background: rgba(5, 8, 22, 0.05);
  color: #050816;
}

/* Data particles */
[data-theme="light"] .data-particle {
  opacity: 0.8;
}

/* CTA sections - gradient */
[data-theme="light"] .cta-section {
  background: linear-gradient(135deg, var(--accent) 0%, #818cf8 100%);
  color: #fff;
}

/* Form inputs */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Buttons - ensure visibility */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .header-cta-btn {
  color: #fff;
}

/* Mobile menu - keep dark */
[data-theme="light"] .mobile-menu {
  background: rgba(15, 23, 42, 0.98);
  color: #f4f6ff;
}

[data-theme="light"] .mobile-menu * {
  color: inherit;
}

/* Transition smoothing */
body, .site-main, .card, .panel-card, input, textarea, select {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  overflow-x: hidden;
}
body{
  margin:0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height:1.6;
  overflow-x: hidden;
  width: 100%;
}

/* Prevent horizontal overflow from floating elements */
.site-content,
.clients-section,
section {
  overflow-x: clip;
  max-width: 100vw;
}

.hero-modern {
  overflow-x: clip;
  overflow-y: visible;
  max-width: 100vw;
}

/* Animated background orbs */
body.home::before,
body.home::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}
body.home::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  top: -200px;
  left: -100px;
  animation: orbFloat 20s ease-in-out infinite;
}
body.home::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent2), transparent 70%);
  bottom: -150px;
  right: -100px;
  animation: orbFloat 25s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(50px, 30px) scale(1.1); }
  50% { transform: translate(20px, -40px) scale(0.95); }
  75% { transform: translate(-30px, 20px) scale(1.05); }
}

img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 5px; width: 100%; }

.site-content{
  min-height: 60vh;
  width: 100%;
  overflow-x: hidden;
  padding-top: 100px;
}

/* Homepage doesn't need extra padding - hero handles it */
body.home .site-content {
  padding-top: 0;
}

/* Ensure proper layout wrapper */
.site-wrapper {
  width: 100%;
  overflow-x: hidden;
}

/* Bootstrap row fix for proper centering */
.row {
  margin-left: 0;
  margin-right: 0;
}

.section{ padding: 64px 0; }
.section-alt{ background: rgba(255,255,255,.02); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.h1{ font-size: 48px; line-height:1.05; margin: 0 0 12px; }
.h2{ font-size: 32px; line-height:1.15; margin: 0 0 10px; }
.lead{ font-size: 18px; margin: 0 0 14px; }
.small{ font-size: 13px; }
.muted{ color: #fff; }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 18px; }
.section-head p{ margin:0; max-width: 62ch; }

/* Header */
/* ===== FULL-WIDTH TRANSPARENT → SOLID HEADER ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all .4s cubic-bezier(.4,0,.2,1);
}

.site-header.scrolled,
.site-header.header-solid {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.header-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  transition: padding .3s ease;
}

.site-header.scrolled .header-nav,
.site-header.header-solid .header-nav {
  padding: 12px 0;
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all .3s ease;
}

.header-logo:hover {
  opacity: 0.85;
}

.header-logo img,
.header-logo .custom-logo {
  height: 42px;
  width: auto;
  transition: height .3s ease;
}

.site-header.scrolled .header-logo img,
.site-header.scrolled .header-logo .custom-logo,
.site-header.header-solid .header-logo img,
.site-header.header-solid .header-logo .custom-logo {
  height: 36px;
}

/* Desktop Menu */
.header-menu-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-menu > li {
  position: relative;
}

.header-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  background: transparent;
}

.header-menu > li > a:hover {
  color: #fff;
  background: rgba(99, 102, 241, 0.15);
}

.header-menu > li.current-menu-item > a,
.header-menu > li.current_page_item > a {
  color: #fff;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(129, 140, 248, 0.15));
}

/* Dropdown */
.header-menu li ul,
.header-menu .sub-menu,
.header-menu .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 220px;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 8px;
  list-style: none;
  margin: 12px 0 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}

.header-menu li:hover > ul,
.header-menu li:hover > .sub-menu,
.header-menu .dropdown:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.header-menu li ul li a,
.header-menu .sub-menu li a,
.header-menu .dropdown-menu li a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: all .25s ease;
}

.header-menu li ul li a:hover,
.header-menu .sub-menu li a:hover,
.header-menu .dropdown-menu li a:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #fff;
  padding-left: 20px;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* CTA Button */
.header-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent), #818cf8);
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}

.header-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #818cf8, var(--accent3));
  opacity: 0;
  transition: opacity .3s ease;
}

.header-cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px rgba(99,102,241,.4);
}

.header-cta-btn:hover::before {
  opacity: 1;
}

.header-cta-btn .btn-text,
.header-cta-btn .btn-icon {
  position: relative;
  z-index: 1;
}

.header-cta-btn .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  font-size: 11px;
  transition: all .3s ease;
}

.header-cta-btn:hover .btn-icon {
  transform: translateX(3px);
  background: rgba(255,255,255,.3);
}

/* Mobile Toggle */
.header-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all .3s ease;
}

.header-toggle:hover {
  background: rgba(255,255,255,.1);
}

.toggle-line {
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .3s ease;
}

.header-toggle.active .toggle-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.header-toggle.active .toggle-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.header-toggle.active .toggle-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Menu Panel */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 380px;
  background: #0f172a;
  z-index: 999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}


.mobile-menu.active {
  transform: translateX(0);
}

/* Mobile Menu Header - Hidden, using main header toggle instead */
.mobile-menu-header {
  display: none;
}

/* Mobile Menu Navigation */
.mobile-menu-nav {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 100px 16px 12px;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-menu-list > li {
  border-radius: 10px;
}

.mobile-menu-list > li > a {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
}

.mobile-menu-list > li > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 0 3px 3px 0;
  transition: height 0.25s ease;
}

.mobile-menu-list > li > a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.mobile-menu-list > li > a:hover::before {
  height: 20px;
}

.mobile-menu-list > li.current-menu-item > a,
.mobile-menu-list > li.current_page_item > a {
  background: rgba(99, 102, 241, 0.1);
  color: #fff;
}

.mobile-menu-list > li.current-menu-item > a::before,
.mobile-menu-list > li.current_page_item > a::before {
  height: 20px;
}

.mobile-menu-list .sub-menu {
  list-style: none;
  padding: 2px 0 4px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  margin-left: 14px;
}

.mobile-menu-list .sub-menu li a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.mobile-menu-list .sub-menu li a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
}

/* Mobile Menu Footer */
.mobile-menu-footer {
  position: relative;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--accent), #818cf8);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
}

.mobile-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}

.mobile-cta-btn i {
  font-size: 12px;
}

.mobile-menu-contact {
  display: flex;
  gap: 6px;
}

.mobile-contact-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.25s ease;
}

.mobile-contact-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.mobile-contact-link i {
  font-size: 12px;
  color: var(--accent);
}

.mobile-contact-link span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-menu-lang {
  display: flex;
  justify-content: center;
}

.mobile-menu-lang .lang-switcher-modern {
  margin: 0;
}

body.menu-open {
  overflow: hidden;
}

/* Mobile Menu - Landscape Mode */
@media (max-height: 450px) and (orientation: landscape) {
  .mobile-menu {
    max-width: 100%;
    width: 100%;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .mobile-menu-nav {
    padding: 100px 16px 10px;
    overflow-y: auto;
  }

  .mobile-menu-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: center;
    align-items: flex-start;
  }

  .mobile-menu-list > li {
    position: relative;
  }

  .mobile-menu-list > li > a {
    padding: 8px 14px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-list > li > a::before {
    display: none;
  }

  .mobile-menu-list > li > a:hover,
  .mobile-menu-list > li.current-menu-item > a {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
  }

  .mobile-menu-list .sub-menu {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0 0 0;
    margin: 0;
    border: none;
  }

  .mobile-menu-list .sub-menu li a {
    padding: 6px 10px;
    font-size: 11px;
  }

  .mobile-menu-footer {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  .mobile-cta-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  .mobile-menu-contact {
    flex-direction: row;
    gap: 6px;
  }

  .mobile-contact-link {
    padding: 8px 10px;
    font-size: 11px;
  }

  .mobile-contact-link span {
    display: none;
  }

  .mobile-contact-link i {
    font-size: 14px;
    width: auto;
  }

  .mobile-menu-lang {
    display: none;
  }
}

/* Language Switcher in header */
.header-actions .language-switcher,
.header-actions .lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-actions .language-switcher a,
.header-actions .lang-switcher a {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: all .2s ease;
}

.header-actions .language-switcher a:hover,
.header-actions .lang-switcher a:hover,
.header-actions .language-switcher a.active,
.header-actions .lang-switcher a.active {
  color: #fff;
  background: rgba(255,255,255,.08);
}

/* Responsive Header */
@media (max-width: 1024px) {
  .header-menu-wrapper {
    display: none;
  }

  .header-toggle {
    display: flex;
  }

  .header-cta-btn {
    display: none;
  }

  /* Hide language switcher from header bar on mobile - show only in menu */
  .header-actions .lang-switcher-modern,
  .header-actions .language-switcher,
  .header-actions .lang-switcher {
    display: none;
  }

  .header-wrapper {
    padding: 0 16px;
  }

  .header-nav {
    padding: 14px 0;
  }
}

@media (max-width: 480px) {
  .header-wrapper {
    padding: 0 12px;
  }

  .header-nav {
    padding: 12px 0;
  }

  .header-logo img,
  .header-logo .custom-logo {
    height: 32px;
  }
}

/* Old nav-toggle - keep for compatibility */
.nav-toggle{
  display:none;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width: 18px; height:2px; background: var(--text); margin: 3px 0; border-radius: 2px; }

.mobile-drawer{
  border-top: 1px solid var(--border);
  background: rgba(11,16,32,.9);
  padding: 14px 0 18px;
}
.mobile-menu{ list-style:none; padding:0; margin: 0 0 12px; display:flex; flex-direction:column; gap: 8px; }
.mobile-menu a{ display:flex; padding: 12px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.mobile-menu ul{ list-style:none; padding-left: 14px; margin: 8px 0 0; display:flex; flex-direction:column; gap: 8px; }
.mobile-cta{ width:100%; justify-content:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 800;
  letter-spacing: .2px;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.btn-ghost{
  background: transparent;
  border: 1px solid var(--border);
}
.btn:hover{ transform: translateY(-1px); }
.header-cta{ white-space:nowrap; }

/* Hero */
/* Hero Buttons - New Design */
.hero-buttons-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-btn-primary,
.hero-btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.hero-btn-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Primary Button */
.hero-btn-primary {
  color: #fff;
  background: transparent;
}

.hero-btn-primary .hero-btn-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 50%, var(--accent3) 100%);
  background-size: 200% 200%;
  border-radius: 14px;
  z-index: 1;
  transition: all 0.4s ease;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-btn-primary::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  border-radius: 16px;
  z-index: 0;
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.4s ease;
}

.hero-btn-primary:hover::before {
  opacity: 0.7;
}

.hero-btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.4);
}

.hero-btn-primary:hover .hero-btn-bg {
  background-size: 300% 300%;
}

.hero-btn-primary i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.hero-btn-primary:hover i {
  transform: translateX(3px) rotate(-15deg);
}

/* Secondary Button */
.hero-btn-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-btn-secondary .hero-btn-border {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05), rgba(99,102,241,0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  transition: all 0.4s ease;
}

.hero-btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(34,211,238,0.1));
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-btn-secondary:hover::before {
  opacity: 1;
}

.hero-btn-secondary:hover .hero-btn-border {
  background: linear-gradient(135deg, rgba(99,102,241,0.6), rgba(34,211,238,0.4), rgba(249,115,22,0.3));
}

.hero-btn-secondary:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.hero-btn-secondary i {
  font-size: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.hero-btn-secondary:hover i {
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  transform: scale(1.1);
}

/* Light Mode - Secondary Button */
[data-theme="light"] .hero-btn-secondary {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

[data-theme="light"] .hero-btn-secondary .hero-btn-border {
  background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(34,211,238,0.4), rgba(99,102,241,0.5));
}

[data-theme="light"] .hero-btn-secondary::before {
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(34,211,238,0.1));
}

[data-theme="light"] .hero-btn-secondary:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.5);
}

[data-theme="light"] .hero-btn-secondary:hover .hero-btn-border {
  background: linear-gradient(135deg, rgba(99,102,241,0.8), rgba(34,211,238,0.6), rgba(249,115,22,0.5));
}

[data-theme="light"] .hero-btn-secondary i {
  background: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

[data-theme="light"] .hero-btn-secondary:hover i {
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  color: #fff;
}

/* Mobile Responsive */
@media (max-width: 576px) {
  .hero-buttons-wrap {
    flex-direction: column;
    gap: 12px;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }
}

.hero{ padding: 72px 0 24px; }
.hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items:stretch; }
.pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  margin: 0 0 14px;
}
.hero-title{ font-size: 54px; line-height: 1.03; margin: 0 0 12px; }
.hero-subtitle{ font-size: 18px; margin: 0 0 18px; }
.hero-actions{ display:flex; gap: 10px; flex-wrap:wrap; }

.hero-panel .panel-card{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(16,26,51,.55);
  padding: 18px;
  box-shadow: var(--shadow);
}
.divider{ height: 1px; background: rgba(255,255,255,.10); margin: 14px 0; }
.checklist{ margin: 10px 0 0; padding: 0; list-style:none; }
.checklist li{ padding-left: 26px; position: relative; margin: 8px 0; }
.checklist li:before{
  content: "✓";
  position:absolute; left: 0; top: 0;
  color: color-mix(in srgb, var(--accent) 85%, white);
}

.chips{ display:flex; flex-wrap:wrap; gap: 8px; }
.chip{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size: 13px;
  color: var(--muted);
}

.kpi-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.kpi{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}
.kpi strong{ font-size: 20px; display:block; }

/* Cards & grid */
.grid{ display:grid; gap: 16px; }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(16,26,51,.82); }
.card-title{ margin: 0 0 10px; font-size: 18px; }
.badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 10px;
}
.link{ color: color-mix(in srgb, var(--accent) 80%, white); font-weight: 700; }
.section-actions{ margin-top: 16px; }

/* Prose */
.prose{ max-width: 82ch; }
.prose h1, .prose h2, .prose h3{ margin-top: 28px; }
.prose p{ margin: 12px 0; }
.prose a{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); }

/* Detail hero */
.detail-hero{
  padding: 26px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 18px;
}
.detail-actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }

.pagination{ margin-top: 18px; }
.pagination .nav-links{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.pagination a, .pagination span{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* CTA card */
.cta-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 360px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    rgba(255,255,255,.03);
  padding: 22px;
  box-shadow: var(--shadow);
}
.cta-actions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* ===== MODERN FOOTER ===== */
/* ============================================
   FOOTER - Modern Design
   ============================================ */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, #020408 100%);
}


body:not(.home) .footer-cta-section {
  padding-top: 80px;
}

/* Decorative Elements */
.footer-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

.footer-glow-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(99,102,241,.15), transparent 60%);
  top: -300px;
  left: -200px;
  animation: footerGlowPulse 8s ease-in-out infinite;
}

.footer-glow-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(249,115,22,.1), transparent 60%);
  bottom: -200px;
  right: -150px;
  animation: footerGlowPulse 8s ease-in-out infinite 4s;
}

@keyframes footerGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Footer CTA Section */
.footer-cta-section {
  position: relative;
  padding: 60px 0;
}

.footer-cta-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(99,102,241,.1), transparent 60%),
    radial-gradient(ellipse 80% 60% at 0% 50%, rgba(34,211,238,.05), transparent),
    radial-gradient(ellipse 60% 50% at 100% 30%, rgba(249,115,22,.05), transparent);
  z-index: 0;
}

.footer-cta-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 40px;
  background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 24px;
  backdrop-filter: blur(20px);
}

.footer-cta-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
}

.footer-cta-text {
  margin-bottom: 24px;
}

.footer-cta-text h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.85) 50%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}

.footer-cta-text p {
  font-size: 15px;
  color: rgba(255,255,255,.5);
  margin: 0;
  line-height: 1.5;
}

.footer-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--accent) 0%, #818cf8 50%, var(--accent) 100%);
  background-size: 200% 100%;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(99,102,241,.2);
}

.footer-cta-btn-primary:hover {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(99,102,241,.35);
}

.footer-cta-btn-primary i {
  transition: transform .3s ease;
}

.footer-cta-btn-primary:hover i {
  transform: translateX(4px);
}

.footer-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  transition: all .3s ease;
}

.footer-cta-btn-secondary:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-3px);
}

/* Footer Main */
.footer-main {
  position: relative;
  z-index: 1;
  padding: 80px 0 60px;
  border-top: none;
}

.footer-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent, #6366f1), var(--accent2, #22d3ee), transparent);
  border-radius: 2px;
  z-index: 10;
}

.footer-main::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(99,102,241,.08) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 60px;
}

/* Brand Column */
.footer-brand {
  max-width: 320px;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 20px;
  text-decoration: none;
  transition: opacity .3s ease;
}

.footer-logo:hover {
  opacity: 0.8;
}

.footer-logo img,
.footer-logo .custom-logo,
.footer-brand .custom-logo-link img {
  height: 56px !important;
  width: auto !important;
  max-height: 56px !important;
}

.footer-logo-text {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.5);
  margin: 20px 0 30px;
}

/* Social Buttons - Modern Pill Style */
.footer-social {
  display: flex;
  gap: 8px;
}

.social-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.45);
  font-size: 16px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}

.social-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(99,102,241,.35);
}

/* Footer Columns */
.footer-col {}

.footer-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,.95);
  margin: 0 0 28px;
  padding-bottom: 14px;
  position: relative;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-links li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.5);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s ease;
  position: relative;
}

.footer-links li a i {
  font-size: 8px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: all .3s ease;
}

.footer-links li a:hover {
  color: #fff;
  transform: translateX(8px);
}

.footer-links li a:hover i {
  opacity: 1;
  transform: translateX(0);
}

/* Contact Cards - Glassmorphism */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.08), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}

a.contact-card:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,.2);
}

a.contact-card:hover::before {
  opacity: 1;
}

.contact-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(99,102,241,.05));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 16px;
  transition: all .3s ease;
}

a.contact-card:hover .contact-icon {
  background: linear-gradient(135deg, var(--accent), #818cf8);
  color: #fff;
}

.contact-icon-green {
  background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(16,185,129,.05));
  color: #10b981;
}

a.contact-card:hover .contact-icon-green {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #fff;
}

.contact-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.35);
  font-weight: 500;
}

.contact-value {
  font-size: 14px;
  color: rgba(255,255,255,.9);
  font-weight: 600;
}

/* Footer Bottom - Refined */
.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(0,0,0,.15);
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  margin: 0;
  font-weight: 400;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-legal a {
  font-size: 13px;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all .25s ease;
}

.footer-legal a:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}

.footer-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}

/* Footer Responsive - Tablet */
@media (max-width: 1100px) {
  .footer-cta-section {
    padding: 50px 0;
  }

  .footer-cta-content {
    padding: 36px 32px;
  }

  .footer-cta-text h2 {
    font-size: 24px;
  }

  .footer-main {
    padding: 60px 0 50px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 50px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
  }

  .footer-logo img,
  .footer-logo .custom-logo,
  .footer-brand .custom-logo-link img {
    height: 48px !important;
    max-height: 48px !important;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-col {
    text-align: center;
  }

  .footer-links li a {
    justify-content: center;
  }

  .contact-cards {
    max-width: 300px;
    margin: 0 auto;
  }

  .contact-card {
    padding: 14px 18px;
  }
}

@media (max-width: 768px) {
  .footer-cta-section {
    padding: 40px 0;
  }

  .footer-cta-content {
    padding: 30px 20px;
    border-radius: 20px;
  }

  .footer-cta-text h2 {
    font-size: 22px;
  }

  .footer-cta-text p {
    font-size: 14px;
  }

  .footer-cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer-cta-btn-primary,
  .footer-cta-btn-secondary {
    width: 100%;
    max-width: 260px;
    justify-content: center;
    padding: 12px 20px;
  }

  .footer-main {
    padding: 50px 0 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

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

  .footer-logo img,
  .footer-logo .custom-logo,
  .footer-brand .custom-logo-link img {
    height: 44px !important;
    max-height: 44px !important;
  }

  .footer-desc {
    margin-bottom: 20px;
    font-size: 13px;
  }

  .footer-title {
    margin-bottom: 16px;
    font-size: 11px;
  }

  .footer-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-links {
    gap: 12px;
  }

  .footer-links li a {
    font-size: 13px;
  }

  .footer-links li a:hover {
    transform: none;
  }

  .contact-card {
    padding: 14px 16px;
  }

  .contact-icon {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .contact-value {
    font-size: 13px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    padding: 20px 0;
    gap: 16px;
  }

  .footer-copyright {
    font-size: 12px;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .footer-legal a {
    font-size: 12px;
    padding: 5px 10px;
  }

  .footer-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  .footer-cta-section {
    padding: 24px 0;
  }

  .footer-cta-content {
    padding: 24px 16px;
    border-radius: 16px;
  }

  .footer-cta-text {
    margin-bottom: 20px;
  }

  .footer-cta-text h2 {
    font-size: 18px;
  }

  .footer-cta-text p {
    font-size: 13px;
  }

  .footer-cta-btn-primary,
  .footer-cta-btn-secondary {
    padding: 11px 16px;
    font-size: 13px;
    max-width: 100%;
  }

  .footer-main {
    padding: 40px 0 30px;
  }

  .footer-grid {
    gap: 28px;
  }

  .footer-logo img,
  .footer-logo .custom-logo,
  .footer-brand .custom-logo-link img {
    height: 36px !important;
    max-height: 36px !important;
  }

  .social-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .footer-bottom-inner {
    padding: 16px 0;
  }
}

/* Footer Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .footer-cta-section {
    padding: 30px 0;
  }

  .footer-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 24px 32px;
    max-width: 100%;
  }

  .footer-cta-content::before {
    display: none;
  }

  .footer-cta-text {
    margin-bottom: 0;
    flex: 1;
  }

  .footer-cta-text h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .footer-cta-text p {
    font-size: 13px;
  }

  .footer-cta-actions {
    flex-direction: row;
    flex-shrink: 0;
  }

  .footer-cta-btn-primary,
  .footer-cta-btn-secondary {
    width: auto;
    padding: 12px 20px;
  }

  .footer-main {
    padding: 40px 0 30px;
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 30px;
    text-align: left;
  }

  .footer-brand {
    grid-column: auto;
    max-width: 100%;
    text-align: left;
  }

  .footer-logo img,
  .footer-logo .custom-logo,
  .footer-brand .custom-logo-link img {
    height: 32px !important;
    max-height: 32px !important;
  }

  .footer-desc {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-col {
    text-align: left;
  }

  .footer-title {
    font-size: 10px;
    margin-bottom: 14px;
  }

  .footer-title::after {
    left: 0;
    transform: none;
  }

  .footer-links {
    gap: 10px;
  }

  .footer-links li a {
    justify-content: flex-start;
    font-size: 12px;
  }

  .contact-cards {
    max-width: 100%;
    margin: 0;
  }

  .contact-card {
    padding: 12px 14px;
    gap: 12px;
  }

  .contact-icon {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .contact-label {
    font-size: 9px;
  }

  .contact-value {
    font-size: 12px;
  }

  .footer-bottom-inner {
    flex-direction: row;
    padding: 16px 0;
  }

  .footer-copyright {
    font-size: 11px;
  }

  .footer-legal a {
    font-size: 11px;
    padding: 4px 8px;
  }

  .footer-divider {
    display: block;
  }
}

/* Legacy footer classes */
.site-footer-modern { display: none; }
.footer-inner{ display:none; }
.plain-list{ list-style:none; padding:0; margin:0; }

/* Responsive */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .grid-3{ grid-template-columns: 1fr; }
  .hero-title{ font-size: 40px; }
  .cta-card{ flex-direction:column; align-items:flex-start; }
}


.brand-fallback-logo{height:34px;width:auto;display:block;}



/* WOW homepage slider (fallback if Revolution Slider isn't used) */
.wow-slider{
  max-width: var(--container);
  margin: 22px auto 0;
  padding: 0 18px;
}
.wow-slider > .wow-slide{
  display:none;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 420px at 10% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 22px;
  position:relative;
  overflow:hidden;
}
.wow-slider > .wow-slide.is-active{ display:block; animation: wowFade .35s ease; }
.wow-kicker{
  margin:0 0 10px;
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}
.wow-slide h2{ margin:0 0 8px; font-size: 28px; line-height: 1.18; }
.wow-dots{ display:flex; gap:8px; align-items:center; margin-top: 14px; }
.wow-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.wow-dot.is-active{ background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; }
@keyframes wowFade{ from{opacity:.3; transform: translateY(6px);} to{opacity:1; transform: translateY(0);} }


/* Language switcher (Polylang dropdown with flags) */
.lang-switcher{ display:flex; align-items:center; }
.lang-switcher select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 36px 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.lang-switcher{ position:relative; }
.lang-switcher:after{
  content: "▾";
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events:none;
}
.lang-switcher img{ width: 18px; height: 12px; object-fit:cover; border-radius: 3px; }
@media (max-width: 720px){
  .lang-switcher{ margin: 6px 0 10px; }
}


/* Layout helpers */
.section-tight{ padding: 34px 0; }
.section-head--center{ flex-direction:column; align-items:center; text-align:center; }
.section-head--center p{ max-width: 72ch; }
.section-actions.center{ display:flex; justify-content:center; }

/* Hero compact */
.hero--compact{ padding-top: 44px; }
.hero--compact .kpi-row{ margin-top: 16px; }

/* Trust bar */
.trustbar{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:stretch;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.logo-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.logo-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 44px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

/* Featured cards */
.card--feature{
  position:relative;
  overflow:hidden;
}
.badge--accent{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}
.card--feature:before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height: 180px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
  filter: blur(8px);
  opacity:.8;
  pointer-events:none;
}

/* Process */
.process{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.process__step{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 16px;
  box-shadow: var(--shadow);
  position:relative;
}
.process__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  margin-bottom: 10px;
}
.process__step h3{ margin: 0 0 6px; font-size: 16px; }
.process__step p{ margin: 0; }

/* Split */
.split{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px;
  align-items:start;
}

/* Testimonials slider */
.t-slider{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 420px at 10% 0%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 60%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 18px;
}
.t-slide{ display:none; }
.t-slide.is-active{ display:block; animation: wowFade .35s ease; }
.t-quote{ font-size: 18px; margin: 0 0 14px; line-height: 1.5; }
.t-author{ display:flex; flex-direction:column; gap: 2px; margin: 0; }
.t-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 14px;
}
.t-btn{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 18px;
  cursor:pointer;
}
.t-dots{ display:flex; gap: 8px; align-items:center; justify-content:center; flex: 1; }
.t-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.t-dot.is-active{ background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; }

/* CTA wow */
.cta-card--wow{
  background:
    radial-gradient(900px 360px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 360px at 90% 20%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 55%),
    rgba(255,255,255,.03);
}

@media (max-width: 980px){
  .trustbar{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .logo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process{ grid-template-columns: 1fr; }
}



/* ===== INNER PAGES - Theme Dependent ===== */
body:not(.home) .site-content {
  padding-top: 80px;
}

.page-main {
  padding: 60px 0 80px;
}

.page-main .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* LIGHT THEME - Inner Pages */
[data-theme="light"] body:not(.home),
body:not(.home) {
  background: #ffffff;
}

[data-theme="light"] body:not(.home) .site-main,
body:not(.home) .site-main {
  background: #ffffff;
  min-height: 70vh;
}

[data-theme="light"] body:not(.home) .site-main .card,
[data-theme="light"] body:not(.home) .site-main .panel-card,
body:not(.home) .site-main .card,
body:not(.home) .site-main .panel-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* DARK THEME - Inner Pages */
[data-theme="dark"] body:not(.home) {
  background: #050816 !important;
}

[data-theme="dark"] body:not(.home) .site-main {
  background: #050816 !important;
  min-height: 70vh;
}

[data-theme="dark"] body:not(.home) .site-main .card,
[data-theme="dark"] body:not(.home) .site-main .panel-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.content-article {
  background: transparent;
}

/* WooCommerce Pages - Dark Theme Override */
body.woocommerce-cart,
body.woocommerce-checkout {
  background: #050816 !important;
}

/* Hide footer CTA on cart and checkout */
body.woocommerce-cart .footer-cta-section,
body.woocommerce-checkout .footer-cta-section {
  display: none !important;
}

body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
  background: #050816 !important;
}

body.woocommerce-cart .page-hero,
body.woocommerce-checkout .page-hero {
  background: linear-gradient(180deg, #0a1128 0%, #050816 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* WooCommerce Pages - Light Theme */
[data-theme="light"] body.woocommerce-cart,
[data-theme="light"] body.woocommerce-checkout {
  background: #f8fafc !important;
}

[data-theme="light"] body.woocommerce-cart .site-main,
[data-theme="light"] body.woocommerce-checkout .site-main {
  background: #f8fafc !important;
}

[data-theme="light"] body.woocommerce-cart .page-hero,
[data-theme="light"] body.woocommerce-checkout .page-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.muted {
  color: #64748b;
}

/* Page Hero - Light */
body:not(.home) .page-hero {
  background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

body:not(.home) .page-hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.1), transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(34,211,238,.08), transparent),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(249,115,22,.06), transparent);
}

body:not(.home) .page-hero-title {
  color: #0f172a;
  background: none;
  -webkit-text-fill-color: #0f172a;
}

body:not(.home) .page-hero-desc {
  color: #64748b;
}

body:not(.home) .badge-modern {
  background: rgba(99,102,241,.1);
  color: var(--accent);
  border-color: rgba(99,102,241,.2);
}

/* Content - Light */
body:not(.home) .content-title {
  color: #0f172a;
}

body:not(.home) .content-body {
  color: #475569;
}

body:not(.home) .content-body h2,
body:not(.home) .content-body h3,
body:not(.home) .content-body h4 {
  color: #0f172a;
}

body:not(.home) .content-body a {
  color: var(--accent);
}

body:not(.home) .content-body a:hover {
  color: #4f46e5;
}

body:not(.home) .content-body ul,
body:not(.home) .content-body ol {
  color: #475569;
}

body:not(.home) .content-body blockquote {
  color: #64748b;
  border-left-color: var(--accent);
  background: #f8fafc;
  padding: 20px 24px;
  border-radius: 0 12px 12px 0;
}

/* Sidebar - Light */
body:not(.home) .sidebar-col .widget {
  background: #f8fafc;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

body:not(.home) .sidebar-col .widget-title {
  color: #0f172a;
}

/* Sections - Light Theme */
body:not(.home) .section-header h2 {
  color: #0f172a;
}

body:not(.home) .section-header p {
  color: #64748b;
}

body:not(.home) .glass-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* Values Section - Light */
body:not(.home) .about-values-section {
  background: #f8fafc;
  border-color: rgba(0,0,0,.06);
}

body:not(.home) .value-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
}

body:not(.home) .value-card h3 {
  color: #0f172a;
}

body:not(.home) .value-card p {
  color: #64748b;
}

/* Stats - Light */
body:not(.home) .stat-item {
  background: #f8fafc;
  border-color: rgba(0,0,0,.06);
}

body:not(.home) .stat-label {
  color: #64748b;
}

/* CTA Box - Light */
body:not(.home) .page-cta-box {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(34,211,238,.05)) !important;
  border-color: rgba(99,102,241,.15) !important;
}

body:not(.home) .page-cta-box h2 {
  color: #0f172a;
}

body:not(.home) .page-cta-box p {
  color: #64748b;
}

/* Contact Page - Light */
body:not(.home) .contact-info-col h2 {
  color: #0f172a;
}

body:not(.home) .contact-intro {
  color: #64748b;
}

body:not(.home) .contact-method-card {
  background: #f8fafc;
  border-color: rgba(0,0,0,.08);
}

body:not(.home) .contact-method-info h3 {
  color: #64748b;
}

body:not(.home) .contact-method-info p {
  color: #0f172a;
}

body:not(.home) .contact-method-hint {
  color: #94a3b8;
}

body:not(.home) .contact-form-box {
  background: #f8fafc !important;
  border-color: rgba(0,0,0,.08) !important;
}

body:not(.home) .contact-form-box h3 {
  color: #0f172a;
}

body:not(.home) .contact-form-box > p {
  color: #64748b;
}

body:not(.home) .form-group label {
  color: #374151;
}

body:not(.home) .form-group input,
body:not(.home) .form-group select,
body:not(.home) .form-group textarea {
  background: #ffffff;
  border-color: rgba(0,0,0,.15);
  color: #0f172a;
}

body:not(.home) .form-group input:focus,
body:not(.home) .form-group select:focus,
body:not(.home) .form-group textarea:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

body:not(.home) .form-group input::placeholder,
body:not(.home) .form-group textarea::placeholder {
  color: #94a3b8;
}

body:not(.home) .checkbox-label {
  color: #64748b;
}

body:not(.home) .contact-social p {
  color: #64748b;
}

body:not(.home) .social-btn {
  background: #f1f5f9;
  border-color: rgba(0,0,0,.08);
  color: #64748b;
}

body:not(.home) .social-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

/* Services Page - Light */
body:not(.home) .services-overview-section {
  background: #ffffff;
}

body:not(.home) .services-tech-section {
  background: #ffffff;
}

body:not(.home) .services-tech-section .section-header h2 {
  color: #0f172a;
}

body:not(.home) .services-tech-section .section-header p {
  color: #64748b;
}

body:not(.home) .service-overview-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

body:not(.home) .service-overview-card:hover {
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
}

body:not(.home) .service-overview-card h3 {
  color: #0f172a;
}

body:not(.home) .service-overview-card > p {
  color: #64748b;
}

body:not(.home) .service-card-features li {
  color: #475569;
}

body:not(.home) .service-card-btn {
  background: #f1f5f9;
  border-color: rgba(0,0,0,.1);
  color: #0f172a;
}

body:not(.home) .service-card-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Process - Light */
body:not(.home) .services-process-section {
  background: #f8fafc;
  border-color: rgba(0,0,0,.06);
}

body:not(.home) .process-step-num {
  background: #ffffff;
  border-color: rgba(0,0,0,.1);
}

body:not(.home) .process-step-content h3 {
  color: #0f172a;
}

body:not(.home) .process-step-content p {
  color: #64748b;
}

/* Tech Section - Light */
body:not(.home) .tech-item {
  background: #f8fafc !important;
  border-color: rgba(0,0,0,.06) !important;
}

body:not(.home) .tech-item span {
  color: #0f172a;
}

/* Buttons - Light adjustments */
body:not(.home) .btn-outline {
  background: transparent;
  border-color: rgba(0,0,0,.2);
  color: #0f172a;
}

body:not(.home) .btn-outline:hover {
  background: #f1f5f9;
  border-color: rgba(0,0,0,.3);
}

/* Partners Page - Light */
body:not(.home) .partners-section {
  background: #fff;
}

body:not(.home) .partners-category-header {
  border-color: rgba(0,0,0,.08);
}

body:not(.home) .partners-category-title {
  color: #0f172a;
}

body:not(.home) .partners-category-icon {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(99,102,241,.08));
}

body:not(.home) .partners-category-desc {
  color: #64748b;
}

body:not(.home) .partner-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

body:not(.home) .partner-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
  border-color: rgba(99,102,241,.25) !important;
}

body:not(.home) .partner-logo {
  background: #f8fafc;
}

body:not(.home) .partner-logo img {
  filter: none;
  opacity: 1;
}

body:not(.home) .partner-logo-placeholder {
  color: rgba(0,0,0,.15);
}

body:not(.home) .partner-name {
  color: #0f172a;
}

body:not(.home) .partner-desc {
  color: #64748b;
}

body:not(.home) .partner-link {
  background: rgba(99,102,241,.1);
  color: var(--accent);
}

body:not(.home) .partner-link:hover {
  background: var(--accent);
  color: #fff;
}

body:not(.home) .partners-empty h3 {
  color: #0f172a;
}

body:not(.home) .partners-empty p {
  color: #64748b !important;
}

/* ===== DARK THEME FOR INNER PAGES ===== */
/* Page Hero - Dark */
[data-theme="dark"] body:not(.home) .page-hero {
  background: linear-gradient(180deg, #0a0f1a 0%, #050816 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

[data-theme="dark"] body:not(.home) .page-hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.15), transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(34,211,238,.1), transparent),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(249,115,22,.08), transparent);
}

[data-theme="dark"] body:not(.home) .page-hero-title {
  color: #ffffff;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] body:not(.home) .page-hero-desc {
  color: rgba(255,255,255,.7);
}

[data-theme="dark"] body:not(.home) .badge-modern {
  background: rgba(99,102,241,.2);
  color: #a5b4fc;
  border-color: rgba(99,102,241,.3);
}

/* Content - Dark */
[data-theme="dark"] body:not(.home) .content-title {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .content-body {
  color: rgba(255,255,255,.7);
}

[data-theme="dark"] body:not(.home) .content-body h2,
[data-theme="dark"] body:not(.home) .content-body h3,
[data-theme="dark"] body:not(.home) .content-body h4 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .content-body a {
  color: #a5b4fc;
  margin-left: 30px;
}

[data-theme="dark"] body:not(.home) .content-body a:hover {
  color: #c4b5fd;
}

[data-theme="dark"] body:not(.home) .content-body ul,
[data-theme="dark"] body:not(.home) .content-body ol {
  color: rgba(255,255,255,.7);
}

[data-theme="dark"] body:not(.home) .content-body blockquote {
  color: rgba(255,255,255,.6);
  border-left-color: var(--accent);
  background: rgba(255,255,255,.03);
}

/* Sidebar - Dark */
[data-theme="dark"] body:not(.home) .sidebar-col .widget {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

[data-theme="dark"] body:not(.home) .sidebar-col .widget-title {
  color: #ffffff;
}

/* Sections - Dark Theme */
[data-theme="dark"] body:not(.home) .section-header h2 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .section-header p {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .glass-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

/* Values Section - Dark */
[data-theme="dark"] body:not(.home) .about-values-section {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.06);
}

[data-theme="dark"] body:not(.home) .value-card {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] body:not(.home) .value-card h3 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .value-card p {
  color: rgba(255,255,255,.6);
}

/* Stats - Dark */
[data-theme="dark"] body:not(.home) .stat-item {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}

[data-theme="dark"] body:not(.home) .stat-label {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .stat-number {
  color: #ffffff;
}

/* CTA Box - Dark */
[data-theme="dark"] body:not(.home) .page-cta-box {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(34,211,238,.1)) !important;
  border-color: rgba(99,102,241,.25) !important;
}

[data-theme="dark"] body:not(.home) .page-cta-box h2 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .page-cta-box p {
  color: rgba(255,255,255,.7);
}

/* Contact Page - Dark */
[data-theme="dark"] body:not(.home) .contact-info-col h2 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .contact-intro {
  color: rgba(255,255,255,.7);
}

[data-theme="dark"] body:not(.home) .contact-method-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}

[data-theme="dark"] body:not(.home) .contact-method-info h3 {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .contact-method-info p {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .contact-method-hint {
  color: rgba(255,255,255,.4);
}

[data-theme="dark"] body:not(.home) .contact-form-box {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] body:not(.home) .contact-form-box h3 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .contact-form-box > p {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .form-group label {
  color: rgba(255,255,255,.8);
}

[data-theme="dark"] body:not(.home) .form-group input,
[data-theme="dark"] body:not(.home) .form-group select,
[data-theme="dark"] body:not(.home) .form-group textarea {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .form-group input:focus,
[data-theme="dark"] body:not(.home) .form-group select:focus,
[data-theme="dark"] body:not(.home) .form-group textarea:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}

[data-theme="dark"] body:not(.home) .form-group input::placeholder,
[data-theme="dark"] body:not(.home) .form-group textarea::placeholder {
  color: rgba(255,255,255,.4);
}

[data-theme="dark"] body:not(.home) .checkbox-label {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .contact-social p {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .social-btn {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}

[data-theme="dark"] body:not(.home) .social-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

/* Services Page - Dark */
[data-theme="dark"] body:not(.home) .services-overview-section {
  background: #050816;
}

[data-theme="dark"] body:not(.home) .services-tech-section {
  background: #050816;
}

[data-theme="dark"] body:not(.home) .services-tech-section .section-header h2 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .services-tech-section .section-header p {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .service-overview-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}

[data-theme="dark"] body:not(.home) .service-overview-card:hover {
  background: rgba(255,255,255,.05);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

[data-theme="dark"] body:not(.home) .service-overview-card h3 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .service-overview-card > p {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .service-card-features li {
  color: rgba(255,255,255,.7);
}

[data-theme="dark"] body:not(.home) .service-card-btn {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .service-card-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Process - Dark */
[data-theme="dark"] body:not(.home) .services-process-section {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.06);
}

[data-theme="dark"] body:not(.home) .process-step-num {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .process-step-content h3 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .process-step-content p {
  color: rgba(255,255,255,.6);
}

/* Tech Section - Dark */
[data-theme="dark"] body:not(.home) .tech-item {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
}

[data-theme="dark"] body:not(.home) .tech-item span {
  color: #ffffff;
}

/* Buttons - Dark adjustments */
[data-theme="dark"] body:not(.home) .btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,.2);
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
}

/* Partners Page - Dark */
[data-theme="dark"] body:not(.home) .partners-section {
  background: #050816;
}

[data-theme="dark"] body:not(.home) .partners-category-header {
  border-color: rgba(255,255,255,.08);
}

[data-theme="dark"] body:not(.home) .partners-category-title {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .partners-category-icon {
  background: linear-gradient(135deg, rgba(99,102,241,.3), rgba(99,102,241,.15));
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .partners-category-desc {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .partner-card {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}

[data-theme="dark"] body:not(.home) .partner-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  border-color: rgba(99,102,241,.3) !important;
}

[data-theme="dark"] body:not(.home) .partner-logo {
  background: #ffffff !important;
  border-radius: 12px;
}

[data-theme="dark"] body:not(.home) .partner-logo img {
  filter: none !important;
  opacity: 1 !important;
}

[data-theme="dark"] body:not(.home) .partner-logo-placeholder {
  color: rgba(255,255,255,.15);
}

/* Hide footer CTA on partners and careers pages */
.page-template-template-partners .footer-cta-section,
.page-template-template-careers .footer-cta-section {
  display: none !important;
}

[data-theme="dark"] body:not(.home) .partner-name {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .partner-desc {
  color: rgba(255,255,255,.6);
}

[data-theme="dark"] body:not(.home) .partner-link {
  background: rgba(99,102,241,.15);
  color: #a5b4fc;
}

[data-theme="dark"] body:not(.home) .partner-link:hover {
  background: var(--accent);
  color: #fff;
}

[data-theme="dark"] body:not(.home) .partners-empty h3 {
  color: #ffffff;
}

[data-theme="dark"] body:not(.home) .partners-empty p {
  color: rgba(255,255,255,.6) !important;
}

/* Muted text - Dark */
[data-theme="dark"] body:not(.home) .muted {
  color: rgba(255,255,255,.5);
}

/* ===== SOLUTION PAGES - Light Mode ===== */
[data-theme="light"] .sol-hero {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

[data-theme="light"] .sol-hero-gradient {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 50%, transparent 100%);
}

[data-theme="light"] .sol-hero-pattern {
  background-image: radial-gradient(rgba(5, 8, 22, 0.03) 1px, transparent 1px);
}

[data-theme="light"] .sol-hero-title {
  color: #0f172a;
}

[data-theme="light"] .sol-hero-desc {
  color: #64748b;
}

[data-theme="light"] .sol-badge {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .sol-hero-stats {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sol-hero-stats .stat-value {
  color: #0f172a;
}

[data-theme="light"] .sol-hero-stats .stat-label {
  color: #64748b;
}

[data-theme="light"] .sol-features {
  background: #f8fafc;
}

[data-theme="light"] .sol-section-title {
  color: #0f172a;
}

[data-theme="light"] .sol-feature-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sol-feature-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .sol-feature-card h3 {
  color: #0f172a;
}

[data-theme="light"] .sol-feature-card p {
  color: #64748b;
}

[data-theme="light"] .sol-hero-placeholder {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
  color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .sol-hero-image-wrapper {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .sol-hero-image-glow {
  opacity: 0.3;
}

/* Solution Hero Minimal - Light */
[data-theme="light"] .sol-hero-minimal {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

[data-theme="light"] .sol-hero-minimal-content h1 {
  color: #0f172a;
}

[data-theme="light"] .sol-hero-minimal-content p {
  color: #64748b;
}

/* Solution Hero Standard - Light */
[data-theme="light"] .solution-hero {
  background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 100%);
}

[data-theme="light"] .solution-hero h1 {
  color: #0f172a;
}

[data-theme="light"] .solution-hero p {
  color: #64748b;
}

[data-theme="light"] .solution-hero-image {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* ===== ABOUT PAGE - Dark Mode ===== */
[data-theme="dark"] .about-hero-wow {
  background-color: #050816;
}

[data-theme="dark"] .about-hero-badge {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .about-hero-title {
  color: #ffffff;
}

[data-theme="dark"] .about-hero-desc {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .about-mission-section {
  background: #050816;
}

[data-theme="dark"] .mission-card,
[data-theme="dark"] .vision-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mission-card h2,
[data-theme="dark"] .vision-card h2 {
  color: #ffffff;
}

[data-theme="dark"] .mission-card p,
[data-theme="dark"] .vision-card p {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .about-stats-section,
[data-theme="dark"] .about-stats-wow {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .about-values-wow {
  background: #050816;
}

[data-theme="dark"] .about-why-section {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .why-content h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .why-intro {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .why-feature-content h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .why-feature-content p {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .why-image-wrapper {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .why-image-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .why-image-bg {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
}

[data-theme="dark"] .why-image {
  background: transparent !important;
}

[data-theme="dark"] .why-image-content {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .about-process-section {
  background: #050816;
}

[data-theme="dark"] .process-timeline-wow {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .process-step-wow {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .process-step-wow:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .process-step-number {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .process-step-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .process-step-content h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .process-step-content p {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .about-cta-section {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
}

[data-theme="dark"] .about-cta-box {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .about-cta-box h2 {
  color: #ffffff;
}

[data-theme="dark"] .about-cta-box p {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .section-header-wow h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .section-header-wow p {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Values Cards - Dark Mode */
[data-theme="dark"] .about-values-wow {
  background: #050816 !important;
}

[data-theme="dark"] .value-wow-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .value-wow-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .value-wow-icon {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .value-wow-card h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .value-wow-card p {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .team-photo-placeholder {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.3);
}

/* ===== CAREERS PAGE - Dark Mode ===== */
/* Hero */
[data-theme="dark"] .careers-hero-wow {
  background-color: #050816 !important;
}

[data-theme="dark"] .careers-hero-badge {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  color: #a5b4fc !important;
}

[data-theme="dark"] .careers-hero-title {
  color: #ffffff !important;
}

[data-theme="dark"] .careers-hero-desc {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Why Section */
[data-theme="dark"] .careers-why-section {
  background: #050816 !important;
}

[data-theme="dark"] .careers-why-content h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .careers-why-intro {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .culture-point-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .culture-point-content h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .culture-point-content p {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .careers-visual-bg {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
}

[data-theme="dark"] .floating-stat {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .floating-stat .stat-num {
  color: #ffffff !important;
}

[data-theme="dark"] .floating-stat .stat-text {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Benefits Section */
[data-theme="dark"] .careers-benefits-section {
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .benefit-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .benefit-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .benefit-card h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .benefit-card p {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .benefit-icon {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Positions Section */
[data-theme="dark"] .careers-positions-section {
  background: #050816 !important;
}

[data-theme="dark"] .position-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .position-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .position-department {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #a5b4fc !important;
}

[data-theme="dark"] .position-title {
  color: #ffffff !important;
}

[data-theme="dark"] .position-meta .meta-item {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .position-tag {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .positions-cta {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .positions-cta p {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .btn-spontaneous {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #fff !important;
  border: none !important;
}

[data-theme="dark"] .btn-spontaneous:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .no-positions-message {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .no-positions-message h3 {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .no-positions-message p {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Hiring Process Section */
[data-theme="dark"] .careers-process-section {
  background: #050816 !important;
}

[data-theme="dark"] .hiring-step {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .hiring-step:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .hiring-step-num {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .hiring-step-content h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .hiring-step-content p {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .hiring-duration {
  background: rgba(99, 102, 241, 0.15) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .hiring-step-arrow {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* ===== CONTACT PAGE - Dark Mode ===== */
/* Hero Section */
[data-theme="dark"] .contact-hero-wow {
  background-color: #050816 !important;
}

[data-theme="dark"] .hero-grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
}

[data-theme="dark"] .contact-hero-badge {
  background: rgba(99,102,241,.15) !important;
  border-color: rgba(99,102,241,.3) !important;
  color: #a5b4fc !important;
}

[data-theme="dark"] .contact-hero-title {
  color: #ffffff !important;
}

[data-theme="dark"] .title-gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="dark"] .contact-hero-desc {
  color: rgba(255,255,255,.7) !important;
}

[data-theme="dark"] .contact-hero-stats {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .hero-stat .stat-number {
  color: #ffffff !important;
}

[data-theme="dark"] .hero-stat .stat-label {
  color: rgba(255,255,255,.6) !important;
}

[data-theme="dark"] .hero-stat-divider {
  background: rgba(255,255,255,.1) !important;
}

/* Contact Methods Section */
[data-theme="dark"] .contact-methods-wow {
  background: #050816 !important;
}

[data-theme="dark"] .contact-method-wow-card {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .contact-method-wow-card:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(99,102,241,.3) !important;
}

[data-theme="dark"] .method-content .method-label {
  color: rgba(255,255,255,.5) !important;
}

[data-theme="dark"] .method-content h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .method-content p {
  color: rgba(255,255,255,.6) !important;
}

[data-theme="dark"] .method-arrow {
  color: rgba(255,255,255,.3) !important;
}

[data-theme="dark"] .contact-method-wow-card:hover .method-arrow {
  color: var(--accent) !important;
}

/* Main Contact Section */
[data-theme="dark"] .contact-main-wow {
  background: #050816 !important;
}

/* Form Card */
[data-theme="dark"] .contact-form-card-clean {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .form-header-clean h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .form-header-clean p {
  color: rgba(255,255,255,.6) !important;
}

[data-theme="dark"] .contact-form-card-clean label {
  color: rgba(255,255,255,.8) !important;
}

[data-theme="dark"] .contact-form-card-clean input,
[data-theme="dark"] .contact-form-card-clean select,
[data-theme="dark"] .contact-form-card-clean textarea {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .contact-form-card-clean input:focus,
[data-theme="dark"] .contact-form-card-clean select:focus,
[data-theme="dark"] .contact-form-card-clean textarea:focus {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important;
}

[data-theme="dark"] .contact-form-card-clean input::placeholder,
[data-theme="dark"] .contact-form-card-clean textarea::placeholder {
  color: rgba(255,255,255,.4) !important;
}

[data-theme="dark"] .select-wrapper .select-arrow {
  color: rgba(255,255,255,.5) !important;
}

[data-theme="dark"] .checkbox-label {
  color: rgba(255,255,255,.7) !important;
}

[data-theme="dark"] .checkbox-label a {
  color: var(--accent) !important;
}

/* Info Column Cards */
[data-theme="dark"] .contact-promise-card,
[data-theme="dark"] .contact-social-card,
[data-theme="dark"] .contact-hours-card {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .contact-promise-card h3,
[data-theme="dark"] .contact-social-card h3,
[data-theme="dark"] .contact-hours-card h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .contact-promise-card p,
[data-theme="dark"] .contact-social-card p {
  color: rgba(255,255,255,.6) !important;
}

[data-theme="dark"] .hours-row {
  background: rgba(255,255,255,.05) !important;
}

[data-theme="dark"] .hours-row .day {
  color: rgba(255,255,255,.7) !important;
}

[data-theme="dark"] .hours-row .time {
  color: #22c55e !important;
}

[data-theme="dark"] .hours-row.hours-closed {
  background: rgba(255,255,255,.03) !important;
}

[data-theme="dark"] .hours-row.hours-closed .time {
  color: rgba(255,255,255,.4) !important;
}

[data-theme="dark"] .hours-note {
  background: rgba(99,102,241,.15) !important;
  color: rgba(255,255,255,.6) !important;
}

[data-theme="dark"] .hours-note i {
  color: var(--accent) !important;
}

[data-theme="dark"] .social-link-wow {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.7) !important;
}

[data-theme="dark"] .social-link-wow:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

/* FAQ Section */
[data-theme="dark"] .contact-faq-wow {
  background: rgba(255,255,255,.02) !important;
}

[data-theme="dark"] .faq-header h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .faq-header p {
  color: rgba(255,255,255,.6) !important;
}

[data-theme="dark"] .faq-item-wow {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .faq-question-wow,
[data-theme="dark"] .faq-question-wow .faq-q-text,
[data-theme="dark"] .faq-item-wow .faq-question-wow {
  color: #ffffff !important;
}

[data-theme="dark"] .faq-question-wow:hover {
  background: rgba(255,255,255,.03) !important;
}

[data-theme="dark"] .faq-icon {
  color: var(--accent) !important;
}

[data-theme="dark"] .faq-answer-wow p {
  color: rgba(255,255,255,.7) !important;
}

[data-theme="dark"] .faq-more p {
  color: rgba(255,255,255,.6) !important;
}

[data-theme="dark"] .btn-faq-contact {
  background: rgba(99,102,241,.15) !important;
  color: var(--accent) !important;
}

[data-theme="dark"] .btn-faq-contact:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* Homepage v5 layout */
.section-intro{ padding: 56px 0 28px; }
.section-intro .h1{ font-size: 48px; line-height: 1.08; margin: 0 0 10px; }
.section-intro .lead{ font-size: 18px; max-width: 62ch; margin: 0 0 18px; }
.split-center{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:center;
}
.section-intro .visual{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.section-intro .visual img{ width:100%; height:auto; display:block; }

.section-kpis{ padding: 22px 0 42px; }
.section-kpis .kpi-row{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.section-kpis .kpi{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.section-kpis .kpi strong{ font-size: 22px; }

.section-head.center{ text-align:center; margin-bottom: 16px; }
.section-head.center h2{ margin: 0 0 8px; font-size: 30px; }
.section-head.center p{ margin: 0 auto; max-width: 70ch; }

.cards{ display:grid; gap: 14px; }
.cards-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.visual-card{ border-radius: 22px; overflow:hidden; }
.visual-card img{ width:100%; height: 170px; object-fit: cover; display:block; background: rgba(255,255,255,.06); }
.visual-card h3{ margin: 12px 0 6px; font-size: 18px; }
.visual-card p{ margin: 0 0 12px; }

.section-solutions .solution-list{ display:grid; gap: 16px; }
.solution-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:center;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.solution-row:nth-child(even){ grid-template-columns: 1fr 1fr; }
.solution-text h3{ margin:0 0 8px; font-size: 22px; }
.solution-text p{ margin:0 0 12px; }
.solution-image img{ width:100%; height: 240px; object-fit: cover; border-radius: 18px; background: rgba(255,255,255,.05); }

.section-process .process-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.section-process .process-steps > div{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 14px;
  font-weight: 700;
}
.section-cta .cta-box{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 360px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 360px at 90% 20%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 22px;
  text-align:center;
}
.section-cta .cta-box h2{ margin:0 0 8px; }
.section-cta .cta-box p{ margin:0 0 14px; }

@media (max-width: 980px){
  .split-center{ grid-template-columns: 1fr; }
  .section-kpis .kpi-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards-3{ grid-template-columns: 1fr; }
  .solution-row{ grid-template-columns: 1fr; }
  .solution-image img{ height: 200px; }
  .section-process .process-steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .section-process .process-steps{ grid-template-columns: 1fr; }
}


/* Inner page layouts - Light theme default */
.content-narrow{ max-width: 1100px; margin: 0 auto; }
.content-title{ margin: 0 0 14px; font-size: 36px; line-height: 1.12; color: #0f172a; }
.content-body{ color: #475569; }
.content-body p{ line-height: 1.75; }
.content-body h2,
.content-body h3,
.content-body h4 { color: #0f172a; margin-top: 32px; }
.content-body a { color: var(--accent); }
.content-body a:hover { color: #4f46e5; }
.content-body ul, .content-body ol { color: #475569; }
.content-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 24px 0;
  color: #64748b;
  font-style: italic;
  background: #f8fafc;
  padding: 20px 24px;
  border-radius: 0 12px 12px 0;
}
.content-two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
}
.sidebar-col .widget{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.sidebar-col .widget-title{ margin:0 0 10px; font-size: 16px; color: var(--text); }
@media (max-width: 980px){
  .content-two-col{ grid-template-columns: 1fr; }
}


/* ===== Homepage (dynamic clean) ===== */
.hp-hero{
  position:relative;
  padding: 56px 0 26px;
}
.hp-hero:before{
  content:"";
  position:absolute;
  inset:-220px 0 auto 0;
  height: 520px;
  background:
    radial-gradient(900px 420px at 18% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(900px 420px at 82% 12%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 60%);
  pointer-events:none;
  opacity:.9;
  filter: blur(0px);
}
.hp-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:center;
}
.hp-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-weight: 900;
  color: var(--muted);
  margin: 0 0 10px;
}
.hp-title{
  margin: 0 0 12px;
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hp-lead{
  margin: 0 0 18px;
  font-size: 18px;
  max-width: 68ch;
}
.hp-actions{ display:flex; gap: 12px; flex-wrap:wrap; }
.hp-kpis{ margin-top: 18px; }

.hp-hero__visual{ position:relative; }
.hp-visual-card{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateY(6px);
}
.hp-visual-card img{ width:100%; height:auto; display:block; }
.hp-float{
  position:absolute;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  animation: floaty 4.8s ease-in-out infinite;
}
.hp-float__dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.hp-float--a{ top: 16px; left: 14px; }
.hp-float--b{ top: 56%; right: 12px; animation-delay: .6s; }
.hp-float--c{ bottom: 18px; left: 18px; animation-delay: 1.2s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

/* marquee pills */
.hp-marquee{ padding: 10px 0 34px; overflow:hidden; }
.hp-marquee__row{
  display:flex;
  gap: 10px;
  align-items:center;
  white-space:nowrap;
  will-change: transform;
  animation: marquee 18s linear infinite;
}
.hp-pill{
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.hp-section{ padding: 52px 0; }
.hp-section--alt{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hp-head{
  display:grid;
  gap: 8px;
  margin-bottom: 16px;
  max-width: 72ch;
}
.hp-head--row{
  grid-template-columns: 1fr auto;
  align-items:end;
  gap: 14px;
  max-width: none;
}
.hp-head h2{ margin: 0; font-size: 30px; }
.hp-head p{ margin: 0; color: var(--muted); }

.hp-cards{ display:grid; gap: 14px; }
.hp-cards--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

.hp-card{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 16px;
  position:relative;
  overflow:hidden;
  transform: translateY(0);
  transition: transform .2s ease, border-color .2s ease;
}
.hp-card:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.20); }
.hp-card__media{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  margin-bottom: 12px;
}
.hp-card__media img{ width:100%; height: 170px; object-fit: cover; display:block; }
.hp-card h3{ margin: 0 0 8px; font-size: 18px; }
.hp-mini{ margin: 10px 0 0; padding: 0; list-style: none; display:grid; gap: 8px; }
.hp-mini li{ color: var(--muted); padding-left: 18px; position:relative; }
.hp-mini li:before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  position:absolute; left:0; top: 8px;
}
.hp-card--accent:before{
  content:"";
  position:absolute;
  inset:-40% -30% auto -30%;
  height: 200px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 70%);
  filter: blur(10px);
  opacity:.8;
  pointer-events:none;
}

.hp-scroll{
  display:flex;
  gap: 12px;
  overflow:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.hp-scroll::-webkit-scrollbar{ height: 10px; }
.hp-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.hp-tile{
  flex: 0 0 310px;
  scroll-snap-align: start;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  text-decoration:none;
  color: inherit;
}
.hp-tile__img img{ width:100%; height: 160px; object-fit: cover; display:block; }
.hp-tile__body{ padding: 12px; display:grid; gap: 6px; }
.hp-tile__body strong{ font-size: 16px; }
.hp-tile__body span{ font-size: 13px; }

.hp-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.hp-step{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 14px;
}
.hp-step__n{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  margin-bottom: 10px;
}
.hp-step h3{ margin: 0 0 6px; font-size: 16px; }

.hp-case{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  text-decoration:none;
  color: inherit;
  display:grid;
}
.hp-case__img img{ width:100%; height: 200px; object-fit: cover; display:block; }
.hp-case__body{ padding: 12px; display:grid; gap: 6px; }
.hp-case__cta{ font-weight: 900; color: var(--text); }

.hp-final{ padding: 52px 0 70px; }
.hp-cta{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 360px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 360px at 90% 20%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 22px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:center;
}
.hp-cta__actions{ display:flex; gap: 12px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width: 980px){
  .hp-hero__grid{ grid-template-columns: 1fr; }
  .hp-title{ font-size: 40px; }
  .hp-cards--3{ grid-template-columns: 1fr; }
  .hp-steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hp-cta{ grid-template-columns: 1fr; }
  .hp-cta__actions{ justify-content:flex-start; }
}
@media (max-width: 720px){
  .hp-steps{ grid-template-columns: 1fr; }
}

/* reveal animation */
[data-reveal]{ opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal-in{ opacity: 1 !important; transform: translateY(0) !important; }


/* ===== Clean landing blocks (reference-inspired) ===== */
.lp-hero{
  position:relative;
  padding: 64px 0 36px;
}
.lp-hero:before{
  content:"";
  position:absolute;
  inset:-260px 0 auto 0;
  height: 620px;
  background:
    radial-gradient(900px 520px at 18% 14%, rgba(15,93,157,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 12%, rgba(246,125,32,.14), transparent 60%);
  pointer-events:none;
}
.lp-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items:center;
}
.lp-badge{
  display:inline-flex; gap: 10px; align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 900;
  margin: 0 0 12px;
}
.lp-title{
  margin: 0 0 12px;
  font-size: 50px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.lp-sub{
  margin: 0 0 18px;
  font-size: 18px;
  max-width: 70ch;
  color: var(--muted);
}
.lp-actions{ display:flex; gap: 12px; flex-wrap:wrap; }
.lp-trust{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}
.lp-trust__item{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.lp-hero__visual{ position:relative; }
.lp-visual{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.lp-visual img{ width:100%; height:auto; display:block; }
.lp-float{
  position:absolute;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-weight: 900;
  font-size: 13px;
  animation: floaty 4.8s ease-in-out infinite;
}
.lp-float--1{ top: 14px; left: 14px; }
.lp-float--2{ top: 55%; right: 12px; animation-delay: .6s; }
.lp-float--3{ bottom: 16px; left: 18px; animation-delay: 1.2s; }
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

.lp-stats{ padding: 10px 0 46px; }
.lp-stats__grid .kpi-row{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.lp-stats__grid .kpi{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.lp-stats__grid .kpi strong{ font-size: 22px; }

.lp-section{ padding: 58px 0; }
.lp-section--soft{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.lp-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.lp-head h2{ margin: 0 0 8px; font-size: 30px; }
.lp-head p{ margin: 0; color: var(--muted); max-width: 78ch; }
.lp-link{
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.lp-link:hover{ border-color: rgba(255,255,255,.18); }

.lp-features{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.lp-feature{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform .2s ease, border-color .2s ease;
}
.lp-feature:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.20); }
.lp-ico{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  margin-bottom: 12px;
  font-size: 18px;
}
.lp-ico--accent{
  background: linear-gradient(135deg, rgba(15,93,157,.28), rgba(246,125,32,.22));
  border-color: rgba(255,255,255,.18);
}
.lp-feature h3{ margin: 0 0 8px; font-size: 18px; }
.lp-feature p{ margin: 0 0 12px; color: var(--muted); }
.lp-feature ul{ margin: 0; padding-left: 18px; color: var(--muted); display:grid; gap: 8px; }

.lp-tiles{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.lp-tile{
  text-decoration:none;
  color: inherit;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 16px;
  display:grid;
  gap: 10px;
  transition: transform .2s ease, border-color .2s ease;
}
.lp-tile:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.20); }
.lp-tile__top{ display:flex; justify-content:space-between; align-items:center; gap: 10px; }
.lp-chip{
  display:inline-flex; gap: 10px; align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}
.lp-arrow{
  width: 36px; height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
}
.lp-tile strong{ font-size: 16px; }
.lp-tile span{ font-size: 13px; }

.lp-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.lp-step{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 14px;
  display:grid;
  gap: 8px;
}
.lp-step__ico{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(15,93,157,.22), rgba(246,125,32,.18));
  border: 1px solid rgba(255,255,255,.14);
}

.lp-cases{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.lp-case{
  text-decoration:none;
  color: inherit;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.lp-case:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.20); }
.lp-case__img img{ width:100%; height: 210px; object-fit: cover; display:block; background: rgba(255,255,255,.06); }
.lp-case__body{ padding: 14px; display:grid; gap: 8px; }
.lp-case__more{ font-weight: 900; }

.lp-cta{
  margin-top: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(15,93,157,.18), transparent 60%),
    radial-gradient(900px 360px at 90% 20%, rgba(246,125,32,.14), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.lp-cta h3{ margin: 0 0 6px; }

@media (max-width: 980px){
  .lp-hero__grid{ grid-template-columns: 1fr; }
  .lp-title{ font-size: 40px; }
  .lp-features{ grid-template-columns: 1fr; }
  .lp-tiles{ grid-template-columns: 1fr; }
  .lp-steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lp-cases{ grid-template-columns: 1fr; }
  .lp-head{ flex-direction:column; align-items:flex-start; }
  .lp-cta{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 720px){
  .lp-steps{ grid-template-columns: 1fr; }
}
.lang-item {
    list-style-type: none;
    width: 20px;
    height: 15px;
    margin-right: 10px;
}
.lang-item img {
    width: 20px !important;;
    height: 15px !important;
    border-radius: 0 !important;
}

/* Modern Language Switcher */
.lang-switcher-modern {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,.6);
  font-weight: 700;
  font-size: 12px;
  transition: all 0.2s ease;
}

.lang-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}

.lang-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.lang-btn img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

@media (max-width: 992px) {
  .lang-switcher-modern {
    margin-bottom: 10px;
  }
}
.custom-logo-link {
    max-width: 220px;
}


/* ===== GLASSMORPHISM & ANIMATIONS ===== */

/* Glass effect base */
.glass {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.1);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Animated gradient border */
.gradient-border {
  position: relative;
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--accent2), var(--accent3), var(--accent));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gradientRotate 4s linear infinite;
  opacity: .6;
}
@keyframes gradientRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Pulse glow effect */
.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,.3); }
  50% { box-shadow: 0 0 40px rgba(99,102,241,.5), 0 0 60px rgba(249,115,22,.3); }
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
}
.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delay classes */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Enhanced card hover effects */
.card-hover {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow), var(--glow);
  border-color: rgba(255,255,255,.25);
}

/* Shimmer effect */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  100% { left: 100%; }
}

/* Floating animation */
.float {
  animation: floatUpDown 6s ease-in-out infinite;
}
.float-slow {
  animation: floatUpDown 8s ease-in-out infinite;
}
.float-delayed {
  animation: floatUpDown 6s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Rotate on hover */
.rotate-hover:hover {
  transform: rotate(5deg) scale(1.05);
}

/* Text gradient animation */
.text-animate {
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3), var(--accent));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textGradient 5s linear infinite;
}
@keyframes textGradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Button glow */
.btn-glow {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.btn-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
  filter: blur(15px);
}
.btn-glow:hover::before {
  opacity: 1;
}

/* Particle dots background */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,.3);
  border-radius: 50%;
  animation: particleFloat 15s linear infinite;
}
@keyframes particleFloat {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* Modern hero styles */
.hero-modern {
  position: relative;
  padding: 140px 0 40px;
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.hero-modern .row,
.hero-modern .col-lg-6,
.hero-modern .reveal-right {
  overflow: visible;
}

.hero-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,.25), transparent),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(249,115,22,.15), transparent),
    radial-gradient(ellipse 60% 40% at 20% 10%, rgba(34,211,238,.1), transparent);
  pointer-events: none;
}

/* Hero Image Styles */
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero-image-wrapper {
  position: relative;
}

.hero-image-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, rgba(99,102,241,.4) 0%, transparent 60%);
  filter: blur(60px);
  z-index: -1;
  animation: heroGlowPulse 4s ease-in-out infinite;
}

@keyframes heroGlowPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.05); }
}

.hero-image-container {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 25px 50px -12px rgba(0,0,0,.6),
    0 0 80px rgba(99,102,241,.2);
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.5s ease;
}

.hero-image-container:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.hero-main-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

/* Dashboard Mock UI */
.hero-dashboard-mock {
  width: 100%;
  aspect-ratio: 16/11;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-template-rows: 50px 1fr;
  overflow: hidden;
  position: relative;
}

.dash-topbar {
  grid-column: 1 / -1;
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.dash-dots {
  display: flex;
  gap: 6px;
}

.dash-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dash-search {
  flex: 1;
  max-width: 300px;
  height: 28px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
}

.dash-avatar {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 50%;
  margin-left: auto;
}

.dash-sidebar {
  background: rgba(0,0,0,.2);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid rgba(255,255,255,.05);
}

.dash-logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 10px;
  margin: 0 auto 12px;
}

.dash-nav-item {
  width: 100%;
  height: 36px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  transition: all .2s;
}

.dash-nav-item.active {
  background: rgba(99,102,241,.3);
  box-shadow: 0 0 20px rgba(99,102,241,.2);
}

.dash-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dash-stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

.dash-stat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-stat-value {
  height: 16px;
  width: 60%;
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}

.dash-stat-label {
  height: 10px;
  width: 80%;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
}

.dash-chart {
  flex: 1;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.dash-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.dash-chart-title {
  width: 120px;
  height: 14px;
  background: rgba(255,255,255,.12);
  border-radius: 4px;
}

.dash-chart-legend {
  display: flex;
  gap: 12px;
}

.dash-chart-legend span {
  width: 50px;
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
}

.dash-chart-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-top: 10px;
}

.dash-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(99,102,241,.3) 100%);
  border-radius: 6px 6px 0 0;
  min-height: 20px;
  animation: barGrow 1.5s ease-out forwards;
  transform-origin: bottom;
}

.dash-bar:nth-child(even) {
  background: linear-gradient(180deg, var(--accent2) 0%, rgba(249,115,22,.3) 100%);
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.dash-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-table-row {
  height: 36px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
}

.dash-table-row.header {
  background: rgba(255,255,255,.05);
}

@media (max-width: 992px) {
  .hero-dashboard-mock {
    grid-template-columns: 50px 1fr;
    grid-template-rows: 40px 1fr;
  }

  .dash-content {
    padding: 12px;
    gap: 10px;
  }

  .dash-stats {
    gap: 8px;
  }

  .dash-stat-card {
    padding: 10px;
  }

  .dash-stat-icon {
    width: 30px;
    height: 30px;
  }
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    rgba(5,8,22,.8) 100%
  );
  pointer-events: none;
}

/* Hero Visual Container - contain floating elements */
.hero-visual {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.hero-image-wrapper {
  position: relative;
  overflow: visible;
}

/* ===== HERO 4 SOLUTIONS GRID ===== */
.hero-solutions-grid {
  position: relative;
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.hero-center-hub {
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  overflow: visible;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.hero-hub-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(99,102,241,.3), transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}

.hero-hub-inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  box-shadow: 0 0 50px rgba(99,102,241,.5);
  position: relative;
  z-index: 5;
}

.hero-hub-inner i {
  font-size: 24px;
  animation: rotateIcon 6s linear infinite;
}

.hub-logo-img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.hero-hub-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border: 2px solid rgba(99,102,241,.15);
  border-radius: 50%;
  animation: orbitPulse 3s ease-in-out infinite;
}

.hero-hub-orbit-2 {
  width: 220px;
  height: 220px;
  border-color: rgba(249,115,22,.1);
  animation-delay: 0.5s;
}

@keyframes orbitPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.3; }
}

/* Solution Nodes */
.hero-solution-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  z-index: 15;
  transition: all 0.4s ease;
}

.hero-solution-node:hover {
  background: rgba(255,255,255,.08);
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0,0,0,.3);
}

.hero-sol-crm {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.hero-sol-shop {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.hero-sol-erp {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.hero-sol-hosting {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.hero-sol-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}

.hero-sol-icon-cyan {
  background: linear-gradient(135deg, var(--accent3), #67e8f9);
}

.hero-sol-icon-orange {
  background: linear-gradient(135deg, var(--accent2), #fb923c);
}

.hero-sol-icon-green {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.hero-sol-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-sol-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  opacity: 0.9;
}

.hero-sol-label-alt {
  color: var(--accent2);
}

.hero-sol-label-green {
  color: #10b981;
}

.hero-sol-info strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.hero-sol-line {
  position: absolute;
  background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.02));
  pointer-events: none;
}

.hero-sol-crm .hero-sol-line {
  right: -30px;
  top: 50%;
  width: 30px;
  height: 2px;
  transform: translateY(-50%);
}

.hero-sol-shop .hero-sol-line {
  left: -30px;
  top: 50%;
  width: 30px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(270deg, rgba(255,255,255,.15), rgba(255,255,255,.02));
}

.hero-sol-erp .hero-sol-line {
  bottom: -25px;
  left: 50%;
  width: 2px;
  height: 25px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.02));
}

.hero-sol-hosting .hero-sol-line {
  top: -25px;
  left: 50%;
  width: 2px;
  height: 25px;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(255,255,255,.15), rgba(255,255,255,.02));
}

/* Hero Particles */
.hero-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  z-index: 3;
}

.hp-1 {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  top: 50%;
  left: 20%;
  animation: hpFlow1 2s ease-in-out infinite;
}

.hp-2 {
  background: var(--accent3);
  box-shadow: 0 0 12px var(--accent3);
  top: 50%;
  right: 20%;
  animation: hpFlow2 2s ease-in-out infinite;
  animation-delay: 0.5s;
}

.hp-3 {
  background: var(--accent2);
  box-shadow: 0 0 12px var(--accent2);
  top: 20%;
  left: 50%;
  animation: hpFlow3 2s ease-in-out infinite;
  animation-delay: 1s;
}

.hp-4 {
  background: #10b981;
  box-shadow: 0 0 12px #10b981;
  bottom: 20%;
  left: 50%;
  animation: hpFlow4 2s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes hpFlow1 {
  0%, 100% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(50px); opacity: 0; }
}

@keyframes hpFlow2 {
  0%, 100% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(-50px); opacity: 0; }
}

@keyframes hpFlow3 {
  0%, 100% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(40px); opacity: 0; }
}

@keyframes hpFlow4 {
  0%, 100% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}

@media (max-width: 992px) {
  .hero-sol-crm {
    left: -60px;
  }

  .hero-sol-shop {
    right: -60px;
  }
}

@media (max-width: 768px) {
  .hero-solutions-grid {
    height: 340px;
  }

  .hero-hub-inner {
    width: 70px;
    height: 70px;
    font-size: 9px;
  }

  .hero-hub-inner i {
    font-size: 18px;
  }

  .hero-hub-inner .hub-logo-img {
    width: 50%;
    height: 50%;
  }

  .hero-hub-orbit {
    width: 110px;
    height: 110px;
  }

  .hero-hub-orbit-2 {
    width: 150px;
    height: 150px;
  }

  .hero-solution-node {
    padding: 8px 10px;
    gap: 6px;
  }

  .hero-sol-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
    border-radius: 8px;
  }

  /* Show labels on mobile */
  .hero-sol-label {
    display: block;
    font-size: 7px;
  }

  .hero-sol-info strong {
    font-size: 10px;
  }

  /* Position nodes - closer to center for better effect */
  .hero-sol-crm {
    left: -15px;
  }

  .hero-sol-shop {
    right: -15px;
  }

  .hero-sol-erp {
    top: 5px;
  }

  .hero-sol-hosting {
    bottom: 5px;
  }

  /* Lines - connecting to orbits */
  .hero-sol-line {
    display: block;
  }

  .hero-sol-crm .hero-sol-line {
    right: -25px;
    width: 25px !important;
    height: 2px;
  }

  .hero-sol-shop .hero-sol-line {
    left: -25px;
    width: 25px !important;
    height: 2px;
  }

  .hero-sol-erp .hero-sol-line {
    bottom: -20px;
    width: 2px;
    height: 20px !important;
  }

  .hero-sol-hosting .hero-sol-line {
    top: -20px;
    width: 2px;
    height: 20px !important;
  }

  /* Light mode hero on mobile */
  [data-theme="light"] .hero-hub-orbit {
    border-color: rgba(5, 8, 22, 0.25) !important;
    border-width: 2px;
  }

  [data-theme="light"] .hero-hub-orbit-2 {
    border-color: rgba(5, 8, 22, 0.15) !important;
    border-width: 2px;
  }

  [data-theme="light"] .hero-solution-node {
    background: #ffffff !important;
    border: 2px solid rgba(5, 8, 22, 0.12) !important;
    box-shadow: 0 4px 15px rgba(5, 8, 22, 0.08);
  }

  [data-theme="light"] .hero-sol-info strong {
    color: #050816 !important;
  }

  [data-theme="light"] .hero-sol-label {
    color: var(--accent);
  }

  [data-theme="light"] .hero-sol-line {
    background: rgba(5, 8, 22, 0.25) !important;
  }

  [data-theme="light"] .hero-sol-crm .hero-sol-line {
    background: linear-gradient(90deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
  }

  [data-theme="light"] .hero-sol-shop .hero-sol-line {
    background: linear-gradient(270deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
  }

  [data-theme="light"] .hero-sol-erp .hero-sol-line {
    background: linear-gradient(180deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
  }

  [data-theme="light"] .hero-sol-hosting .hero-sol-line {
    background: linear-gradient(0deg, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
  }

  [data-theme="light"] .hero-hub-inner {
    background: #ffffff !important;
    border: 2px solid rgba(5, 8, 22, 0.1);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
  }

  /* Hide particles on mobile for cleaner look */
  .hero-particle {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-solutions-grid {
    height: 320px;
  }

  .hero-hub-inner {
    width: 55px;
    height: 55px;
  }

  .hero-hub-inner i {
    font-size: 14px;
  }

  .hero-hub-inner .hub-logo-img {
    width: 45%;
    height: 45%;
  }

  .hero-hub-orbit {
    width: 90px;
    height: 90px;
  }

  .hero-hub-orbit-2 {
    width: 130px;
    height: 130px;
  }

  .hero-solution-node {
    padding: 6px 8px;
    gap: 5px;
  }

  .hero-sol-icon {
    width: 24px;
    height: 24px;
    font-size: 10px;
    border-radius: 6px;
  }

  .hero-sol-label {
    font-size: 6px;
  }

  .hero-sol-info strong {
    font-size: 9px;
  }

  /* Position nodes */
  .hero-sol-crm {
    left: -15px;
  }

  .hero-sol-shop {
    right: -15px;
  }

  .hero-sol-erp {
    top: 35px;
  }

  .hero-sol-hosting {
    bottom: 35px;
  }

  /* Lines */
  .hero-sol-crm .hero-sol-line {
    right: -20px;
    width: 20px !important;
  }

  .hero-sol-shop .hero-sol-line {
    left: -20px;
    width: 20px !important;
  }

  .hero-sol-erp .hero-sol-line {
    bottom: -35px;
    height: 35px !important;
  }

  .hero-sol-hosting .hero-sol-line {
    top: -35px;
    height: 35px !important;
  }

  /* Show particles on small mobile */
  .hero-particle {
    display: block;
    width: 5px;
    height: 5px;
  }

  /* Light mode hero on small mobile */
  [data-theme="light"] .hero-hub-orbit {
    border-width: 2px;
    border-color: rgba(5, 8, 22, 0.25) !important;
  }

  [data-theme="light"] .hero-hub-orbit-2 {
    border-width: 2px;
    border-color: rgba(5, 8, 22, 0.15) !important;
  }

  [data-theme="light"] .hero-solution-node {
    background: #ffffff !important;
    border: 2px solid rgba(5, 8, 22, 0.12) !important;
    box-shadow: 0 3px 10px rgba(5, 8, 22, 0.08);
  }

  [data-theme="light"] .hero-hub-inner {
    background: #ffffff !important;
    border: 2px solid rgba(5, 8, 22, 0.1);
  }

  [data-theme="light"] .hero-particle {
    opacity: 0.8;
  }
}

/* Extra small mobile (under 400px) */
@media (max-width: 400px) {
  .hero-solutions-grid {
    height: 300px;
  }

  .hero-hub-inner {
    width: 50px;
    height: 50px;
  }

  .hero-hub-orbit {
    width: 80px;
    height: 80px;
  }

  .hero-hub-orbit-2 {
    width: 115px;
    height: 115px;
  }

  .hero-solution-node {
    padding: 5px 7px;
    gap: 4px;
  }

  .hero-sol-icon {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }

  .hero-sol-label {
    font-size: 5px;
  }

  .hero-sol-info strong {
    font-size: 8px;
  }

  /* Position nodes */
  .hero-sol-crm {
    left: -10px;
  }

  .hero-sol-shop {
    right: -10px;
  }

  .hero-sol-erp {
    top: 30px;
  }

  .hero-sol-hosting {
    bottom: 30px;
  }

  /* Lines */
  .hero-sol-crm .hero-sol-line {
    right: -15px;
    width: 15px !important;
  }

  .hero-sol-shop .hero-sol-line {
    left: -15px;
    width: 15px !important;
  }

  .hero-sol-erp .hero-sol-line {
    bottom: -30px;
    height: 30px !important;
  }

  .hero-sol-hosting .hero-sol-line {
    top: -30px;
    height: 30px !important;
  }

  .hero-particle {
    width: 4px;
    height: 4px;
  }
}

/* Hero Floating Cards */
.hero-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
  z-index: 10;
  /* Limit positions to prevent overflow */
  max-width: 200px;
}

.hero-float-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.hero-float-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-float-text strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.hero-float-text span {
  font-size: 12px;
  color: rgba(255,255,255,.6);
}

.hero-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(34,211,238,.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(34,211,238,.3);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent3);
  z-index: 10;
}

.hero-float-badge i {
  font-size: 16px;
}

/* Hero Analytics Card */
.hero-analytics-card {
  position: absolute;
  bottom: -35%;
  right: -10%;
  width: 190px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  z-index: 15;
  animation: floatUpDown 6s ease-in-out infinite;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.analytics-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.analytics-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(34, 197, 94, 0.2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #22c55e;
}

.analytics-badge i {
  font-size: 10px;
}

.analytics-chart {
  height: 50px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.analytics-chart svg {
  width: 100%;
  height: 100%;
}

.analytics-integrated-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.25);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent3);
}

.analytics-integrated-badge i {
  font-size: 14px;
}

.chart-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawLine 2s ease-out forwards;
  animation-delay: 0.5s;
}

.chart-area {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 1s;
}

.chart-dot {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards, pulse 2s ease-in-out infinite;
  animation-delay: 2s, 2.5s;
}

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

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

.analytics-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.analytics-stat {
  flex: 1;
  text-align: center;
  padding: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
}

.stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.5);
  margin-top: 2px;
}

@media (max-width: 1200px) {
  .hero-analytics-card {
    right: -5%;
    width: 175px;
    padding: 12px;
  }
}

.hero-float-stat {
  position: absolute;
  padding: 16px 24px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  text-align: center;
  z-index: 10;
  animation: floatUpDown 5s ease-in-out infinite;
  animation-delay: 1s;
}

.hero-float-stat .stat-value {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.hero-float-stat .stat-label {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}

@media (max-width: 992px) {
  .hero-float-card,
  .hero-float-badge,
  .hero-float-stat {
    display: none;
  }

  .hero-image-container {
    transform: none;
  }

  .hero-modern {
    padding: 120px 0 40px;
    min-height: auto;
  }

  .hero-modern .row {
    flex-direction: column;
    overflow: visible;
  }

  .hero-modern .col-lg-6 {
    width: 100%;
    text-align: center;
    overflow: visible;
  }

  .hero-modern .hero-content {
    margin-bottom: 40px;
  }

  .hero-modern .d-flex.gap-3 {
    justify-content: center;
  }

  .hero-modern .d-flex.gap-4 {
    justify-content: center;
  }

  .hero-solutions-grid {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero-modern {
    padding: 110px 0 30px;
  }

  .hero-modern h1 {
    font-size: 1.85rem !important;
    line-height: 1.2 !important;
  }

  .hero-modern .lead {
    font-size: 0.95rem !important;
  }

  .hero-modern .btn-lg {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }

  .hero-modern .d-flex.gap-4 {
    gap: 8px !important;
  }

  .hero-modern .glass-card {
    padding: 8px 12px !important;
  }

  .hero-modern .icon-glow {
    width: 28px !important;
    height: 28px !important;
  }

  .hero-modern .small {
    font-size: 11px !important;
  }
}

@media (max-width: 576px) {
  .hero-modern {
    padding: 120px 0 20px;
  }

  .hero-modern h1 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
  }

  .hero-modern .lead {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
  }

  .hero-modern .d-flex.gap-3 {
    flex-direction: column;
    align-items: center;
  }

  .hero-modern .btn-lg {
    width: 100%;
    justify-content: center;
    padding: 14px 20px !important;
  }

  .hero-modern .d-flex.gap-4 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero-solutions-grid {
    max-width: 280px;
  }
}

@media (max-width: 400px) {
  .hero-modern {
    padding: 115px 0 15px;
  }

  .hero-modern h1 {
    font-size: 1.4rem !important;
  }

  .hero-modern .glass-card {
    padding: 6px 10px !important;
  }

  .hero-modern .icon-glow {
    width: 24px !important;
    height: 24px !important;
  }

  .hero-modern .small {
    font-size: 10px !important;
  }

  .hero-solutions-grid {
    max-width: 260px;
  }
}

/* Hero Integration Visual */
.hero-integration-visual {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(145deg, rgba(15,23,42,.9), rgba(30,41,59,.9));
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.hero-hub-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 50%;
  animation: ringPulse 3s ease-in-out infinite;
}

.hero-hub-ring-2 {
  width: 240px;
  height: 240px;
  animation-delay: 0.5s;
  border-color: rgba(249,115,22,.15);
}

@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .5; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: .2; }
}

.hero-hub-core {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  box-shadow: 0 0 60px rgba(99,102,241,.5);
  position: relative;
  z-index: 5;
}

.hero-hub-core i {
  animation: rotateIcon 6s linear infinite;
}

.hero-system-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.hero-node-crm {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.hero-node-erp {
  bottom: 12%;
  left: 12%;
}

.hero-node-shop {
  bottom: 12%;
  right: 12%;
}

.hero-node-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  box-shadow: 0 15px 40px rgba(0,0,0,.4);
  transition: transform 0.3s, box-shadow 0.3s;
}

.hero-node-crm .hero-node-icon {
  background: linear-gradient(135deg, var(--accent), #818cf8);
}

.hero-node-erp .hero-node-icon {
  background: linear-gradient(135deg, var(--accent2), #fb923c);
}

.hero-node-shop .hero-node-icon {
  background: linear-gradient(135deg, var(--accent3), #67e8f9);
}

.hero-system-node span {
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,.8);
}

.hero-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.connection-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 2s ease forwards infinite;
}

.line-1 { animation-delay: 0s; }
.line-2 { animation-delay: 0.5s; }
.line-3 { animation-delay: 1s; }

@keyframes drawLine {
  0% { stroke-dashoffset: 100; opacity: 0; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

.hero-data-point {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 5;
}

.dp-1 {
  background: var(--accent);
  box-shadow: 0 0 15px var(--accent);
  top: 35%;
  left: 50%;
  animation: dataMove1 3s ease-in-out infinite;
}

.dp-2 {
  background: var(--accent2);
  box-shadow: 0 0 15px var(--accent2);
  bottom: 40%;
  left: 30%;
  animation: dataMove2 3s ease-in-out infinite;
  animation-delay: 1s;
}

.dp-3 {
  background: var(--accent3);
  box-shadow: 0 0 15px var(--accent3);
  bottom: 40%;
  right: 30%;
  animation: dataMove3 3s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes dataMove1 {
  0%, 100% { transform: translate(-50%, 0); opacity: 0; }
  50% { transform: translate(-50%, 40px); opacity: 1; }
}

@keyframes dataMove2 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  50% { transform: translate(30px, -20px); opacity: 1; }
}

@keyframes dataMove3 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  50% { transform: translate(-30px, -20px); opacity: 1; }
}

@media (max-width: 768px) {
  .hero-integration-visual {
    aspect-ratio: 1/1;
  }

  .hero-hub-core {
    width: 70px;
    height: 70px;
    font-size: 26px;
  }

  .hero-hub-ring {
    width: 120px;
    height: 120px;
  }

  .hero-hub-ring-2 {
    width: 160px;
    height: 160px;
  }

  .hero-node-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
    border-radius: 14px;
  }

  .hero-system-node span {
    font-size: 11px;
  }
}

/* Grid background pattern */
.grid-bg {
  position: relative;
}
.grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Glowing orb for hero */
.hero-orb {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.4), transparent 70%);
  filter: blur(60px);
  animation: orbPulse 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes orbPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.1); }
}

/* Modern glass card */
.glass-card {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 28px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.glass-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,.5);
}

/* Icon glow */
.icon-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(249,115,22,.15));
  border: 1px solid rgba(255,255,255,.1);
  position: relative;
}
.icon-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.3s;
  z-index: -1;
}
.icon-glow:hover::after {
  opacity: .5;
}

/* Stats counter animation */
.stat-number {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Modern badge */
.badge-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  backdrop-filter: blur(10px);
}
.badge-modern::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.2); }
}

/* CTA section modern */
.cta-modern {
  position: relative;
  padding: 80px 40px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(249,115,22,.08));
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
}
.cta-modern::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(99,102,241,.1), transparent 30%);
  animation: ctaRotate 10s linear infinite;
}
@keyframes ctaRotate {
  100% { transform: rotate(360deg); }
}

/* Service cards with accent colors */
.service-accent-1 { --card-accent: var(--accent); }
.service-accent-2 { --card-accent: var(--accent2); }
.service-accent-3 { --card-accent: var(--accent3); }

.service-card-modern {
  position: relative;
  padding: 32px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--card-accent), transparent);
  border-radius: 24px 24px 0 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.service-card-modern:hover::before {
  opacity: 1;
}
.service-card-modern:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.4), 0 0 30px rgba(var(--card-accent), .1);
}

/* Number highlight */
.number-highlight {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 50%, var(--accent3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Process steps connector */
.process-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.process-modern::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  opacity: .3;
}

/* ===== Process Section Home - New Design ===== */
.process-section-home {
  background: linear-gradient(180deg, #0a0f1a 0%, #0f172a 50%, #0a0f1a 100%);
  position: relative;
  overflow: hidden;
}

.process-section-home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(249, 115, 22, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.process-lead {
  color: rgba(255, 255, 255, 0.7);
}

.process-modern-home {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}

/* Linia de conectare între pași */
.process-modern-home::before {
  content: '';
  position: absolute;
  top: 80px;
  left: 12%;
  right: 12%;
  height: 3px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent3) 33%,
    var(--accent2) 66%,
    #10b981 100%
  );
  border-radius: 2px;
  opacity: 0.4;
}

.process-step-home {
  position: relative;
  z-index: 1;
}

.process-card-home {
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 30px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
}

.process-card-home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 24px 24px 0 0;
  transition: height 0.3s ease;
}

.process-card-violet::before {
  background: linear-gradient(90deg, var(--accent), #a855f7);
}

.process-card-cyan::before {
  background: linear-gradient(90deg, var(--accent3), #06b6d4);
}

.process-card-orange::before {
  background: linear-gradient(90deg, var(--accent2), #f59e0b);
}

.process-card-green::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.process-card-home:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.process-card-home:hover::before {
  height: 5px;
}

.process-num {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  letter-spacing: 1px;
}

.process-icon-home {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 28px;
  color: #fff;
  position: relative;
}

.process-card-violet .process-icon-home {
  background: linear-gradient(135deg, var(--accent), #a855f7);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.process-card-cyan .process-icon-home {
  background: linear-gradient(135deg, var(--accent3), #06b6d4);
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3);
}

.process-card-orange .process-icon-home {
  background: linear-gradient(135deg, var(--accent2), #f59e0b);
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3);
}

.process-card-green .process-icon-home {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.process-card-home h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

.process-card-home p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.6;
}

/* Responsive Process Home */
@media (max-width: 992px) {
  .process-modern-home {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .process-modern-home::before {
    display: none;
  }
}

@media (max-width: 576px) {
  .process-modern-home {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .process-card-home {
    padding: 24px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
  }

  .process-icon-home {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 22px;
    margin: 0;
    border-radius: 16px;
  }

  .process-card-home h3 {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .process-card-home p {
    font-size: 13px;
  }

  .process-num {
    top: 10px;
    right: 12px;
    font-size: 11px;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .process-section-home {
    padding: 30px 0 !important;
  }

  .process-modern-home {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .process-card-home {
    padding: 20px 15px;
  }

  .process-icon-home {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 12px;
  }

  .process-card-home h3 {
    font-size: 14px;
  }

  .process-card-home p {
    font-size: 12px;
  }
}

/* Typing cursor effect for hero */
.typing-cursor::after {
  content: "|";
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  color: var(--accent);
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Mouse scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 20px;
  cursor: pointer;
}
.scroll-indicator::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--accent);
  border-radius: 4px;
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(12px); opacity: .3; }
}

/* Noise texture overlay */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .03;
  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)'/%3E%3C/svg%3E");
}


/* ===== 4 SERVICE BOXES ===== */
.services-boxes {
  position: relative;
  z-index: 10;
  padding: 60px 0 50px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.02) 50%, transparent 100%);
}

.services-boxes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 28px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  text-decoration: none;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.service-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 1;
  transition: height .3s ease;
}

.service-box:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.15);
}

.service-box:hover::before {
  height: 6px;
}

/* Color variants */
.service-box-violet::before {
  background: linear-gradient(90deg, var(--accent), #818cf8);
}
.service-box-cyan::before {
  background: linear-gradient(90deg, var(--accent3), #67e8f9);
}
.service-box-orange::before {
  background: linear-gradient(90deg, var(--accent2), #fb923c);
}
.service-box-green::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.service-box-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  transition: transform .3s ease;
}

.service-box:hover .service-box-icon {
  transform: scale(1.1) rotate(-5deg);
}

.service-box-violet .service-box-icon {
  background: linear-gradient(135deg, var(--accent), #818cf8);
  box-shadow: 0 8px 20px rgba(99,102,241,.35);
}

.service-box-cyan .service-box-icon {
  background: linear-gradient(135deg, var(--accent3), #67e8f9);
  box-shadow: 0 8px 20px rgba(34,211,238,.35);
}

.service-box-orange .service-box-icon {
  background: linear-gradient(135deg, var(--accent2), #fb923c);
  box-shadow: 0 8px 20px rgba(249,115,22,.35);
}

.service-box-green .service-box-icon {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 8px 20px rgba(16,185,129,.35);
}

.service-box-content {
  flex: 1;
}

.service-box-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}

.service-box-content p {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin: 0;
  line-height: 1.5;
}

.service-box-arrow {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
  font-size: 14px;
  transition: all .3s ease;
  margin-top: auto;
  align-self: flex-end;
}

.service-box:hover .service-box-arrow {
  background: rgba(255,255,255,.15);
  color: #fff;
  transform: translateX(4px);
}

/* Responsive - tablets */
@media (max-width: 1200px) {
  .services-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-box {
    min-height: 180px;
  }
}

/* Responsive - mobile */
@media (max-width: 768px) {
  .services-boxes {
    padding: 40px 16px;
  }

  .services-boxes-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-box {
    flex-direction: row;
    align-items: center;
    min-height: auto;
    padding: 24px;
    border-radius: 16px;
  }

  .service-box-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    font-size: 20px;
  }

  .service-box-content h3 {
    font-size: 16px;
  }

  .service-box-content p {
    font-size: 13px;
  }

  .service-box-arrow {
    margin-top: 0;
    align-self: center;
  }
}


/* ===== CLIENT LOGOS SECTION ===== */
.clients-section {
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.clients-section .container {
  position: relative;
  z-index: 2;
}

.logo-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

.logo-marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.logo-marquee-content {
  display: flex;
  gap: 30px;
  animation: marqueeScroll 40s linear infinite;
  will-change: transform;
  align-items: center;
}

.logo-marquee:hover .logo-marquee-content {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f8f9fc);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 2px 10px rgba(0,0,0,.04),
    0 1px 2px rgba(0,0,0,.06);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.logo-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(249,115,22,.05));
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 20px;
}

.logo-item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 24px rgba(99,102,241,.12),
    0 4px 8px rgba(0,0,0,.08);
  border-color: rgba(99,102,241,.15);
}

.logo-item:hover::before {
  opacity: 1;
}

.logo-item img {
  height: 40px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.logo-item:hover img {
  filter: saturate(1.1);
  transform: scale(1.05);
}

/* Gradient fade on edges */
.marquee-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  pointer-events: none;
  z-index: 3;
}

.marquee-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--bg) 20%, transparent);
}

.marquee-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--bg) 20%, transparent);
}

/* Responsive */
@media (max-width: 768px) {
  .logo-item {
    padding: 10px 16px;
  }

  .logo-item img {
    height: 22px;
    max-width: 80px;
  }

  .marquee-fade {
    width: 40px;
  }

  .logo-marquee-content {
    gap: 16px;
    animation-duration: 20s;
  }
}


/* ===== SOLUTIONS ECOSYSTEM VISUAL ===== */
.solutions-ecosystem {
  display: flex;
  justify-content: center;
  padding: 75px 0 100px;
}

.ecosystem-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 380px;
  margin: 30px auto;
}

.ecosystem-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.ecosystem-core {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 0 60px rgba(99,102,241,.5), 0 0 100px rgba(99,102,241,.3);
  position: relative;
  z-index: 5;
}

.ecosystem-core i {
  font-size: 28px;
  animation: rotateIcon 8s linear infinite;
}

.ecosystem-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border: 2px solid rgba(99,102,241,.2);
  border-radius: 50%;
  animation: ecosystemPulse 3s ease-in-out infinite;
}

.ecosystem-ring-2 {
  width: 260px;
  height: 260px;
  border-color: rgba(249,115,22,.15);
  animation-delay: 0.5s;
}

@keyframes ecosystemPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .6; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: .3; }
}

.ecosystem-node {
  position: absolute;
  z-index: 15;
}

.node-crm {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.node-erp {
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.node-shop {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.node-hosting {
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.node-card-small {
  padding: 10px 16px !important;
}

.node-icon-small {
  width: 36px;
  height: 36px;
  font-size: 14px;
  border-radius: 10px;
}

.node-badge-cyan {
  color: var(--accent3);
  background: rgba(34,211,238,.15);
}

.node-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px !important;
  border-radius: 20px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.node-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}

.node-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.node-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.node-content h4 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--text);
}

.node-content p {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin: 0;
}

.node-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: rgba(99,102,241,.15);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
}

.node-badge-alt {
  color: var(--accent2);
  background: rgba(249,115,22,.15);
}

.node-connector {
  position: absolute;
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,.2), rgba(255,255,255,.05));
}

/* CRM (stânga) - conector spre dreapta */
.node-crm .node-connector {
  top: 50%;
  right: -50px;
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,.2), rgba(255,255,255,.05));
  transform: translateY(-50%);
}

/* ERP (sus) - conector în jos */
.node-erp .node-connector {
  bottom: -50px;
  left: 50%;
  width: 2px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.05));
  transform: translateX(-50%);
}

/* eCommerce (dreapta) - conector spre stânga */
.node-shop .node-connector {
  top: 50%;
  left: -50px;
  width: 50px;
  height: 2px;
  background: linear-gradient(to left, rgba(255,255,255,.2), rgba(255,255,255,.05));
  transform: translateY(-50%);
}

/* Hosting (jos) - conector în sus */
.node-hosting .node-connector {
  top: -50px;
  left: 50%;
  width: 2px;
  height: 50px;
  background: linear-gradient(to top, rgba(255,255,255,.2), rgba(255,255,255,.05));
  transform: translateX(-50%);
}

/* Data particles */
.data-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 3;
}

.particle-1 {
  background: var(--accent);
  box-shadow: 0 0 15px var(--accent);
  top: 25%;
  left: 50%;
  animation: particleFlow1 2.5s ease-in-out infinite;
}

.particle-2 {
  background: var(--accent2);
  box-shadow: 0 0 15px var(--accent2);
  bottom: 35%;
  left: 25%;
  animation: particleFlow2 2.5s ease-in-out infinite;
  animation-delay: 0.8s;
}

.particle-3 {
  background: var(--accent3);
  box-shadow: 0 0 15px var(--accent3);
  bottom: 35%;
  right: 25%;
  animation: particleFlow3 2.5s ease-in-out infinite;
  animation-delay: 1.6s;
}

@keyframes particleFlow1 {
  0%, 100% { transform: translate(-50%, 0); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, 60px); opacity: 0; }
}

@keyframes particleFlow2 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(60px, -30px); opacity: 0; }
}

@keyframes particleFlow3 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-60px, -30px); opacity: 0; }
}

.particle-4 {
  background: #10b981;
  box-shadow: 0 0 15px #10b981;
  bottom: 20%;
  left: 50%;
  animation: particleFlow4 2.5s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes particleFlow4 {
  0%, 100% { transform: translate(-50%, 0); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, 40px); opacity: 0; }
}

/* =====================================================
   External Integrations Ring
   ===================================================== */
.ecosystem-integrations {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 540px;
  height: 540px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.integration-node {
  position: absolute;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.integration-node:hover {
  transform: scale(1.15);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 6px 25px rgba(99, 102, 241, 0.25);
  z-index: 9998;
}

.integration-node img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: all 0.3s ease;
}

.integration-node:hover img {
  transform: scale(1.1);
}

/* Integration Tooltips */
.integration-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.integration-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #1e293b;
}

.integration-node:hover .integration-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* SameDay and Fan - tooltip goes RIGHT (they are on the right side) */
.int-sameday .integration-tooltip,
.int-fan .integration-tooltip {
  left: calc(100% + 12px);
  right: auto;
  bottom: 50%;
  transform: translateY(50%);
}

.int-sameday .integration-tooltip::after,
.int-fan .integration-tooltip::after {
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: #1e293b;
}

.int-sameday:hover .integration-tooltip,
.int-fan:hover .integration-tooltip {
  transform: translateY(50%) translateX(5px);
}

/* ANAF and Netopia - tooltip goes LEFT (they are on the left side) */
.int-anaf .integration-tooltip,
.int-netopia .integration-tooltip {
  left: auto;
  right: calc(100% + 12px);
  bottom: 50%;
  transform: translateY(50%);
}

.int-anaf .integration-tooltip::after,
.int-netopia .integration-tooltip::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: #1e293b;
}

.int-anaf:hover .integration-tooltip,
.int-netopia:hover .integration-tooltip {
  transform: translateY(50%) translateX(-5px);
}

/* Cargus - tooltip goes DOWN (it's at the bottom center) */
.int-cargus .integration-tooltip {
  bottom: auto;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
}

.int-cargus .integration-tooltip::after {
  top: auto;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: #1e293b;
}

.int-cargus:hover .integration-tooltip {
  transform: translateX(-50%) translateY(5px);
}

/* Position each integration node around the circle - 6 nodes */
.int-emag {
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
}

.int-sameday {
  top: 20%;
  right: -3%;
}

.int-fan {
  bottom: 20%;
  right: -3%;
}

.int-cargus {
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
}

.int-netopia {
  bottom: 20%;
  left: -3%;
}

.int-anaf {
  top: 20%;
  left: -3%;
}

/* Fix hover for centered nodes (eMag & Cargus) - keep translateX while scaling */
.int-emag:hover,
.int-cargus:hover {
  transform: translateX(-50%) scale(1.15);
}

/* Connector lines from integrations to center */
.integration-node::before {
  content: '';
  position: absolute;
  background: linear-gradient(to center, rgba(255,255,255,0.08), transparent);
  z-index: -1;
  opacity: 0.5;
}

/* Integration label - positioned at bottom left of circle */
.ecosystem-integration-label {
  position: absolute;
  bottom: 8%;
  left: -2%;
  z-index: 5;
}

.ecosystem-integration-label span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(30, 30, 45, 0.9);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

/* Dashed orbit ring for integrations */
.ecosystem-integrations::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

/* =====================================================
   Outer Integration Ring - Marketing & Communication
   ===================================================== */
.ecosystem-integrations-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 680px;
  height: 680px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

/* Dashed orbit ring for outer integrations */
.ecosystem-integrations-outer::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(99, 102, 241, 0.15);
  border-radius: 50%;
  pointer-events: none;
  animation: rotateRing 60s linear infinite;
}

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

.integration-node-outer {
  position: absolute;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(34, 211, 238, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.integration-node-outer i {
  font-size: 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.integration-node-outer:hover {
  transform: scale(1.2);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(34, 211, 238, 0.2));
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.3);
  z-index: 9999;
}

.integration-node-outer:hover i {
  transform: scale(1.1);
}

/* Outer node tooltips */
.integration-node-outer .integration-tooltip {
  bottom: calc(100% + 10px);
  font-size: 12px;
  padding: 8px 14px;
}

/* Position outer nodes - 4 nodes staggered with inner ring */
/* Inner ring: eMag(top), Sameday(top-right), Fan(bottom-right), Cargus(bottom), Netopia(bottom-left), ANAF(top-left) */
/* Outer ring positioned BETWEEN inner nodes */

.int-outer-sms {
  top: 8%;
  left: 18%;
}

.int-outer-email {
  top: 8%;
  right: 18%;
}

.int-outer-whatsapp {
  bottom: 8%;
  right: 18%;
}

.int-outer-api {
  bottom: 8%;
  left: 18%;
}

/* Logo styling for outer nodes */
.integration-node-outer.has-logo {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.3);
}

.integration-node-outer.has-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.integration-node-outer.has-logo:hover {
  background: #fff;
}

[data-theme="light"] .integration-node-outer.has-logo,
.section-light .integration-node-outer.has-logo {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.15);
}

/* =====================================================
   Outer Ring - Pulse Effect on Nodes
   ===================================================== */
.node-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  border: 2px solid transparent;
  opacity: 0;
  animation: nodePulse 3s ease-out infinite;
  pointer-events: none;
}

.int-outer-sms .node-pulse {
  border-color: #25D366;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
}

.int-outer-email .node-pulse {
  border-color: #FFE01B;
  box-shadow: 0 0 20px rgba(255, 224, 27, 0.4);
  animation-delay: 0.75s;
}

.int-outer-whatsapp .node-pulse {
  border-color: #25D366;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.4);
  animation-delay: 1.5s;
}

.int-outer-api .node-pulse {
  border-color: #22d3ee;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
  animation-delay: 2.25s;
}

@keyframes nodePulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* =====================================================
   Outer Ring - Data Flow Particles
   ===================================================== */
.outer-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

/* =====================================================
   Flying Envelopes - Email/Mailchimp
   ===================================================== */
.flying-envelopes {
  position: absolute;
  top: 8%;
  right: 18%;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 6;
}

.flying-envelope {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
}

.flying-envelope i {
  font-size: 14px;
  color: #FFE01B;
  filter: drop-shadow(0 0 8px rgba(255, 224, 27, 0.8));
}

/* Envelope 1 - Main path */
.envelope-1 {
  animation: flyEnvelope1 3.5s ease-in-out infinite;
}

/* Envelope 2 - Slightly different path */
.envelope-2 {
  animation: flyEnvelope2 3.5s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* Envelope 3 - Another variation */
.envelope-3 {
  animation: flyEnvelope3 3.5s ease-in-out infinite;
  animation-delay: 2.4s;
}

@keyframes flyEnvelope1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(-70px, 55px) rotate(-15deg) scale(0.8);
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-150px, 120px) rotate(-25deg) scale(0.3);
    opacity: 0;
  }
}

@keyframes flyEnvelope2 {
  0% {
    transform: translate(5px, -5px) rotate(5deg) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(-60px, 65px) rotate(-10deg) scale(0.7);
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-140px, 140px) rotate(-20deg) scale(0.25);
    opacity: 0;
  }
}

@keyframes flyEnvelope3 {
  0% {
    transform: translate(-5px, 5px) rotate(-5deg) scale(0.9);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(-80px, 50px) rotate(-20deg) scale(0.75);
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-160px, 110px) rotate(-30deg) scale(0.2);
    opacity: 0;
  }
}

/* Light mode - envelopes more visible */
.section-light .flying-envelope i,
[data-theme="light"] .flying-envelope i {
  color: #F59E0B;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* =====================================================
   Flying SMS Bubbles
   ===================================================== */
.flying-sms {
  position: absolute;
  top: 8%;
  left: 18%;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 6;
}

.sms-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
}

.sms-bubble i {
  font-size: 12px;
  color: #25D366;
  filter: drop-shadow(0 0 6px rgba(37, 211, 102, 0.8));
}

.bubble-1 {
  animation: flySms1 3s ease-in-out infinite;
}

.bubble-2 {
  animation: flySms2 3s ease-in-out infinite;
  animation-delay: 1s;
}

.bubble-3 {
  animation: flySms3 3s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes flySms1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(60px, 50px) scale(0.8);
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translate(130px, 110px) scale(0.3);
    opacity: 0;
  }
}

@keyframes flySms2 {
  0% {
    transform: translate(-5px, 5px) scale(0.9);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(50px, 60px) scale(0.7);
    opacity: 1;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translate(120px, 130px) scale(0.25);
    opacity: 0;
  }
}

@keyframes flySms3 {
  0% {
    transform: translate(5px, -5px) scale(0.85);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(70px, 45px) scale(0.7);
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translate(140px, 100px) scale(0.2);
    opacity: 0;
  }
}

/* =====================================================
   WhatsApp Double Checkmarks
   ===================================================== */
.flying-whatsapp {
  position: absolute;
  bottom: 8%;
  right: 18%;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 6;
}

.whatsapp-check {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
}

.whatsapp-check i {
  font-size: 14px;
  color: #25D366;
  filter: drop-shadow(0 0 6px rgba(37, 211, 102, 0.9));
}

.check-1 {
  animation: flyCheck1 2.8s ease-in-out infinite;
}

.check-2 {
  animation: flyCheck2 2.8s ease-in-out infinite;
  animation-delay: 0.9s;
}

.check-3 {
  animation: flyCheck3 2.8s ease-in-out infinite;
  animation-delay: 1.8s;
}

@keyframes flyCheck1 {
  0% {
    transform: translate(0, 0) scale(1.2);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translate(-55px, -50px) scale(0.9);
    opacity: 1;
  }
  85% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-120px, -110px) scale(0.35);
    opacity: 0;
  }
}

@keyframes flyCheck2 {
  0% {
    transform: translate(5px, 5px) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translate(-45px, -60px) scale(0.85);
    opacity: 1;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-110px, -130px) scale(0.3);
    opacity: 0;
  }
}

@keyframes flyCheck3 {
  0% {
    transform: translate(-5px, -5px) scale(1.1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translate(-65px, -45px) scale(0.8);
    opacity: 1;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    transform: translate(-135px, -100px) scale(0.25);
    opacity: 0;
  }
}

/* Light mode - SMS & WhatsApp more visible */
.section-light .sms-bubble i,
[data-theme="light"] .sms-bubble i,
.section-light .whatsapp-check i,
[data-theme="light"] .whatsapp-check i {
  filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.7)) drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Responsive - smaller on mobile */
@media (max-width: 768px) {
  .flying-envelopes,
  .flying-sms,
  .flying-whatsapp {
    width: 40px;
    height: 40px;
    transform-origin: center center;
  }

  /* Scale down animations to fit mobile */
  .flying-envelopes {
    top: 2%;
    right: 12%;
    transform: scale(0.6);
  }

  .flying-sms {
    top: 2%;
    left: 12%;
    transform: scale(0.6);
  }

  .flying-whatsapp {
    bottom: 2%;
    right: 12%;
    transform: scale(0.6);
  }

  .flying-envelope i,
  .sms-bubble i,
  .whatsapp-check i {
    font-size: 11px;
  }
}

@media (max-width: 576px) {
  .flying-envelopes,
  .flying-sms,
  .flying-whatsapp {
    transform: scale(0.5);
  }

  .flying-sms {
    top: 1%;
    left: 8%;
  }

  .flying-envelopes {
    top: 1%;
    right: 8%;
  }

  .flying-whatsapp {
    bottom: 1%;
    right: 8%;
  }

  .flying-envelope i,
  .sms-bubble i,
  .whatsapp-check i {
    font-size: 10px;
  }
}

/* Landscape - hide for cleaner look */
@media (max-width: 900px) and (orientation: landscape) {
  .flying-envelopes,
  .flying-sms,
  .flying-whatsapp {
    display: none;
  }
}

/* API Particle - Cyan */
.particle-api {
  background: #22d3ee;
  box-shadow: 0 0 12px #22d3ee, 0 0 24px rgba(34, 211, 238, 0.6);
  bottom: 12%;
  left: 22%;
  animation: particleApiToInner 3s ease-in-out infinite;
  animation-delay: 2.25s;
}

/* Particle Animation - API flowing toward inner ring */
@keyframes particleApiToInner {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(60px, -60px) scale(0.5);
    opacity: 0;
  }
}

/* Light mode - brighter particles */
.section-light .outer-particle,
[data-theme="light"] .outer-particle {
  width: 10px;
  height: 10px;
}

.section-light .particle-api,
[data-theme="light"] .particle-api {
  box-shadow: 0 0 15px #22d3ee, 0 0 30px #22d3ee, 0 0 45px rgba(34, 211, 238, 0.5);
}

/* Responsive - hide particles on small screens */
@media (max-width: 768px) {
  .outer-particle,
  .node-pulse {
    display: none;
  }
}

/* Outer ring label */
.ecosystem-integration-label-outer {
  position: absolute;
  bottom: 12%;
  right: -2%;
}

.ecosystem-integration-label-outer span {
  display: inline-block;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(34, 211, 238, 0.15));
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: var(--accent3);
  white-space: nowrap;
}

/* Light mode for outer ring */
[data-theme="light"] .ecosystem-integrations-outer::before {
  border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .integration-node-outer {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .integration-node-outer:hover {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .ecosystem-integration-label-outer span {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
}

.section-light .integration-node-outer {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(99, 102, 241, 0.15);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.section-light .integration-node-outer:hover {
  background: #fff;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
}

.section-light .ecosystem-integration-label-outer span {
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent);
  border-color: rgba(99, 102, 241, 0.15);
}

/* Responsive - Outer ring */
@media (max-width: 1200px) {
  .ecosystem-integrations-outer {
    width: 580px;
    height: 580px;
  }

  .integration-node-outer {
    width: 46px;
    height: 46px;
  }

  .integration-node-outer i {
    font-size: 18px;
  }

  .integration-node-outer.has-logo img {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 992px) {
  .ecosystem-integrations-outer {
    width: 470px;
    height: 470px;
  }

  .integration-node-outer {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .integration-node-outer i {
    font-size: 14px;
  }

  .integration-node-outer.has-logo img {
    width: 22px;
    height: 22px;
  }

  .ecosystem-integration-label-outer {
    display: none;
  }

  /* Adjust positions for tablet */
  .int-outer-sms {
    top: 5%;
    left: 14%;
  }

  .int-outer-email {
    top: 5%;
    right: 14%;
  }

  .int-outer-whatsapp {
    bottom: 5%;
    right: 14%;
  }

  .int-outer-api {
    bottom: 5%;
    left: 14%;
  }
}

/* Landscape on mobile */
@media (max-width: 900px) and (orientation: landscape) {
  .ecosystem-integrations-outer {
    width: 350px;
    height: 350px;
  }

  .integration-node-outer {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .integration-node-outer i {
    font-size: 12px;
  }

  .integration-node-outer.has-logo img {
    width: 20px;
    height: 20px;
  }

  .int-outer-sms {
    top: 5%;
    left: 14%;
  }

  .int-outer-email {
    top: 5%;
    right: 14%;
  }

  .int-outer-whatsapp {
    bottom: 5%;
    right: 14%;
  }

  .int-outer-api {
    bottom: 5%;
    left: 14%;
  }

  .outer-particle,
  .node-pulse {
    display: none;
  }
}

@media (max-width: 768px) {
  .ecosystem-integrations-outer {
    width: 420px;
    height: 420px;
  }

  .integration-node-outer {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .integration-node-outer i {
    font-size: 13px;
  }

  .integration-node-outer.has-logo img {
    width: 22px;
    height: 22px;
  }

  .integration-node-outer .integration-tooltip {
    display: none;
  }

  .int-outer-sms {
    top: 4%;
    left: 15%;
  }

  .int-outer-email {
    top: 4%;
    right: 15%;
  }

  .int-outer-whatsapp {
    bottom: 4%;
    right: 15%;
  }

  .int-outer-api {
    bottom: 4%;
    left: 15%;
  }
}

@media (max-width: 576px) {
  .ecosystem-integrations-outer {
    width: 360px;
    height: 360px;
  }

  .integration-node-outer {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .integration-node-outer i {
    font-size: 11px;
  }

  .integration-node-outer.has-logo img {
    width: 18px;
    height: 18px;
  }

  .int-outer-sms {
    top: 3%;
    left: 13%;
  }

  .int-outer-email {
    top: 3%;
    right: 13%;
  }

  .int-outer-whatsapp {
    bottom: 3%;
    right: 13%;
  }

  .int-outer-api {
    bottom: 3%;
    left: 13%;
  }

  .outer-particle,
  .node-pulse {
    display: none;
  }
}

@media (max-width: 992px) {
  .solutions-ecosystem {
    margin-bottom: 2rem;
  }

  .ecosystem-wrapper {
    height: 480px;
  }

  .ecosystem-integrations {
    width: 380px;
    height: 380px;
  }

  .integration-node {
    width: 44px;
    height: 44px;
  }

  .integration-node img {
    width: 30px;
    height: 30px;
  }
}

/* Landscape pe mobil */
@media (max-width: 900px) and (orientation: landscape) {
  .solutions-ecosystem {
    padding: 0 0 15px;
  }

  .ecosystem-wrapper {
    height: 380px;
    margin: 0 auto;
  }

  .node-erp {
    top: -45px;
    z-index: 20;
  }

  .node-hosting {
    bottom: -45px;
    z-index: 20;
  }

  .ecosystem-integrations {
    width: 280px;
    height: 280px;
  }

  .node-card {
    padding: 8px 10px !important;
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }

  .node-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .node-content h4 {
    font-size: 11px;
  }

  .node-content p,
  .node-badge {
    display: none;
  }

  .ecosystem-core {
    width: 60px;
    height: 60px;
  }

  .ecosystem-ring {
    width: 100px;
    height: 100px;
  }

  .ecosystem-ring-2 {
    width: 140px;
    height: 140px;
  }

  .integration-node {
    width: 34px;
    height: 34px;
  }

  .integration-node img {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 768px) {
  .solutions-ecosystem {
    padding: 0 0 30px;
  }

  .ecosystem-wrapper {
    height: 480px;
    margin: 10px auto;
  }

  .node-crm {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .node-erp {
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
  }

  .node-shop {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .node-hosting {
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
  }

  .node-card {
    padding: 10px 12px !important;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .node-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .node-content h4 {
    font-size: 12px;
  }

  .node-content p,
  .node-badge {
    display: none;
  }

  .ecosystem-core {
    width: 80px;
    height: 80px;
    font-size: 10px;
  }

  .ecosystem-core i {
    font-size: 20px;
  }

  .ecosystem-core .hub-logo-img {
    width: 55%;
    height: 55%;
  }

  .ecosystem-ring {
    width: 120px;
    height: 120px;
  }

  .ecosystem-ring-2 {
    width: 170px;
    height: 170px;
  }

  .ecosystem-integrations {
    width: 340px;
    height: 340px;
  }

  .integration-node {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .integration-node img {
    width: 28px;
    height: 28px;
  }

  /* Hide tooltips on tablet */
  .integration-tooltip {
    display: none;
  }

  .ecosystem-integration-label {
    bottom: 5%;
    left: -5%;
  }

  .ecosystem-integration-label span {
    font-size: 9px;
    padding: 5px 12px;
  }

  /* Connectors pe mobil */
  .node-connector {
    width: 30px;
    height: 2px;
  }

  .node-crm .node-connector {
    right: -30px;
    width: 30px;
  }

  .node-erp .node-connector {
    bottom: -30px;
    height: 30px;
    width: 2px;
  }

  .node-shop .node-connector {
    left: -30px;
    width: 30px;
  }

  .node-hosting .node-connector {
    top: -30px;
    height: 30px;
    width: 2px;
  }

  /* Particule mai mici pe mobil */
  .data-particle,
  .integration-particle {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 576px) {
  .solutions-ecosystem {
    padding: 0 0 20px;
  }

  .ecosystem-wrapper {
    height: 420px;
    margin: 5px auto;
  }

  .node-erp {
    top: -45px;
    z-index: 20;
  }

  .node-hosting {
    bottom: -45px;
    z-index: 20;
  }

  .ecosystem-integrations {
    width: 290px;
    height: 290px;
  }

  .integration-node {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .integration-node img {
    width: 24px;
    height: 24px;
  }

  /* Hide tooltips on small screens */
  .integration-tooltip {
    display: none;
  }

  .ecosystem-core {
    width: 60px;
    height: 60px;
    font-size: 9px;
  }

  .ecosystem-core i {
    font-size: 16px;
  }

  .ecosystem-core .hub-logo-img {
    width: 50%;
    height: 50%;
  }

  .ecosystem-ring {
    width: 100px;
    height: 100px;
  }

  .ecosystem-ring-2 {
    width: 140px;
    height: 140px;
  }

  .node-card {
    padding: 8px 10px !important;
  }

  .node-icon {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .node-content h4 {
    font-size: 10px;
  }

  /* Connectors pe mobil mic */
  .node-crm .node-connector {
    right: -20px;
    width: 20px;
  }

  .node-erp .node-connector {
    bottom: -20px;
    height: 20px;
  }

  .node-shop .node-connector {
    left: -20px;
    width: 20px;
  }

  .node-hosting .node-connector {
    top: -20px;
    height: 20px;
  }

  .ecosystem-integration-label {
    bottom: 3%;
    left: -8%;
  }

  .ecosystem-integration-label span {
    font-size: 8px;
    padding: 4px 10px;
  }

  /* Particule și mai mici */
  .data-particle,
  .integration-particle {
    width: 6px;
    height: 6px;
  }
}

/* ===== SOLUTION CARDS ===== */
.solution-card {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.solution-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.solution-card:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,.5);
}

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

.solution-card-featured {
  background: rgba(249,115,22,.05);
  border-color: rgba(249,115,22,.2);
}

.solution-card-featured::before {
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
  opacity: 1;
}

.solution-card-featured:hover {
  background: rgba(249,115,22,.08);
  border-color: rgba(249,115,22,.3);
}

.solution-card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(249,115,22,.08), transparent 40%);
  pointer-events: none;
}

.solution-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.solution-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(99,102,241,.1));
  border: 1px solid rgba(99,102,241,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent);
  transition: all 0.3s ease;
}

.solution-card:hover .solution-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 30px rgba(99,102,241,.3);
}

.solution-icon-alt {
  background: linear-gradient(135deg, rgba(249,115,22,.25), rgba(249,115,22,.1));
  border-color: rgba(249,115,22,.3);
  color: var(--accent2);
}

.solution-card:hover .solution-icon-alt {
  box-shadow: 0 10px 30px rgba(249,115,22,.3);
}

.solution-icon-cyan {
  background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(34,211,238,.1));
  border-color: rgba(34,211,238,.3);
  color: var(--accent3);
}

.solution-card:hover .solution-icon-cyan {
  box-shadow: 0 10px 30px rgba(34,211,238,.3);
}

.solution-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  background: rgba(99,102,241,.1);
  padding: 6px 12px;
  border-radius: 8px;
}

.solution-type-alt {
  color: var(--accent2);
  background: rgba(249,115,22,.1);
}

.solution-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 12px;
}

.solution-desc {
  color: rgba(255,255,255,.65);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.solution-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solution-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.8);
}

.solution-features i {
  color: var(--accent);
  font-size: 12px;
  width: 20px;
  text-align: center;
}

.solution-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.solution-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  transform: translateX(5px);
}

.solution-btn i {
  transition: transform 0.3s ease;
}

.solution-btn:hover i {
  transform: translateX(4px);
}

.solution-btn-primary {
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  border: none;
  color: #fff;
}

.solution-btn-primary:hover {
  box-shadow: 0 10px 30px rgba(249,115,22,.3);
  transform: translateY(-2px);
}

/* CRM Featured Card - Main Product */
.solution-card-crm {
  background: linear-gradient(145deg, rgba(99,102,241,.12), rgba(99,102,241,.04));
  border: 2px solid rgba(99,102,241,.35);
  margin-top: 16px;
}

.solution-card-crm::before {
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  opacity: 1;
  height: 4px;
}

.solution-card-crm {
  overflow: visible;
  margin-top: 20px;
}

.solution-card-crm::before {
  display: none;
}

.solution-card-crm:hover {
  transform: translateY(-8px);
  border-color: rgba(99,102,241,.5);
  box-shadow: 0 30px 60px -15px rgba(99,102,241,.4);
}

.solution-card-crm .solution-card-glow {
  background: radial-gradient(circle at center, rgba(99,102,241,.15), transparent 50%);
}

.solution-badge-top {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 18px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(99,102,241,.5);
  z-index: 10;
}

.solution-icon-featured {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #fff;
  box-shadow: 0 10px 30px rgba(99,102,241,.3);
}

.solution-card:hover .solution-icon-featured {
  box-shadow: 0 15px 40px rgba(99,102,241,.4);
}

.solution-type-featured {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

.solution-type-cyan {
  color: var(--accent3);
  background: rgba(34,211,238,.1);
}

/* Industry Tags */
.solution-industries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  transition: all 0.3s ease;
}

.industry-tag i {
  font-size: 10px;
  color: var(--accent);
}

.industry-tag:hover {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.3);
  color: var(--text);
}

.solution-btn-crm {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  width: 100%;
  justify-content: center;
}

.solution-btn-crm:hover {
  box-shadow: 0 10px 30px rgba(99,102,241,.4);
}

@media (max-width: 992px) {
  .solution-card {
    padding: 24px;
  }

  .solution-card-crm {
    transform: scale(1);
  }

  .solution-card-crm:hover {
    transform: translateY(-8px);
  }

  .solution-title {
    font-size: 20px;
  }

  .solution-badge-top {
    font-size: 10px;
    padding: 5px 12px;
  }
}

/* ===== HOSTING/CLOUD BANNER ===== */
.hosting-banner {
  position: relative;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 32px;
  overflow: hidden;
}

.hosting-banner-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(34,211,238,.08), transparent 50%),
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(99,102,241,.06), transparent 50%);
  pointer-events: none;
}

.hosting-banner-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 24px;
  align-items: center;
}

.hosting-icon-group {
  display: flex;
  align-items: center;
}

.hosting-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(34,211,238,.05));
  border: 1px solid rgba(34,211,238,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--accent3);
  position: relative;
  z-index: 2;
}

.hosting-icon-secondary {
  width: 50px;
  height: 50px;
  font-size: 18px;
  margin-left: -20px;
  z-index: 1;
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(99,102,241,.05));
  border-color: rgba(99,102,241,.3);
  color: var(--accent);
}

.hosting-text h4 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hosting-text p {
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  max-width: 400px;
}

.hosting-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hosting-features span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}

.hosting-features i {
  color: var(--accent3);
  font-size: 11px;
}

.hosting-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.hosting-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(34,211,238,.3);
}

.hosting-btn i {
  transition: transform 0.3s ease;
}

.hosting-btn:hover i {
  transform: translateX(4px);
}

@media (max-width: 1200px) {
  .hosting-banner-content {
    grid-template-columns: auto 1fr auto;
  }

  .hosting-features {
    grid-column: 1 / -1;
    order: 4;
  }
}

@media (max-width: 768px) {
  .hosting-banner {
    padding: 24px;
  }

  .hosting-banner-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }

  .hosting-icon-group {
    justify-content: center;
  }

  .hosting-text p {
    max-width: none;
  }

  .hosting-features {
    justify-content: center;
  }

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

/* ===== INTEGRATION HUB VISUAL (Legacy) ===== */
.integration-hub {
  position: relative;
  height: 300px;
  max-width: 600px;
  margin: 0 auto;
}

.hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.hub-core {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 0 60px rgba(99,102,241,.4);
}

.hub-core i {
  font-size: 28px;
  animation: rotateIcon 8s linear infinite;
}

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

.hub-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hub-node-1 {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.hub-node-2 {
  bottom: 15%;
  left: 15%;
}

.hub-node-3 {
  bottom: 15%;
  right: 15%;
}

.hub-node-icon {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 15px 40px rgba(0,0,0,.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 5;
}

.hub-node:hover .hub-node-icon {
  transform: scale(1.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.hub-node-label {
  font-weight: 800;
  font-size: 14px;
  color: rgba(255,255,255,.8);
}

.hub-line {
  position: absolute;
  background: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.05));
  z-index: 1;
}

.hub-node-1 .hub-line {
  width: 2px;
  height: 60px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.hub-node-2 .hub-line {
  width: 80px;
  height: 2px;
  top: 50%;
  left: 100%;
  margin-left: 8px;
  background: linear-gradient(to right, rgba(255,255,255,.2), rgba(255,255,255,.05));
}

.hub-node-3 .hub-line {
  width: 80px;
  height: 2px;
  top: 50%;
  right: 100%;
  margin-right: 8px;
  background: linear-gradient(to left, rgba(255,255,255,.2), rgba(255,255,255,.05));
}

/* Animated data flow dots */
.hub-node::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  animation: dataFlow 2s ease-in-out infinite;
  z-index: 2;
}

.hub-node-1::before {
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  animation-name: dataFlowVertical;
}

.hub-node-2::before {
  top: 50%;
  left: calc(100% + 20px);
  transform: translateY(-50%);
  animation-name: dataFlowHorizontal;
  animation-delay: 0.5s;
  background: var(--accent2);
  box-shadow: 0 0 10px var(--accent2);
}

.hub-node-3::before {
  top: 50%;
  right: calc(100% + 20px);
  left: auto;
  transform: translateY(-50%);
  animation-name: dataFlowHorizontalReverse;
  animation-delay: 1s;
  background: var(--accent3);
  box-shadow: 0 0 10px var(--accent3);
}

@keyframes dataFlowVertical {
  0%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(30px); }
}

@keyframes dataFlowHorizontal {
  0%, 100% { opacity: 0; transform: translateY(-50%) translateX(0); }
  50% { opacity: 1; transform: translateY(-50%) translateX(30px); }
}

@keyframes dataFlowHorizontalReverse {
  0%, 100% { opacity: 0; transform: translateY(-50%) translateX(0); }
  50% { opacity: 1; transform: translateY(-50%) translateX(-30px); }
}

@media (max-width: 768px) {
  .integration-hub {
    height: 250px;
  }

  .hub-core {
    width: 80px;
    height: 80px;
    font-size: 11px;
  }

  .hub-core i {
    font-size: 22px;
  }

  .hub-node-icon {
    width: 55px;
    height: 55px;
    font-size: 22px;
    border-radius: 16px;
  }

  .hub-node-2 {
    left: 10%;
  }

  .hub-node-3 {
    right: 10%;
  }
}


/* ===== PAGE TEMPLATES STYLES ===== */

/* Page Hero */
.page-hero {
  position: relative;
  padding: 80px 0 80px;
  overflow: hidden;
}

.page-hero-compact {
  padding: 140px 0 60px;
}

/* WooCommerce Page Hero - Minimal */
.woocommerce-cart .page-hero,
.woocommerce-checkout .page-hero {
  padding: 60px 0 40px;
}

.woocommerce-cart .page-hero-title,
.woocommerce-checkout .page-hero-title {
  font-size: 36px;
}

.woocommerce-cart .page-hero-bg,
.woocommerce-checkout .page-hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14, 165, 233, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(34,211,238,.08), transparent);
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,.2), transparent),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(34,211,238,.1), transparent),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(249,115,22,.08), transparent);
  z-index: 0;
}

.page-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.page-hero-title {
  font-size: 48px;
  font-weight: 800;
  margin: 16px 0 20px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-hero-desc {
  font-size: 18px;
  color: rgba(255,255,255,.65);
  margin: 0;
  line-height: 1.7;
}

/* Page Content Section */
.page-content-section {
  padding: 60px 0;
}

.content-narrow {
  max-width: 800px;
  margin: 0 auto;
}

.content-narrow h2 {
  font-size: 28px;
  margin: 40px 0 16px;
}

.content-narrow p {
  color: rgba(255,255,255,.7);
  line-height: 1.8;
}

/* Section Header */
.section-header {
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 36px;
  font-weight: 800;
  margin: 12px 0 16px;
}

.section-header p {
  font-size: 17px;
  color: rgba(255,255,255,.6);
  max-width: 600px;
  margin: 0 auto;
}

/* About Values */
.about-values-section {
  padding: 80px 0;
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.value-card {
  text-align: center;
  padding: 40px 24px !important;
}

.value-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
}

.value-card h3 {
  font-size: 20px;
  margin: 0 0 12px;
}

.value-card p {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin: 0;
  line-height: 1.6;
}

/* About Stats */
.about-stats-section {
  padding: 60px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.stat-item {
  text-align: center;
  padding: 30px 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
}

.stat-number {
  display: block;
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: rgba(255,255,255,.6);
}

/* Page CTA Section */
.page-cta-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.page-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent, #6366f1), var(--accent2, #22d3ee), transparent);
  border-radius: 2px;
}

.page-cta-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.page-cta-box {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 70px 50px !important;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08), rgba(34,211,238,.05)) !important;
  border: 1px solid rgba(99,102,241,.25) !important;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(99,102,241,.15), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
}

.page-cta-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.6), rgba(34,211,238,.6), transparent);
  border-radius: 2px;
}

.page-cta-box h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 16px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-cta-box p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
  margin: 0 0 35px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

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

.cta-buttons .btn-primary {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(99,102,241,.35);
  transition: all 0.3s ease;
}

.cta-buttons .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(99,102,241,.45);
}

.cta-buttons .btn-secondary {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  transition: all 0.3s ease;
}

.cta-buttons .btn-secondary:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-3px);
}

/* Light mode for page-cta */
[data-theme="light"] .page-cta-section::after {
  background: radial-gradient(circle, rgba(99,102,241,.06) 0%, transparent 70%);
}

[data-theme="light"] .page-cta-box {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.05), rgba(34,211,238,.03)) !important;
  border-color: rgba(99,102,241,.2) !important;
  box-shadow: 0 20px 60px rgba(99,102,241,.1), inset 0 1px 0 rgba(255,255,255,.5);
}

[data-theme="light"] .page-cta-box h2 {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .page-cta-box p {
  color: #64748b;
}

[data-theme="light"] .cta-buttons .btn-secondary {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.1);
  color: #1e293b;
}

[data-theme="light"] .cta-buttons .btn-secondary:hover {
  background: rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.15);
}

/* =====================================================
   Case Studies Page
   ===================================================== */

/* Case Studies Hero */
.casestudies-hero-wow {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.casestudies-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.casestudies-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.casestudies-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #6366f1;
  margin-bottom: 24px;
}

.casestudies-hero-badge .badge-dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.casestudies-hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  margin: 0 0 24px;
}

.casestudies-hero-title .title-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.casestudies-hero-desc {
  font-size: 20px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Case Studies Section */
.casestudies-section {
  padding: 80px 0 100px;
  background: #fff;
}

.casestudies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.casestudy-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.casestudy-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.casestudy-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.casestudy-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.casestudy-card:hover .casestudy-image img {
  transform: scale(1.05);
}

.casestudy-overlay {
  position: absolute;
  inset: 0;
  background: rgba(99, 102, 241, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.casestudy-card:hover .casestudy-overlay {
  background: rgba(99, 102, 241, 0.8);
}

.casestudy-link {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  font-size: 18px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s ease;
}

.casestudy-card:hover .casestudy-link {
  opacity: 1;
  transform: scale(1);
}

.casestudy-content {
  padding: 28px;
}

.casestudy-industry {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.casestudy-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.3;
}

.casestudy-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.3s ease;
}

.casestudy-title a:hover {
  color: #6366f1;
}

.casestudy-client {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
  margin: 0 0 12px;
}

.casestudy-client i {
  color: #6366f1;
}

.casestudy-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 20px;
}

.casestudy-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6366f1;
  text-decoration: none;
  transition: gap 0.3s ease;
}

.casestudy-readmore:hover {
  gap: 12px;
}

.casestudies-empty {
  text-align: center;
  padding: 80px 20px;
  background: #f8fafc;
  border-radius: 20px;
  border: 1px dashed #cbd5e1;
}

.casestudies-empty i {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 20px;
}

.casestudies-empty h3 {
  font-size: 20px;
  color: #64748b;
  margin: 0 0 10px;
}

.casestudies-empty p {
  color: #94a3b8;
  margin: 0;
}

.casestudies-pagination {
  margin-top: 60px;
  text-align: center;
}

/* Dark Mode - Case Studies */
[data-theme="dark"] .casestudies-hero-wow {
  background-color: #050816;
}

[data-theme="dark"] .casestudies-hero-badge {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

[data-theme="dark"] .casestudies-hero-title {
  color: #ffffff;
}

[data-theme="dark"] .casestudies-hero-desc {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .casestudies-section {
  background: #050816;
}

[data-theme="dark"] .casestudy-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .casestudy-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .casestudy-industry {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-title a {
  color: #ffffff;
}

[data-theme="dark"] .casestudy-title a:hover {
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-client {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .casestudy-excerpt {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .casestudy-readmore {
  color: #a5b4fc;
}

[data-theme="dark"] .casestudies-empty {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .casestudies-empty i {
  color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .casestudies-empty h3 {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .casestudies-empty p {
  color: rgba(255, 255, 255, 0.4);
}

/* Case Studies Responsive */
@media (max-width: 1024px) {
  .casestudies-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .casestudies-hero-wow {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .casestudies-hero-title {
    font-size: 36px;
  }

  .casestudies-hero-desc {
    font-size: 17px;
  }

  .casestudies-grid {
    grid-template-columns: 1fr;
  }

  .casestudy-content {
    padding: 24px;
  }
}

/* =====================================================
   Single Case Study Page
   ===================================================== */

/* Single Case Study Hero */
.casestudy-single-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.casestudy-single-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.casestudy-single-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.casestudy-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.casestudy-back-link:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366f1;
}

.casestudy-single-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.casestudy-single-industry {
  padding: 6px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.casestudy-single-year {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #64748b;
}

.casestudy-single-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
  margin: 0 0 20px;
}

.casestudy-single-excerpt {
  font-size: 20px;
  line-height: 1.7;
  color: #64748b;
  margin: 0 0 24px;
}

.casestudy-single-client {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  color: #0f172a;
}

.casestudy-single-client i {
  color: #6366f1;
}

/* Single Case Study Content Section */
.casestudy-single-content-section {
  padding: 80px 0;
  background: #fff;
}

.casestudy-single-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 60px;
  align-items: start;
}

/* Sidebar */
.casestudy-single-sidebar {
  position: sticky;
  top: 100px;
}

.casestudy-sidebar-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
}

.casestudy-sidebar-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.sidebar-item {
  margin-bottom: 20px;
}

.sidebar-item:last-child {
  margin-bottom: 0;
}

.sidebar-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.sidebar-value {
  font-size: 15px;
  font-weight: 500;
  color: #0f172a;
}

.sidebar-technologies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tech-tag {
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #6366f1;
}

.sidebar-website-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
}

.sidebar-website-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.casestudy-sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 16px;
  margin-top: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.casestudy-sidebar-cta span {
  font-size: 15px;
  font-weight: 600;
  color: #6366f1;
}

.casestudy-sidebar-cta i {
  color: #6366f1;
  transition: transform 0.3s ease;
}

.casestudy-sidebar-cta:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
  border-color: rgba(99, 102, 241, 0.3);
}

.casestudy-sidebar-cta:hover i {
  transform: translateX(4px);
}

/* Main Content */
.casestudy-results-box {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 40px;
}

.casestudy-results-box h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #16a34a;
  margin: 0 0 12px;
}

.casestudy-results-box p {
  font-size: 16px;
  line-height: 1.7;
  color: #166534;
  margin: 0;
}

.casestudy-content-body {
  font-size: 17px;
  line-height: 1.8;
  color: #475569;
}

.casestudy-content-body h2 {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin: 48px 0 20px;
}

.casestudy-content-body h3 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 36px 0 16px;
}

.casestudy-content-body p {
  margin: 0 0 20px;
}

.casestudy-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 32px 0;
}

.casestudy-content-body ul,
.casestudy-content-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.casestudy-content-body li {
  margin-bottom: 8px;
}

/* Navigation Section */
.casestudy-navigation-section {
  padding: 60px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.casestudy-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.casestudy-nav-item {
  flex: 1;
  padding: 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.casestudy-nav-item:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.casestudy-nav-prev {
  text-align: left;
}

.casestudy-nav-next {
  text-align: right;
}

.casestudy-nav-empty {
  background: transparent;
  border-color: transparent;
}

.nav-direction {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
  margin-bottom: 8px;
}

.casestudy-nav-next .nav-direction {
  justify-content: flex-end;
}

.nav-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.casestudy-nav-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.casestudy-nav-all span {
  display: none;
}

.casestudy-nav-all:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}

/* Video Section */
.casestudy-video-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.casestudy-video-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.video-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
  margin-bottom: 20px;
}

.video-badge i {
  font-size: 14px;
}

.casestudy-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.casestudy-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Challenge & Solution Section */
.casestudy-challenge-section {
  padding: 80px 0;
  background: #ffffff;
}

.challenge-solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.challenge-box,
.solution-box {
  padding: 40px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.challenge-box {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(220, 38, 38, 0.04));
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.solution-box {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(22, 163, 74, 0.04));
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.box-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
}

.challenge-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
  color: #dc2626;
}

.solution-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.1));
  color: #16a34a;
}

.challenge-box h3,
.solution-box h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
}

.challenge-box h3 {
  color: #b91c1c;
}

.solution-box h3 {
  color: #15803d;
}

.challenge-box p,
.solution-box p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

.challenge-box p {
  color: #991b1b;
}

.solution-box p {
  color: #166534;
}

/* Benefits Section */
.casestudy-benefits-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.casestudy-benefits-section .section-header-center {
  text-align: center;
  margin-bottom: 60px;
}

.casestudy-benefits-section .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
  margin-bottom: 16px;
}

.casestudy-benefits-section h2 {
  font-size: 36px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.benefit-item {
  padding: 32px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}

.benefit-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #6366f1;
}

.benefit-item p {
  font-size: 15px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
  font-weight: 500;
}

/* Testimonial Section */
.casestudy-testimonial-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  position: relative;
  overflow: hidden;
}

.casestudy-testimonial-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.casestudy-testimonial-card {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.testimonial-quote-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 32px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #ffffff;
}

.testimonial-text {
  font-size: 24px;
  line-height: 1.7;
  color: #ffffff;
  font-weight: 400;
  font-style: italic;
  margin: 0 0 40px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.author-avatar {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.author-info {
  text-align: left;
}

.author-info strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.author-info span {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.author-company {
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin-top: 2px;
}

/* Client Description */
.casestudy-client-description {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.04));
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 40px;
}

.casestudy-client-description h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: #6366f1;
  margin: 0 0 16px;
}

.casestudy-client-description h3 i {
  font-size: 20px;
}

.casestudy-client-description p {
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

/* Dark Mode - Single Case Study */
[data-theme="dark"] .casestudy-single-hero {
  background-color: #050816;
}

[data-theme="dark"] .casestudy-back-link {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .casestudy-back-link:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-single-industry {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-single-year {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .casestudy-single-title {
  color: #ffffff;
}

[data-theme="dark"] .casestudy-single-excerpt {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .casestudy-single-client {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

[data-theme="dark"] .casestudy-single-content-section {
  background: #050816;
}

[data-theme="dark"] .casestudy-sidebar-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .casestudy-sidebar-card h3 {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .sidebar-label {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .sidebar-value {
  color: #ffffff;
}

[data-theme="dark"] .tech-tag {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-sidebar-cta {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .casestudy-sidebar-cta span,
[data-theme="dark"] .casestudy-sidebar-cta i {
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-results-box {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .casestudy-results-box h3 {
  color: #4ade80;
}

[data-theme="dark"] .casestudy-results-box p {
  color: #86efac;
}

[data-theme="dark"] .casestudy-content-body {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .casestudy-content-body h2,
[data-theme="dark"] .casestudy-content-body h3 {
  color: #ffffff;
}

[data-theme="dark"] .casestudy-navigation-section {
  background: #0a0f1a;
  border-top-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .casestudy-nav-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .casestudy-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .nav-direction {
  color: #a5b4fc;
}

[data-theme="dark"] .nav-title {
  color: #ffffff;
}

/* Dark Mode - New Case Study Sections */
[data-theme="dark"] .casestudy-video-section {
  background: linear-gradient(180deg, #0a0f1a 0%, #050816 100%);
}

[data-theme="dark"] .video-badge {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-video-container {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .casestudy-challenge-section {
  background: #050816;
}

[data-theme="dark"] .challenge-box {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.08));
  border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .solution-box {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.08));
  border-color: rgba(34, 197, 94, 0.25);
}

[data-theme="dark"] .challenge-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.2));
  color: #f87171;
}

[data-theme="dark"] .solution-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
  color: #4ade80;
}

[data-theme="dark"] .challenge-box h3 {
  color: #f87171;
}

[data-theme="dark"] .solution-box h3 {
  color: #4ade80;
}

[data-theme="dark"] .challenge-box p {
  color: #fca5a5;
}

[data-theme="dark"] .solution-box p {
  color: #86efac;
}

[data-theme="dark"] .casestudy-benefits-section {
  background: linear-gradient(180deg, #0a0f1a 0%, #050816 100%);
}

[data-theme="dark"] .casestudy-benefits-section .section-badge {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-benefits-section h2 {
  color: #ffffff;
}

[data-theme="dark"] .benefit-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .benefit-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .benefit-icon {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .benefit-item p {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .casestudy-client-description {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .casestudy-client-description h3 {
  color: #a5b4fc;
}

[data-theme="dark"] .casestudy-client-description p {
  color: rgba(255, 255, 255, 0.7);
}

/* Single Case Study Responsive */
@media (max-width: 1024px) {
  .casestudy-single-layout {
    grid-template-columns: 280px 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .casestudy-single-hero {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .casestudy-single-title {
    font-size: 32px;
  }

  .casestudy-single-excerpt {
    font-size: 17px;
  }

  .casestudy-single-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .casestudy-single-sidebar {
    position: static;
    order: 2;
  }

  .casestudy-single-main {
    order: 1;
  }

  .casestudy-navigation {
    flex-direction: column;
  }

  .casestudy-nav-item {
    width: 100%;
  }

  .casestudy-nav-prev,
  .casestudy-nav-next {
    text-align: center;
  }

  .nav-direction {
    justify-content: center;
  }

  .casestudy-nav-all {
    order: -1;
    width: 100%;
    height: auto;
    padding: 16px;
    border-radius: 12px;
  }

  .casestudy-nav-all span {
    display: inline;
  }

  /* New sections responsive */
  .casestudy-video-section {
    padding: 60px 0;
  }

  .casestudy-video-wrapper {
    max-width: 100%;
  }

  .casestudy-challenge-section {
    padding: 60px 0;
  }

  .challenge-solution-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .challenge-box,
  .solution-box {
    padding: 28px;
  }

  .casestudy-benefits-section {
    padding: 60px 0;
  }

  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .benefit-item {
    padding: 24px 16px;
  }

  .benefit-icon {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }

  .casestudy-testimonial-section {
    padding: 60px 0;
  }

  .testimonial-text {
    font-size: 18px;
  }

  .testimonial-quote-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .testimonial-author {
    flex-direction: column;
    text-align: center;
  }

  .author-info {
    text-align: center;
  }

  .casestudy-client-description {
    padding: 24px;
  }
}

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

  .testimonial-text {
    font-size: 16px;
  }
}

/* =====================================================
   Partners Page
   ===================================================== */

/* Partners Hero */
.partners-hero-wow {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.partners-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.partners-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.partners-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #6366f1;
  margin-bottom: 24px;
}

.partners-hero-badge .badge-dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.partners-hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  margin: 0 0 24px;
}

.partners-hero-title .title-gradient {
  display: block;
  background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.partners-hero-desc {
  font-size: 20px;
  line-height: 1.7;
  color: #64748b;
  margin: 0 0 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.partners-hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.hero-stat {
  text-align: center;
}

.hero-stat-num {
  display: block;
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.hero-stat-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

/* Dark mode - Partners Hero */
[data-theme="dark"] .partners-hero-wow {
  background-color: #050816;
}

[data-theme="dark"] .partners-hero-badge {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

[data-theme="dark"] .partners-hero-title {
  color: #ffffff;
}

[data-theme="dark"] .partners-hero-desc {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .hero-stat-label {
  color: rgba(255, 255, 255, 0.6);
}

/* Partners Hero Responsive */
@media (max-width: 768px) {
  .partners-hero-wow {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .partners-hero-title {
    font-size: 36px;
  }

  .partners-hero-desc {
    font-size: 17px;
  }

  .partners-hero-stats {
    gap: 30px;
  }

  .hero-stat-num {
    font-size: 28px;
  }
}

.partners-section {
  padding: 60px 0 100px;
}

.partners-category {
  margin-bottom: 60px;
}

.partners-category:last-child {
  margin-bottom: 0;
}

.partners-category-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.partners-category-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}

.partners-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(99,102,241,.1));
  border-radius: 12px;
  color: var(--accent);
  font-size: 20px;
}

.partners-category-desc {
  font-size: 15px;
  color: rgba(255,255,255,.6);
  margin: 0;
  max-width: 600px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.partner-card {
  display: flex;
  flex-direction: column;
  padding: 24px !important;
  transition: all 0.3s ease;
  text-align: center;
}

.partner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}

.partner-logo {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  overflow: hidden;
}

.partner-logo img {
  max-width: 80%;
  max-height: 70px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: all 0.3s ease;
}

.partner-card:hover .partner-logo img {
  opacity: 1;
  filter: none;
}

.partner-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,.25);
  font-size: 32px;
}

.partner-info {
  flex: 1;
}

.partner-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}

.partner-desc {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.partner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(99,102,241,.1);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.partner-link:hover {
  background: rgba(99,102,241,.2);
  color: #fff;
}

.partner-link i {
  font-size: 11px;
}

/* Partners Responsive */
@media (max-width: 1200px) {
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .partners-category-title {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .partners-section {
    padding: 40px 0 60px;
  }

  .partners-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .partners-category-header {
    margin-bottom: 24px;
  }

  .partners-category-title {
    font-size: 20px;
    gap: 12px;
  }

  .partners-category-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .partner-card {
    padding: 20px !important;
  }

  .partner-logo {
    height: 80px;
  }
}

/* Partners Light Mode */
[data-theme="light"] .partners-section {
  background: #f8fafc;
}

[data-theme="light"] .partners-category-header {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .partners-category-title {
  color: #1e293b;
}

[data-theme="light"] .partners-category-icon {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(99,102,241,.08));
}

[data-theme="light"] .partners-category-desc {
  color: #64748b;
}

[data-theme="light"] .partner-card {
  background: #fff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .partner-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}

[data-theme="light"] .partner-logo {
  background: #f8fafc;
}

[data-theme="light"] .partner-logo img {
  filter: none;
  opacity: 1;
}

[data-theme="light"] .partner-logo-placeholder {
  background: #f1f5f9;
  color: #94a3b8;
}

[data-theme="light"] .partner-name {
  color: #1e293b;
}

[data-theme="light"] .partner-desc {
  color: #64748b;
}

[data-theme="light"] .partner-link {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .partner-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Contact Page */
.contact-section {
  padding: 60px 0 100px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}

.contact-info-col h2 {
  font-size: 32px;
  margin: 0 0 16px;
}

.contact-intro {
  font-size: 16px;
  color: rgba(255,255,255,.6);
  margin: 0 0 40px;
  line-height: 1.7;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.contact-method-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  text-decoration: none;
  transition: all .3s ease;
}

a.contact-method-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  transform: translateX(8px);
}

.contact-method-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.contact-method-icon-green {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.contact-method-icon-orange {
  background: linear-gradient(135deg, var(--accent2), #fb923c);
}

.contact-method-info {
  flex: 1;
}

.contact-method-info h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  color: rgba(255,255,255,.5);
}

.contact-method-info p {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.contact-method-hint {
  font-size: 12px;
  color: rgba(255,255,255,.4);
}

.contact-method-arrow {
  color: rgba(255,255,255,.3);
  font-size: 14px;
  transition: all .3s ease;
}

a.contact-method-card:hover .contact-method-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

.contact-social p {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  margin: 0 0 12px;
}

.contact-social-links {
  display: flex;
  gap: 10px;
}

/* Contact Form */
.contact-form-box {
  padding: 40px !important;
}

.contact-form-box h3 {
  font-size: 24px;
  margin: 0 0 8px;
}

.contact-form-box > p {
  color: rgba(255,255,255,.6);
  margin: 0 0 30px;
}

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

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 14px 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  transition: all .2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255,255,255,.35);
}

.form-group select {
  cursor: pointer;
}

.form-group select option {
  background: #0b1020;
  color: #fff;
}

.form-privacy {
  flex-direction: row;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: rgba(255,255,255,.6);
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.checkbox-label a {
  color: var(--accent);
}

.btn-block {
  width: 100%;
}

.form-notice {
  padding: 20px;
  background: rgba(249,115,22,.1);
  border: 1px solid rgba(249,115,22,.3);
  border-radius: 12px;
  color: var(--accent2);
  text-align: center;
}

/* Services Page */
.services-overview-section {
  padding: 60px 0 80px;
}

.services-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.service-overview-card {
  position: relative;
  padding: 40px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  transition: all .3s ease;
}

.service-overview-card:hover {
  background: rgba(255,255,255,.05);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}

.service-card-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.service-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin-bottom: 24px;
}

.service-card-violet .service-card-icon {
  background: linear-gradient(135deg, var(--accent), #818cf8);
}

.service-card-cyan .service-card-icon {
  background: linear-gradient(135deg, var(--accent3), #67e8f9);
}

.service-card-orange .service-card-icon {
  background: linear-gradient(135deg, var(--accent2), #fb923c);
}

.service-card-green .service-card-icon {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.service-overview-card h3 {
  font-size: 24px;
  margin: 0 0 12px;
}

.service-overview-card > p {
  font-size: 15px;
  color: rgba(255,255,255,.6);
  margin: 0 0 24px;
  line-height: 1.6;
}

.service-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.service-card-features li {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-card-features li i {
  color: var(--accent);
  font-size: 12px;
}

.service-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .3s ease;
}

.service-card-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.service-card-btn i {
  font-size: 12px;
  transition: transform .3s ease;
}

.service-card-btn:hover i {
  transform: translateX(4px);
}

/* Process Timeline */
.services-process-section {
  padding: 80px 0;
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
}

.process-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}

.process-timeline::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent3), var(--accent2));
  opacity: .3;
}

.process-step {
  text-align: center;
  position: relative;
}

.process-step-num {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 2px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  position: relative;
  z-index: 1;
}

.process-step-content h3 {
  font-size: 18px;
  margin: 0 0 10px;
}

.process-step-content p {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin: 0;
  line-height: 1.6;
}

/* Tech Section */
.services-tech-section {
  padding: 80px 0;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px !important;
  text-align: center;
}

.tech-item i {
  font-size: 36px;
  color: var(--accent);
}

.tech-item span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
}

/* Responsive - Page Templates */
@media (max-width: 1024px) {
  .values-grid,
  .stats-grid,
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .process-timeline::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 120px 0 60px;
  }

  .page-hero-title {
    font-size: 32px;
  }

  .page-hero-desc {
    font-size: 16px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .services-overview-grid {
    grid-template-columns: 1fr;
  }

  .service-overview-card {
    padding: 30px;
  }

  .service-card-features {
    grid-template-columns: 1fr;
  }

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

  .values-grid,
  .stats-grid,
  .process-timeline,
  .tech-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-cta-box {
    padding: 40px 24px !important;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .cta-buttons .btn {
    width: 100%;
  }
}

/* =================================================================
   CONTACT PAGE WOW STYLES - LIGHT THEME
   ================================================================= */

/* Light theme wrapper for contact page */
.contact-hero-wow,
.contact-methods-wow,
.contact-main-wow,
.contact-faq-wow,
.contact-cta-wow {
  background: #fff;
}

/* Contact Hero WOW */
.contact-hero-wow {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  animation: orbPulse 8s ease-in-out infinite;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,.3), transparent 70%);
  top: -200px;
  left: -100px;
  animation-delay: 0s;
}

.hero-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(249,115,22,.2), transparent 70%);
  bottom: -100px;
  right: -150px;
  animation-delay: -3s;
}

.hero-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34,211,238,.2), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -5s;
  opacity: 0.2;
}

@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 0.2; }
}

.hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

.contact-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.contact-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 32px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: badgePulse 2s ease-in-out infinite;
}

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

.contact-hero-title {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 28px;
  letter-spacing: -0.02em;
  color: #1e293b;
}

.title-gradient {
  display: block;
  background: linear-gradient(135deg, var(--accent), var(--accent3), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientFlow 5s ease infinite;
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.contact-hero-desc {
  font-size: 20px;
  line-height: 1.7;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto 48px;
}

.contact-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 42px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: 14px;
  color: #64748b;
  margin-top: 8px;
}

.hero-stat-divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, #e2e8f0, transparent);
}

/* Hero Background Image Support */
.contact-hero-wow,
.careers-hero-wow,
.about-hero-wow,
.partners-hero-wow,
.services-hero-wow,
.casestudies-hero-wow,
.casestudy-single-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile: show top of image for better visibility */
@media (max-width: 768px) {
  .contact-hero-wow,
  .careers-hero-wow,
  .about-hero-wow,
  .partners-hero-wow,
  .services-hero-wow,
  .casestudies-hero-wow,
  .casestudy-single-hero {
    background-position: center top;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Light mode overlay - light with gradient */
[data-theme="light"] .hero-overlay,
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.92) 0%,
    rgba(241, 245, 249, 0.88) 50%,
    rgba(248, 250, 252, 0.95) 100%
  );
}

/* Dark mode overlay - dark with gradient */
[data-theme="dark"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(5, 8, 22, 0.88) 0%,
    rgba(10, 15, 26, 0.85) 50%,
    rgba(5, 8, 22, 0.92) 100%
  );
}

/* Services Hero Styles */
.services-hero-wow {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
}

.services-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.services-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.services-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #6366f1;
  margin-bottom: 24px;
}

.services-hero-badge .badge-dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.services-hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  margin: 0 0 24px;
}

.services-hero-title .title-gradient {
  display: block;
  background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-hero-desc {
  font-size: 20px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Dark mode - Services Hero */
[data-theme="dark"] .services-hero-wow {
  background-color: #050816;
}

[data-theme="dark"] .services-hero-badge {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

[data-theme="dark"] .services-hero-title {
  color: #ffffff;
}

[data-theme="dark"] .services-hero-desc {
  color: rgba(255, 255, 255, 0.7);
}

/* Services Hero Responsive */
@media (max-width: 768px) {
  .services-hero-wow {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .services-hero-title {
    font-size: 36px;
  }

  .services-hero-desc {
    font-size: 17px;
  }
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 5;
}

[data-theme="dark"] .hero-scroll-indicator {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .scroll-line {
  background: linear-gradient(to bottom, rgba(99, 102, 241, 0.8), transparent);
}

.scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.5); opacity: 0.5; }
}

/* Contact Methods WOW */
.contact-methods-wow {
  padding: 30px 0;
  position: relative;
  background: #fff;
}

.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.contact-method-wow-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 32px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: block;
}

.contact-method-wow-card:hover {
  transform: translateY(-8px);
  border-color: #cbd5e1;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.15);
}

.method-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.contact-method-wow-card:hover .method-card-glow {
  opacity: 0.15;
}

.method-glow-violet { background: var(--accent); }
.method-glow-green { background: #22c55e; }
.method-glow-emerald { background: #10b981; }
.method-glow-orange { background: var(--accent2); }

.method-card-inner {
  position: relative;
  z-index: 1;
}

.method-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.method-icon-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(99,102,241,.05));
  border-radius: 16px;
  transition: all 0.3s ease;
}

.contact-method-wow-card:hover .method-icon-bg {
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(99,102,241,.1));
  transform: scale(1.1);
}

.method-icon-wrap i {
  font-size: 28px;
  color: var(--accent);
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.contact-method-wow-card:hover .method-icon-wrap i {
  transform: scale(1.1);
}

.method-icon-green .method-icon-bg { background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(34,197,94,.05)); }
.method-icon-green i { color: #22c55e; }

.method-icon-emerald .method-icon-bg { background: linear-gradient(135deg, rgba(16,185,129,.15), rgba(16,185,129,.05)); }
.method-icon-emerald i { color: #10b981; }

.method-icon-orange .method-icon-bg { background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(249,115,22,.05)); }
.method-icon-orange i { color: var(--accent2); }

.method-content {}

.method-label {
  display: block;
  font-size: 13px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.method-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

.method-content p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.method-arrow {
  position: absolute;
  bottom: -20px;
  right: -3px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.method-arrow i {
  color: #94a3b8;
  transition: all 0.3s ease;
}

.contact-method-wow-card:hover .method-arrow {
  background: var(--accent);
  transform: translateX(5px);
}

.contact-method-wow-card:hover .method-arrow i {
  color: #fff;
}

.method-card-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.05), transparent);
  transition: left 0.6s ease;
}

.contact-method-wow-card:hover .method-card-shine {
  left: 100%;
}

/* Main Contact Section WOW */
.contact-main-wow {
  padding: 80px 0 50px;
  background: #f8fafc;
}

.contact-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: start;
}

/* Clean Form Card - Professional Style */
.contact-form-card-clean {
  background: #fff;
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
}

.form-header-clean {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.form-header-clean h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
}

.form-header-clean p {
  font-size: 16px;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

/* Clean Form Styles */
.contact-form-clean {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row-clean {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

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

.form-field label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-field label .required {
  color: #ef4444;
  font-weight: 400;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 18px;
  background: #f5f5f5;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  color: #1e293b;
  font-family: inherit;
  transition: all 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9ca3af;
}

.form-field input:hover,
.form-field textarea:hover,
.form-field select:hover {
  background: #efefef;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}

/* Select Wrapper */
.select-wrapper {
  position: relative;
}

.select-wrapper select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
}

.select-wrapper .select-arrow {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 12px;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.select-wrapper select:focus + .select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--accent);
}

/* Checkbox Clean */
.form-checkbox {
  margin-top: 8px;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.checkbox-container input {
  display: none;
}

.checkbox-container .checkmark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: #f5f5f5;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-top: 2px;
}

.checkbox-container .checkmark::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  color: #fff;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

.checkbox-container input:checked + .checkmark {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox-container input:checked + .checkmark::after {
  opacity: 1;
  transform: scale(1);
}

.checkbox-container:hover .checkmark {
  border-color: var(--accent);
}

.checkbox-label {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

.checkbox-label a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.checkbox-label a:hover {
  text-decoration: underline;
}

/* Submit Button Clean */
.btn-submit-clean {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 32px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.btn-submit-clean:hover {
  background: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(99,102,241,.3);
}

.btn-submit-clean:active {
  transform: translateY(0);
}

.btn-submit-clean i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.btn-submit-clean:hover i {
  transform: translateX(4px);
}

/* Responsive Clean Form */
@media (max-width: 640px) {
  .form-row-clean {
    grid-template-columns: 1fr;
  }

  .contact-form-card-clean {
    padding: 32px 24px;
  }
}

/* ==========================================================================
   Contact Form 7 - Compact Placeholder Style
   ========================================================================== */

.contact-form-card-clean .wpcf7 {
  width: 100%;
}

.contact-form-card-clean .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* CF7 Form Rows - Two columns */
.contact-form-card-clean .wpcf7-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .contact-form-card-clean .wpcf7-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* CF7 Labels - Hide them, use placeholders instead */
.contact-form-card-clean .wpcf7-form label {
  display: block;
  font-size: 0;
  line-height: 0;
  margin: 0;
}

/* CF7 Input Fields - Compact */
.contact-form-card-clean .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  width: 100%;
  padding: 12px 16px;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 14px;
  color: #1e293b;
  font-family: inherit;
  transition: all 0.2s ease;
  margin: 5px 0 5px;
}

.contact-form-card-clean .wpcf7-text,
.contact-form-card-clean .wpcf7-email,
.contact-form-card-clean .wpcf7-tel,
.contact-form-card-clean .wpcf7-number,
.contact-form-card-clean .wpcf7-url,
.contact-form-card-clean .wpcf7-date {
  height: auto;
}

.contact-form-card-clean .wpcf7-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.contact-form-card-clean .wpcf7-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* CF7 Placeholder Styles - These act as labels */
.contact-form-card-clean .wpcf7-form-control::placeholder {
  color: #6b7280;
  font-weight: 400;
}

/* CF7 Hover State */
.contact-form-card-clean .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):hover {
  border-color: #d1d5db;
  background: #fafafa;
}

/* CF7 Focus State */
.contact-form-card-clean .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):focus {
  outline: none;
  background: #fff;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

/* CF7 Acceptance / Checkbox */
.contact-form-card-clean .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-form-card-clean .wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0 0;
  accent-color: var(--accent, #6366f1);
  cursor: pointer;
  flex-shrink: 0;
}

.contact-form-card-clean .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.contact-form-card-clean .wpcf7-acceptance .wpcf7-list-item-label a {
  color: var(--accent, #6366f1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form-card-clean .wpcf7-acceptance .wpcf7-list-item-label a:hover {
  color: var(--accent2, #8b5cf6);
}

/* CF7 Submit Button */
.contact-form-card-clean .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: var(--accent, #6366f1);
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.contact-form-card-clean .wpcf7-submit:hover {
  background: var(--accent2, #8b5cf6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.contact-form-card-clean .wpcf7-submit:active {
  transform: translateY(0);
}

/* CF7 Validation Error */
.contact-form-card-clean .wpcf7-not-valid {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

.contact-form-card-clean .wpcf7-not-valid-tip {
  display: block;
  color: #ef4444;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 500;
}

/* CF7 Response Messages */
.contact-form-card-clean .wpcf7-response-output {
  margin: 16px 0 0 0;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.contact-form-card-clean .wpcf7-form.invalid .wpcf7-response-output,
.contact-form-card-clean .wpcf7-form.unaccepted .wpcf7-response-output {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.contact-form-card-clean .wpcf7-form.sent .wpcf7-response-output {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}

.contact-form-card-clean .wpcf7-form.failed .wpcf7-response-output,
.contact-form-card-clean .wpcf7-form.aborted .wpcf7-response-output {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

/* CF7 Spinner */
.contact-form-card-clean .wpcf7-spinner {
  margin: 0 12px;
}

/* CF7 List Items (for radio/checkbox groups) */
.contact-form-card-clean .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0 16px 8px 0;
}

.contact-form-card-clean .wpcf7-list-item input[type="radio"],
.contact-form-card-clean .wpcf7-list-item input[type="checkbox"] {
  margin-right: 8px;
  accent-color: var(--accent, #6366f1);
}

/* Legacy Form Card (kept for CF7/WPForms compatibility) */
.contact-form-wow-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 32px;
  padding: 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}

.contact-form-wow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent3), var(--accent2));
}

.form-card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
}

.form-header-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  border-radius: 16px;
  flex-shrink: 0;
}

.form-header-icon i {
  font-size: 24px;
  color: #fff;
}

.form-header-text h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1e293b;
}

.form-header-text p {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

/* Form WOW Styles */
.contact-form-wow {}

.form-row-wow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group-wow {
  margin-bottom: 20px;
}

.form-row-wow .form-group-wow {
  margin-bottom: 0;
}

.input-wrap-wow,
.textarea-wrap-wow,
.select-wrap-wow {
  position: relative;
}

.input-wrap-wow input,
.textarea-wrap-wow textarea,
.select-wrap-wow select {
  width: 100%;
  padding: 20px 20px 20px 48px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  font-size: 16px;
  color: #1e293b;
  transition: all 0.3s ease;
  font-family: inherit;
}

.input-wrap-wow input:focus,
.textarea-wrap-wow textarea:focus,
.select-wrap-wow select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(99,102,241,.1);
}

.input-wrap-wow label,
.textarea-wrap-wow label {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #94a3b8;
  pointer-events: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.textarea-wrap-wow label {
  top: 20px;
  transform: none;
}

.input-wrap-wow label i,
.textarea-wrap-wow label i {
  position: absolute;
  left: -32px;
  font-size: 14px;
  color: #94a3b8;
  transition: color 0.3s ease;
}

.input-wrap-wow input:focus + label,
.input-wrap-wow input:not(:placeholder-shown) + label,
.textarea-wrap-wow textarea:focus + label,
.textarea-wrap-wow textarea:not(:placeholder-shown) + label {
  top: -12px;
  left: 16px;
  font-size: 12px;
  background: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  color: var(--accent);
}

.input-wrap-wow input:focus + label i,
.input-wrap-wow input:not(:placeholder-shown) + label i,
.textarea-wrap-wow textarea:focus + label i,
.textarea-wrap-wow textarea:not(:placeholder-shown) + label i {
  color: var(--accent);
  position: relative;
  left: 0;
}

.input-border-wow {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  border-radius: 2px;
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.input-wrap-wow input:focus ~ .input-border-wow,
.textarea-wrap-wow textarea:focus ~ .input-border-wow,
.select-wrap-wow select:focus ~ .input-border-wow {
  width: calc(100% - 32px);
}

.select-wrap-wow select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 50px;
}

.select-wrap-wow select option {
  background: #fff;
  color: #1e293b;
  padding: 12px;
}

.select-icon-wow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #94a3b8;
  transition: transform 0.3s ease;
}

.select-wrap-wow select:focus + .select-icon-wow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--accent);
}

.textarea-wrap-wow textarea {
  min-height: 140px;
  resize: vertical;
  padding-top: 48px;
}

/* Checkbox WOW */
.form-privacy-wow {
  margin-bottom: 32px;
}

.checkbox-wow {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
}

.checkbox-wow input {
  display: none;
}

.checkmark-wow {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  background: #fff;
}

.checkmark-wow::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.checkbox-wow input:checked + .checkmark-wow {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox-wow input:checked + .checkmark-wow::after {
  opacity: 1;
  transform: scale(1);
}

.checkbox-text-wow {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

.checkbox-text-wow a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkbox-text-wow a:hover {
  color: var(--accent3);
}

/* Submit Button WOW */
.btn-submit-wow {
  position: relative;
  width: 100%;
  padding: 20px 32px;
  background: transparent;
  border: none;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn-submit-wow .btn-text,
.btn-submit-wow .btn-icon {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.btn-submit-wow:hover .btn-text {
  transform: translateX(-5px);
}

.btn-submit-wow:hover .btn-icon {
  transform: translateX(5px);
}

.btn-bg-wow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  z-index: 1;
  transition: opacity 0.3s ease;
}

.btn-submit-wow:hover .btn-bg-wow {
  opacity: 0.9;
}

.btn-glow-wow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--accent), var(--accent3), var(--accent2));
  border-radius: 18px;
  z-index: 0;
  opacity: 0;
  filter: blur(15px);
  transition: opacity 0.3s ease;
}

.btn-submit-wow:hover .btn-glow-wow {
  opacity: 0.6;
}

/* Right Column Cards */
.contact-info-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 120px;
}

.contact-promise-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(99,102,241,.02));
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 20px;
}

.promise-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  border-radius: 14px;
  flex-shrink: 0;
}

.promise-icon i {
  font-size: 22px;
  color: #fff;
}

.promise-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1e293b;
}

.promise-content p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

.contact-social-card {
  padding: 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
}

.contact-social-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1e293b;
}

.contact-social-card > p {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 20px;
}

.social-links-wow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.social-link-wow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  transition: all 0.3s ease;
}

.social-link-wow i {
  font-size: 18px;
}

.social-link-wow:hover {
  transform: translateY(-2px);
}

.social-linkedin:hover {
  background: rgba(10,102,194,.1);
  border-color: rgba(10,102,194,.3);
  color: #0a66c2;
}

.social-facebook:hover {
  background: rgba(24,119,242,.1);
  border-color: rgba(24,119,242,.3);
  color: #1877f2;
}

.social-instagram:hover {
  background: rgba(225,48,108,.1);
  border-color: rgba(225,48,108,.3);
  color: #e1306c;
}

.social-github:hover {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}

.contact-hours-card {
  padding: 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
}

.contact-hours-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-hours-card h3 i {
  color: var(--accent);
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 10px;
}

.hours-row .day {
  font-size: 14px;
  color: #475569;
}

.hours-row .time {
  font-size: 14px;
  font-weight: 600;
  color: #22c55e;
}

.hours-row.hours-closed .time {
  color: #94a3b8;
}

.hours-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
  padding: 12px;
  background: rgba(99,102,241,.08);
  border-radius: 10px;
}

.hours-note i {
  color: var(--accent);
}

/* FAQ WOW */
.contact-faq-wow {
  padding: 100px 0;
  background: #fff;
}

.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-header h2 {
  font-size: 40px;
  font-weight: 800;
  margin: 16px 0;
  color: #1e293b;
}

.faq-header p {
  font-size: 18px;
  color: #64748b;
  margin: 0;
}

.faq-grid {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item-wow {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item-wow:hover {
  border-color: #cbd5e1;
}

.faq-item-wow.active {
  border-color: var(--accent);
  background: rgba(99,102,241,.03);
}

.faq-question-wow {
  width: 100%;
  padding: 24px 28px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  text-align: left;
}

.faq-q-text {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
}

.faq-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 10px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.faq-icon i {
  font-size: 14px;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.faq-item-wow.active .faq-icon {
  background: var(--accent);
}

.faq-item-wow.active .faq-icon i {
  color: #fff;
  transform: rotate(45deg);
}

.faq-answer-wow {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.faq-answer-inner {
  padding: 0 28px 24px;
}

.faq-answer-inner p {
  font-size: 15px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
}

.faq-more {
  text-align: center;
  margin-top: 48px;
}

.faq-more p {
  font-size: 16px;
  color: #64748b;
  margin: 0 0 16px;
}

.btn-faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  transition: all 0.3s ease;
}

.btn-faq-contact:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* CTA WOW */
.contact-cta-wow {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.cta-bg-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.cta-orb-1 {
  width: 500px;
  height: 500px;
  background: var(--accent);
  opacity: 0.08;
  top: -200px;
  left: -100px;
}

.cta-orb-2 {
  width: 400px;
  height: 400px;
  background: var(--accent2);
  opacity: 0.05;
  bottom: -150px;
  right: -100px;
}

.cta-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

.cta-wow-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 60px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 24px;
}

.cta-wow-content h2 {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 16px;
  color: #1e293b;
}

.cta-wow-content > p {
  font-size: 18px;
  color: #64748b;
  margin: 0 0 36px;
  line-height: 1.7;
}

.cta-buttons-wow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.btn-cta-primary-wow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  transition: all 0.3s ease;
}

.btn-cta-primary-wow:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(99,102,241,.3);
}

.btn-cta-secondary-wow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #475569;
  transition: all 0.3s ease;
}

.btn-cta-secondary-wow:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-3px);
}

.cta-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.trust-item i {
  color: #22c55e;
}

/* Responsive Contact WOW */
@media (max-width: 1200px) {
  .contact-methods-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-info-column {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact-info-column > * {
    flex: 1;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .contact-hero-wow {
    min-height: auto;
    padding: 140px 0 80px;
  }

  .contact-hero-title {
    font-size: 36px;
  }

  .contact-hero-desc {
    font-size: 17px;
  }

  .contact-hero-stats {
    gap: 24px;
  }

  .stat-number {
    font-size: 32px;
  }

  .hero-stat-divider {
    display: none;
  }

  .hero-scroll-indicator {
    display: none;
  }

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

  .contact-method-wow-card {
    padding: 24px;
  }

  .method-arrow {
    bottom: 24px;
    right: 24px;
  }

  .contact-form-wow-card {
    padding: 28px;
  }

  .form-card-header {
    flex-direction: column;
    gap: 16px;
  }

  .form-row-wow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-info-column {
    flex-direction: column;
  }

  .contact-info-column > * {
    min-width: 100%;
  }

  .social-links-wow {
    grid-template-columns: 1fr;
  }

  .faq-header h2 {
    font-size: 28px;
  }

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

  .faq-q-text {
    font-size: 15px;
  }

  .faq-answer-inner {
    padding: 0 20px 20px;
  }

  .cta-wow-content {
    padding: 40px 24px;
  }

  .cta-wow-content h2 {
    font-size: 28px;
  }

  .cta-buttons-wow {
    flex-direction: column;
  }

  .btn-cta-primary-wow,
  .btn-cta-secondary-wow {
    width: 100%;
    justify-content: center;
  }

  .cta-trust-badges {
    flex-direction: column;
    gap: 16px;
  }
}

/* ==========================================================================
   ABOUT PAGE - Professional WOW Design
   ========================================================================== */

/* About Hero Section */
.about-hero-wow {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.about-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.about-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 24px;
}

.about-hero-title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  color: #1e293b;
  margin: 0 0 24px;
}

.about-hero-desc {
  font-size: 18px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
  max-width: 640px;
  margin: 0 auto;
}

/* Mission & Vision Section */
.about-mission-section {
  padding: 100px 0;
  background: #fff;
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.mission-card,
.vision-card {
  background: #f8fafc;
  border-radius: 24px;
  padding: 48px;
  position: relative;
  border: 1px solid #e2e8f0;
}

.mission-card::before,
.vision-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 24px 24px 0 0;
}

.mission-card::before {
  background: linear-gradient(90deg, var(--accent, #6366f1), var(--accent2, #8b5cf6));
}

.vision-card::before {
  background: linear-gradient(90deg, #06b6d4, #0ea5e9);
}

.mission-card-icon,
.vision-card-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 24px;
}

.mission-card-icon {
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent2, #8b5cf6));
}

.vision-card-icon {
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
}

.mission-card-icon i,
.vision-card-icon i {
  font-size: 28px;
  color: #fff;
}

.mission-label,
.vision-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.mission-label {
  color: var(--accent, #6366f1);
}

.vision-label {
  color: #06b6d4;
}

.mission-card-content h2,
.vision-card-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px;
  line-height: 1.3;
}

.mission-card-content p,
.vision-card-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #64748b;
  margin: 0 0 24px;
}

.mission-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mission-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #475569;
  padding: 10px 0;
  border-top: 1px solid #e2e8f0;
}

.mission-points li:first-child {
  border-top: none;
}

.mission-points li i {
  color: var(--accent, #6366f1);
  font-size: 16px;
}

.vision-quote {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(14, 165, 233, 0.08));
  border-left: 4px solid #06b6d4;
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
}

.vision-quote blockquote {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  color: #475569;
  line-height: 1.6;
}

/* Stats Section WOW */
.about-stats-wow {
  padding: 80px 0;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.stats-wow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.stat-wow-item {
  text-align: center;
  padding: 32px 24px;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}

.stat-wow-item:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
}

.stat-wow-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent2, #8b5cf6));
  border-radius: 14px;
  margin: 0 auto 20px;
}

.stat-wow-icon i {
  font-size: 24px;
  color: #fff;
}

.stat-wow-number {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-wow-label {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

/* Values Section WOW */
.about-values-wow {
  padding: 100px 0;
  background: #fff;
}

.section-header-wow {
  max-width: 600px;
  margin: 0 auto 60px;
}

.section-header-wow.text-center {
  text-align: center;
}

.section-badge {
  display: inline-block;
  padding: 6px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #6366f1);
  margin-bottom: 16px;
}

.section-header-wow h2 {
  font-size: 36px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px;
  line-height: 1.2;
}

.section-header-wow p {
  font-size: 16px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
}

.values-wow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.value-wow-card {
  background: #f8fafc;
  border-radius: 20px;
  padding: 36px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.value-wow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transition: all 0.3s ease;
}

.value-wow-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  background: #fff;
}

.value-violet::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.value-blue::before { background: linear-gradient(90deg, #3b82f6, #6366f1); }
.value-cyan::before { background: linear-gradient(90deg, #06b6d4, #0ea5e9); }
.value-green::before { background: linear-gradient(90deg, #10b981, #34d399); }
.value-orange::before { background: linear-gradient(90deg, #f59e0b, #f97316); }
.value-pink::before { background: linear-gradient(90deg, #ec4899, #f43f5e); }

.value-wow-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 24px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.value-violet .value-wow-icon i { color: #6366f1; }
.value-blue .value-wow-icon i { color: #3b82f6; }
.value-cyan .value-wow-icon i { color: #06b6d4; }
.value-green .value-wow-icon i { color: #10b981; }
.value-orange .value-wow-icon i { color: #f59e0b; }
.value-pink .value-wow-icon i { color: #ec4899; }

.value-wow-icon i {
  font-size: 24px;
}

.value-wow-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 12px;
}

.value-wow-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
}

/* Why Choose Us Section */
.about-why-section {
  padding: 100px 0;
  background: #f8fafc;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.why-content .section-badge {
  margin-bottom: 16px;
}

.why-content h2 {
  font-size: 36px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 20px;
  line-height: 1.2;
}

.why-intro {
  font-size: 16px;
  line-height: 1.7;
  color: #64748b;
  margin: 0 0 40px;
}

.why-features {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.why-feature-item {
  display: flex;
  gap: 20px;
}

.why-feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent2, #8b5cf6));
  border-radius: 12px;
  flex-shrink: 0;
}

.why-feature-icon i {
  font-size: 20px;
  color: #fff;
}

.why-feature-content h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}

.why-feature-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

.why-image-wrapper {
  position: relative;
  aspect-ratio: 1;
  max-width: 480px;
  margin: 0 auto;
}

.why-image-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 24px;
}

.why-image-content {
  position: absolute;
  inset: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  z-index: 2;
}

.floating-badge i {
  color: var(--accent, #6366f1);
  font-size: 18px;
}

.badge-top {
  top: 20px;
  left: -20px;
  animation: floatBadge 4s ease-in-out infinite;
}

.badge-bottom {
  bottom: 40px;
  right: -20px;
  animation: floatBadge 4s ease-in-out infinite 1s;
}

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

.tech-stack-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tech-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.tech-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.tech-icon i {
  font-size: 28px;
  color: #64748b;
}

/* Process Section */
.about-process-section {
  padding: 100px 0;
  background: #fff;
}

.process-timeline-wow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.process-step-wow {
  position: relative;
  background: #f8fafc;
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.process-step-wow:hover {
  background: #fff;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

.process-step-number {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent2, #8b5cf6));
  padding: 6px 14px;
  border-radius: 50px;
}

.process-step-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  margin: 16px auto 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.process-step-icon i {
  font-size: 26px;
  color: var(--accent, #6366f1);
}

.process-step-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 10px;
}

.process-step-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

.process-step-connector {
  display: none;
}

/* About CTA Section */
.about-cta-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.about-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 24px;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

.about-cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
  flex: 1;
}

.cta-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.2;
}

.cta-content p {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.btn-cta-primary,
.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-cta-primary {
  background: #fff;
  color: #1e293b;
}

.btn-cta-primary:hover {
  background: var(--accent, #6366f1);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.btn-cta-secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-cta-secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
}

/* About Page Responsive */
@media (max-width: 1024px) {
  .mission-vision-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

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

  .why-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .why-image {
    order: -1;
  }

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

  .about-cta-box {
    flex-direction: column;
    text-align: center;
    padding: 48px 40px;
  }

  .cta-buttons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .about-hero-wow {
    min-height: auto;
    padding: 100px 0 80px;
  }

  .about-hero-title {
    font-size: 32px;
  }

  .about-hero-desc {
    font-size: 16px;
  }

  .mission-card,
  .vision-card {
    padding: 32px 24px;
  }

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

  .stat-wow-item {
    padding: 24px 16px;
  }

  .stat-wow-number {
    font-size: 32px;
  }

  .values-wow-grid {
    grid-template-columns: 1fr;
  }

  .value-wow-card {
    padding: 28px 24px;
  }

  .section-header-wow h2 {
    font-size: 28px;
  }

  .why-content h2 {
    font-size: 28px;
  }

  .process-timeline-wow {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-cta-box {
    padding: 36px 24px;
  }

  .cta-content h2 {
    font-size: 24px;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-cta-primary,
  .btn-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   CAREERS PAGE - Professional Design
   ========================================================================== */

/* Careers Hero */
.careers-hero-wow {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.careers-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.careers-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.careers-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 24px;
}

.careers-hero-title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  color: #1e293b;
  margin: 0 0 24px;
}

.careers-hero-desc {
  font-size: 18px;
  line-height: 1.7;
  color: #64748b;
  margin: 0 auto 40px;
  max-width: 600px;
}

.careers-hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-careers-primary,
.btn-careers-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-careers-primary {
  background: var(--accent, #6366f1);
  color: #fff;
}

.btn-careers-primary:hover {
  background: var(--accent2, #8b5cf6);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.btn-careers-secondary {
  background: #fff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}

.btn-careers-secondary:hover {
  border-color: var(--accent, #6366f1);
  color: var(--accent, #6366f1);
}

/* Why Join Us Section */
.careers-why-section {
  padding: 100px 0;
  background: #fff;
}

.careers-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.careers-why-content .section-badge {
  margin-bottom: 16px;
}

.careers-why-content h2 {
  font-size: 36px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 20px;
  line-height: 1.2;
}

.careers-why-intro {
  font-size: 16px;
  line-height: 1.7;
  color: #64748b;
  margin: 0 0 40px;
}

.careers-culture-points {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.culture-point-item {
  display: flex;
  gap: 20px;
}

.culture-point-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 14px;
  flex-shrink: 0;
}

.culture-point-icon i {
  font-size: 22px;
  color: var(--accent, #6366f1);
}

.culture-point-content h4 {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}

.culture-point-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* Visual Side */
.careers-visual-wrapper {
  position: relative;
  aspect-ratio: 1;
  max-width: 480px;
  margin: 0 auto;
}

.careers-visual-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-radius: 24px;
}

.careers-visual-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-photo-placeholder {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.team-photo-placeholder i {
  font-size: 48px;
  color: var(--accent, #6366f1);
}

.team-photo-placeholder span {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.floating-stat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 2;
}

.floating-stat .stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent, #6366f1);
  line-height: 1;
}

.floating-stat .stat-text {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.floating-stat.stat-1 {
  top: 40px;
  left: 20px;
  animation: floatBadge 4s ease-in-out infinite;
}

.floating-stat.stat-2 {
  bottom: 60px;
  right: 20px;
  animation: floatBadge 4s ease-in-out infinite 1s;
}

/* Benefits Section */
.careers-benefits-section {
  padding: 100px 0;
  background: #f8fafc;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.benefit-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  border-color: transparent;
}

.benefit-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 14px;
  margin: 0 auto 20px;
}

.benefit-icon i {
  font-size: 24px;
  color: var(--accent, #6366f1);
}

.benefit-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 10px;
}

.benefit-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* Positions Section */
.careers-positions-section {
  padding: 100px 0;
  background: #fff;
}

.positions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
}

.position-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 28px 32px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.position-card:hover {
  background: #fff;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1);
}

.position-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.position-department {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent, #6366f1);
  margin-bottom: 8px;
}

.position-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.position-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
}

.meta-item i {
  font-size: 12px;
  color: #94a3b8;
}

.position-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.position-tag {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
}

.position-footer {
  display: flex;
  justify-content: flex-end;
}

.btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent, #6366f1);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-apply:hover {
  background: var(--accent2, #8b5cf6);
  transform: translateX(4px);
}

.btn-apply i {
  transition: transform 0.3s ease;
}

.btn-apply:hover i {
  transform: translateX(4px);
}

.positions-cta {
  text-align: center;
  padding: 40px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px dashed #cbd5e1;
}

.positions-cta p {
  font-size: 16px;
  color: #64748b;
  margin: 0 0 20px;
}

.btn-spontaneous {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #fff;
  color: var(--accent, #6366f1);
  border: 2px solid var(--accent, #6366f1);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-spontaneous:hover {
  background: var(--accent, #6366f1);
  color: #fff;
}

/* Hiring Process Section */
.careers-process-section {
  padding: 100px 0;
  background: #f8fafc;
}

.hiring-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.hiring-step {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.hiring-step:hover {
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

.hiring-step-num {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent2, #8b5cf6));
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50%;
  margin: 0 auto 20px;
}

.hiring-step-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 10px;
}

.hiring-step-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 16px;
}

.hiring-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f1f5f9;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

.hiring-duration i {
  font-size: 11px;
}

.hiring-step-arrow {
  display: none;
}

/* Careers CTA */
.careers-cta-section {
  padding: 100px 0;
  background: #fff;
}

.careers-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 24px;
  padding: 60px;
  position: relative;
  overflow: hidden;
}

.careers-cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
  pointer-events: none;
}

.careers-cta-box .cta-content {
  flex: 1;
}

.careers-cta-box .cta-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.2;
}

.careers-cta-box .cta-content p {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* Careers Page Responsive */
@media (max-width: 1024px) {
  .careers-why-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .careers-why-visual {
    order: -1;
  }

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

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

  .careers-cta-box {
    flex-direction: column;
    text-align: center;
    padding: 48px 40px;
  }

  .careers-cta-box .cta-buttons {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .careers-hero-wow {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .careers-hero-title {
    font-size: 32px;
  }

  .careers-hero-desc {
    font-size: 16px;
  }

  .careers-hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .btn-careers-primary,
  .btn-careers-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .careers-why-content h2 {
    font-size: 28px;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

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

  .position-header {
    flex-direction: column;
  }

  .position-meta {
    flex-direction: column;
    gap: 8px;
  }

  .hiring-steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .careers-cta-box {
    padding: 36px 24px;
  }

  .careers-cta-box .cta-content h2 {
    font-size: 24px;
  }

  .careers-cta-box .cta-buttons {
    flex-direction: column;
    width: 100%;
  }
}

/* =====================================================
   Scroll to Top Button
   ===================================================== */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}

.scroll-to-top:active {
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .scroll-to-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

/* =====================================================
   Theme Toggle - Lightbulb
   ===================================================== */
.theme-toggle-container {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 70vh;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.theme-toggle-track {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  display: flex;
  justify-content: center;
}

.theme-toggle-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--border) 10%,
    var(--border) 90%,
    transparent 100%
  );
  border-radius: 2px;
}

.theme-toggle-btn {
  position: absolute;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.theme-toggle-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: scale(1.05);
}

.bulb-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bulb-icon {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  transition: all 0.4s ease;
}

.bulb-glass {
  transition: all 0.4s ease;
}

.bulb-rays {
  opacity: 0;
  transform-origin: center;
  transition: all 0.4s ease;
}

.bulb-glow {
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.4), transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Light mode - bulb ON */
.theme-toggle-container.theme-light .bulb-icon {
  color: #fbbf24;
}

.theme-toggle-container.theme-light .bulb-glass {
  fill: rgba(251, 191, 36, 0.2);
}

.theme-toggle-container.theme-light .bulb-rays {
  opacity: 1;
  animation: bulbRaysPulse 2s ease-in-out infinite;
}

.theme-toggle-container.theme-light .bulb-glow {
  opacity: 1;
}

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

/* Theme labels */
.theme-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.theme-label-dark {
  display: block;
}

.theme-label-light {
  display: none;
}

.theme-toggle-container.theme-light .theme-label-dark {
  display: none;
}

.theme-toggle-container.theme-light .theme-label-light {
  display: block;
}

.theme-toggle-btn:hover .theme-label {
  opacity: 1;
  transform: translateY(0);
}

/* Switching animation */
.theme-toggle-btn.switching {
  animation: switchPulse 0.5s ease;
}

@keyframes switchPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Hide on mobile */
@media (max-width: 1024px) {
  .theme-toggle-container {
    left: 12px;
    height: 50vh;
  }

  .theme-toggle-btn {
    padding: 10px;
  }

  .bulb-wrapper {
    width: 28px;
    height: 28px;
  }

  .bulb-icon {
    width: 20px;
    height: 20px;
  }

  .theme-label {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .theme-toggle-container {
    left: auto;
    right: 16px;
    top: auto;
    bottom: 80px;
    height: auto;
    transform: none;
  }

  .theme-toggle-track {
    display: none;
  }

  .theme-toggle-btn {
    position: relative;
    top: auto;
    padding: 12px;
    border-radius: 50%;
    box-shadow: var(--shadow);
  }
}

/* =====================================================
   Testimonials Carousel - Modern Design
   ===================================================== */
.testimonials-section {
  padding: 50px 0;
  overflow: hidden;
  position: relative;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
  pointer-events: none;
  display: none; /* Hidden by default on dark */
}

/* Show glow only on light mode */
[data-theme="light"] .testimonials-section::before {
  display: block;
}

.testimonials-carousel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px 0;
}

.testimonials-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-slide {
  flex: 0 0 50%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Modern Card Design */
.testimonial-card-modern {
  position: relative;
  padding: 3px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5), rgba(34, 211, 238, 0.3));
  transition: all 0.4s ease;
}

.testimonial-card-modern:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.7), rgba(168, 85, 247, 0.7), rgba(34, 211, 238, 0.5));
}

.testimonial-card-inner {
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
  border-radius: 22px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

/* Decorative Elements */
.testimonial-decor {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  pointer-events: none;
}

.decor-quote {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 120px;
  font-family: Georgia, serif;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  font-weight: 700;
}

.decor-gradient {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

/* Logo */
.testimonial-logo-wrap {
  margin-bottom: 25px;
  display: inline-flex;
}

.testimonial-logo-wrap img {
  max-width: 160px;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.testimonial-card-modern:hover .testimonial-logo-wrap img {
  transform: scale(1.02);
}

/* Quote */
.testimonial-quote {
  flex: 1;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}

.testimonial-quote p {
  margin: 0;
}

/* Author */
.testimonial-author-modern {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
}

.author-line {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  flex-shrink: 0;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-company {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.author-position {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* Navigation */
.testimonials-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.testimonial-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-nav-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #fff;
  transform: scale(1.1);
}

.testimonials-dots {
  display: flex;
  gap: 10px;
}

.testimonial-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.testimonial-dot:hover {
  background: rgba(255, 255, 255, 0.4);
}

.testimonial-dot.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  transform: scale(1.2);
}

/* Responsive */
@media (max-width: 992px) {
  .testimonials-section::before {
    width: 500px;
    height: 500px;
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: 70px 0;
  }

  .testimonial-slide {
    flex: 0 0 100%;
    padding: 0 15px;
  }

  .testimonial-card-inner {
    padding: 30px;
    min-height: auto;
  }

  .decor-quote {
    font-size: 80px;
    right: 15px;
    top: 5px;
  }

  .testimonial-quote {
    font-size: 16px;
  }

  .testimonial-logo-wrap img {
    max-width: 140px;
    max-height: 45px;
    padding: 10px 16px;
  }

  .author-company {
    font-size: 15px;
  }

  .author-position {
    font-size: 13px;
  }

  .testimonial-nav-btn {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  .testimonials-nav {
    gap: 15px;
    margin-top: 30px;
  }
}

@media (max-width: 480px) {
  .testimonials-section {
    padding: 50px 0;
  }

  .testimonial-slide {
    padding: 0 10px;
  }

  .testimonial-card-inner {
    padding: 25px 20px;
  }

  .decor-quote {
    font-size: 60px;
    right: 10px;
  }

  .testimonial-logo-wrap img {
    max-width: 120px;
    max-height: 40px;
    padding: 8px 14px;
  }

  .testimonial-quote {
    font-size: 15px;
    line-height: 1.7;
  }

  .author-line {
    width: 30px;
  }

  .author-company {
    font-size: 14px;
  }

  .author-position {
    font-size: 12px;
  }

  .testimonial-dot {
    width: 10px;
    height: 10px;
  }

  .testimonial-nav-btn {
    width: 38px;
    height: 38px;
  }
}

/* =====================================================
   Solutions Archive Page
   ===================================================== */
.solutions-archive-section {
  padding: 20px 0;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.solution-card-item {
  position: relative;
  border-radius: 24px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
}

.solution-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 20, 0.95) 0%,
    rgba(10, 10, 20, 0.8) 40%,
    rgba(10, 10, 20, 0.3) 70%,
    rgba(10, 10, 20, 0.1) 100%
  );
  transition: all 0.5s ease;
}

.solution-card-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(99, 102, 241, 0.2);
}

.solution-card-item:hover .solution-card-overlay {
  background: linear-gradient(
    to top,
    rgba(10, 10, 20, 0.98) 0%,
    rgba(10, 10, 20, 0.85) 50%,
    rgba(10, 10, 20, 0.4) 100%
  );
}

.solution-card-content {
  position: relative;
  z-index: 2;
  padding: 40px;
}

.solution-card-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.solution-card-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.solution-card-title a:hover {
  color: var(--accent);
}

.solution-card-desc {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.solution-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.solution-card-link:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.solution-card-link i {
  font-size: 13px;
  transition: transform 0.3s ease;
}

.solution-card-link:hover i {
  transform: translateX(5px);
}

/* Empty state */
.solutions-empty {
  padding: 80px 20px;
}

.solutions-empty-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 auto 25px;
}

.solutions-empty h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.solutions-empty p {
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 992px) {
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .solution-card-item {
    min-height: 350px;
  }
}

@media (max-width: 768px) {
  .solutions-archive-section {
    padding: 60px 0;
  }

  .solution-card-item {
    min-height: 320px;
  }

  .solution-card-content {
    padding: 30px;
  }

  .solution-card-title {
    font-size: 24px;
  }

  .solution-card-desc {
    font-size: 15px;
  }

  .solution-card-link {
    padding: 12px 24px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .solution-card-item {
    min-height: 280px;
  }

  .solution-card-content {
    padding: 25px;
  }

  .solution-card-title {
    font-size: 22px;
  }

  .solution-card-desc {
    font-size: 14px;
  }
}

/* =====================================================
   Solution Single Page Templates
   ===================================================== */

/* Common Solution Styles */
.sol-hero {
  position: relative;
  padding: 120px 0 100px;
  overflow: hidden;
}

.sol-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.sol-hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 50%, transparent 100%);
}

.sol-hero-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

.sol-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.sol-hero-content {
  position: relative;
}

.sol-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 24px;
}

.sol-badge-crm {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: var(--accent);
}

.sol-badge-erp {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--accent2);
}

.sol-badge-ecommerce {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--accent3);
}

.sol-badge-cloud {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.sol-hero-title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 24px;
  color: #fff;
}

.sol-hero-desc {
  font-size: 20px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 32px;
}

.sol-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.sol-hero-stats {
  display: flex;
  gap: 40px;
}

.sol-stat {
  text-align: center;
}

.sol-stat-number {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.sol-stat-label {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

.sol-hero-visual {
  position: relative;
}

.sol-hero-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.sol-hero-image {
  width: 100%;
  height: auto;
  display: block;
}

.sol-hero-image-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
  z-index: -1;
  animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.sol-hero-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.3);
}

/* Features Section */
.sol-features {
  padding: 100px 0;
  background: rgba(0, 0, 0, 0.2);
}

.sol-section-header {
  margin-bottom: 60px;
}

.sol-section-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(99, 102, 241, 0.15);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.sol-section-title {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  max-width: 700px;
  margin: 0 auto;
}

.sol-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.sol-feature-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 35px;
  transition: all 0.4s ease;
}

.sol-feature-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.sol-feature-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.sol-icon-erp {
  background: linear-gradient(135deg, var(--accent2), #059669);
}

.sol-icon-ecommerce {
  background: linear-gradient(135deg, var(--accent3), #d97706);
}

.sol-icon-cloud {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.sol-feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}

.sol-feature-card p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Content Section */
.sol-content-section {
  padding: 80px 0;
}

.sol-content-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.sol-content-wrapper h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 40px 0 20px;
  color: #fff;
}

.sol-content-wrapper h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 30px 0 16px;
  color: #fff;
}

.sol-content-wrapper p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}

.sol-content-wrapper ul,
.sol-content-wrapper ol {
  margin: 20px 0;
  padding-left: 24px;
}

.sol-content-wrapper li {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 10px;
}

.sol-content-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 30px 0;
}

/* Benefits Section */
.sol-benefits {
  padding: 100px 0;
  background: rgba(0, 0, 0, 0.15);
}

.sol-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.sol-benefits-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

.sol-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
}

.sol-benefits-list li i {
  color: var(--accent2);
  font-size: 20px;
  margin-top: 3px;
}

.sol-benefits-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* CTA Section */
.sol-cta {
  padding: 100px 0;
}

.sol-cta-box {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 30px;
  padding: 60px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.sol-cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.sol-cta-content {
  position: relative;
  z-index: 1;
}

.sol-cta-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.sol-cta-content p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.sol-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.btn-white {
  background: #fff;
  color: var(--accent);
  border: none;
}

.btn-white:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-outline-white {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* Template-specific CTA colors */
.sol-cta-erp .sol-cta-box {
  background: linear-gradient(135deg, var(--accent2), #059669);
}

.sol-cta-ecommerce .sol-cta-box {
  background: linear-gradient(135deg, var(--accent3), #d97706);
}

.sol-cta-cloud .sol-cta-box {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

/* Minimal Hero (Custom Template) */
.sol-hero-minimal {
  padding: 100px 0 60px;
  text-align: center;
}

.sol-hero-minimal-content {
  max-width: 800px;
  margin: 0 auto;
}

.sol-content-full {
  padding: 60px 0 100px;
}

/* Default Solution Template */
.solution-single {
  padding-top: 40px;
}

.solution-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
}

.solution-badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(99, 102, 241, 0.15);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 20px;
}

.solution-title {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.2;
}

.solution-excerpt {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 30px;
  line-height: 1.7;
}

.solution-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.solution-hero-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.solution-content {
  max-width: 900px;
  margin: 0 auto 60px;
}

.solution-cta {
  margin-top: 60px;
}

.solution-cta-box {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 24px;
  padding: 50px;
  text-align: center;
}

.solution-cta-box h2 {
  font-size: 28px;
  color: #fff;
  margin-bottom: 12px;
}

.solution-cta-box p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 992px) {
  .sol-hero-grid,
  .solution-hero,
  .sol-benefits-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sol-hero-visual {
    order: -1;
  }

  .sol-hero-title,
  .solution-title {
    font-size: 38px;
  }

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

  .sol-cta-box {
    flex-direction: column;
    text-align: center;
    padding: 50px 40px;
  }
}

@media (max-width: 768px) {
  .sol-hero {
    padding: 80px 0 60px;
  }

  .sol-hero-title,
  .solution-title {
    font-size: 32px;
  }

  .sol-hero-desc {
    font-size: 17px;
  }

  .sol-hero-stats {
    gap: 24px;
  }

  .sol-stat-number {
    font-size: 26px;
  }

  .sol-features-grid {
    grid-template-columns: 1fr;
  }

  .sol-section-title {
    font-size: 28px;
  }

  .sol-cta-content h2 {
    font-size: 24px;
  }

  .sol-cta-box {
    padding: 40px 30px;
  }
}

@media (max-width: 480px) {
  .sol-hero-actions {
    flex-direction: column;
  }

  .sol-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .sol-hero-stats {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .solution-actions {
    flex-direction: column;
  }

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

/* ===== LIGHT SECTIONS ===== */
/* ============================================
   SECTION-LIGHT - Dark Mode (blue bg, white text)
   ============================================ */
.section-light {
  background: linear-gradient(180deg, #050816 0%, #0a1128 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
}

.section-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(249, 115, 22, 0.025) 0%, transparent 40%);
  pointer-events: none;
  opacity: 0.5;
}

/* Hide decorative pattern on testimonials section in dark mode */
.section-light.testimonials-section::before {
  display: none;
}

/* Text colors for dark sections */
.section-light,
.section-light p,
.section-light span,
.section-light li {
  color: rgba(255, 255, 255, 0.85);
}

.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light h5,
.section-light h6 {
  color: #ffffff;
}

.section-light .lead,
.section-light .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Badge modern on dark */
.section-light .badge-modern {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

/* Solution cards on dark background */
.section-light .solution-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.section-light .solution-card::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(34, 211, 238, 0.03));
}

.section-light .solution-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 20px 50px rgba(99, 102, 241, 0.2);
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.05);
}

.section-light .solution-card .solution-desc {
  color: rgba(255, 255, 255, 0.6);
}

.section-light .solution-card .solution-features li span {
  color: rgba(255, 255, 255, 0.8);
}

.section-light .solution-btn {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.12);
}

.section-light .solution-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Featured card on dark */
/* Featured card - WHITE with dark text on dark mode */
.section-light .solution-card-featured {
  background: #ffffff !important;
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

.section-light .solution-card-featured:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(99, 102, 241, 0.25);
}

.section-light .solution-card-featured .solution-title,
.section-light .solution-card-featured h3 {
  color: #0f172a !important;
}

.section-light .solution-card-featured .gradient-text {
  background: linear-gradient(135deg, var(--accent), #818cf8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.section-light .solution-card-featured .solution-desc,
.section-light .solution-card-featured p {
  color: #475569 !important;
}

.section-light .solution-card-featured span,
.section-light .solution-card-featured li span {
  color: #334155 !important;
}

.section-light .solution-card-featured .solution-type-featured {
  background: rgba(99, 102, 241, 0.1) !important;
  color: var(--accent) !important;
}

.section-light .solution-card-featured .solution-badge-top {
  background: linear-gradient(135deg, var(--accent), #818cf8) !important;
  color: #fff !important;
}

.section-light .solution-card-featured .industry-tag {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #475569 !important;
}

.section-light .solution-card-featured .solution-btn-primary {
  background: linear-gradient(135deg, var(--accent), #818cf8) !important;
  color: #fff !important;
}

/* Glass cards on dark */
.section-light .glass-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ============================================
   SECTION-LIGHT - Light Mode (white bg, blue text)
   ============================================ */
[data-theme="light"] .section-light {
  background: #ffffff !important;
  border-top: 1px solid rgba(5, 8, 22, 0.06) !important;
  border-bottom: 1px solid rgba(5, 8, 22, 0.06) !important;
}

[data-theme="light"] .section-light::before {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(249, 115, 22, 0.03) 0%, transparent 50%);
}

[data-theme="light"] .section-light,
[data-theme="light"] .section-light p,
[data-theme="light"] .section-light span,
[data-theme="light"] .section-light li {
  color: rgba(5, 8, 22, 0.8);
}

[data-theme="light"] .section-light h1,
[data-theme="light"] .section-light h2,
[data-theme="light"] .section-light h3,
[data-theme="light"] .section-light h4,
[data-theme="light"] .section-light h5,
[data-theme="light"] .section-light h6 {
  color: #050816;
}

[data-theme="light"] .section-light .lead,
[data-theme="light"] .section-light .text-muted {
  color: rgba(5, 8, 22, 0.6) !important;
}

[data-theme="light"] .section-light .badge-modern {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
}

[data-theme="light"] .section-light .solution-card {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .section-light .solution-card:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .section-light .solution-card .solution-desc {
  color: rgba(5, 8, 22, 0.6);
}

[data-theme="light"] .section-light .solution-card .solution-features li span {
  color: rgba(5, 8, 22, 0.8);
}

[data-theme="light"] .section-light .solution-btn {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}

/* Featured card on LIGHT MODE - DARK with white text */
[data-theme="light"] .section-light .solution-card-featured {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .section-light .solution-card-featured:hover {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 20px 50px rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .section-light .solution-card-featured .solution-title,
[data-theme="light"] .section-light .solution-card-featured h3 {
  color: #fff !important;
}

[data-theme="light"] .section-light .solution-card-featured .gradient-text {
  background: linear-gradient(135deg, #a5b4fc, #c4b5fd) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] .section-light .solution-card-featured .solution-desc,
[data-theme="light"] .section-light .solution-card-featured p {
  color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .section-light .solution-card-featured span,
[data-theme="light"] .section-light .solution-card-featured li span {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="light"] .section-light .solution-card-featured .solution-type-featured {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
}

[data-theme="light"] .section-light .solution-card-featured .solution-badge-top {
  background: linear-gradient(135deg, var(--accent), #818cf8) !important;
  color: #fff !important;
}

[data-theme="light"] .section-light .solution-card-featured .industry-tag {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] .section-light .solution-card-featured .solution-btn-primary {
  background: linear-gradient(135deg, var(--accent), #818cf8) !important;
  color: #fff !important;
}

[data-theme="light"] .section-light .glass-card {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 15px rgba(5, 8, 22, 0.05);
}

.section-light .glass-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.12);
}

.section-light .glass-card p {
  color: #64748b;
}

/* Ecosystem/visual elements on light - DARK CARDS */
.section-light .ecosystem-wrapper {
  background: transparent;
  border-radius: 32px;
}

/* Dark cards for ecosystem on light background */
.section-light .node-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.section-light .node-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  border-color: rgba(99, 102, 241, 0.4);
}

.section-light .node-card h4 {
  color: #fff;
}

.section-light .node-card p {
  color: rgba(255, 255, 255, 0.6);
}

.section-light .node-badge {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.section-light .node-badge-alt {
  background: rgba(249, 115, 22, 0.2);
  color: #fdba74;
}

.section-light .node-badge-cyan {
  background: rgba(34, 211, 238, 0.2);
  color: #67e8f9;
}

/* Dark center core */
.section-light .ecosystem-core {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 2px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.2), 0 0 80px rgba(99, 102, 241, 0.1);
}

/* Light rings/lines for dark background */
.section-light .ecosystem-ring {
  border-color: rgba(255, 255, 255, 0.1);
}

.section-light .ecosystem-ring-2 {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Light connectors/lines for dark background */
.section-light .node-connector {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
}

.section-light .node-crm .node-connector {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
}

.section-light .node-erp .node-connector {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
}

.section-light .node-shop .node-connector {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
}

.section-light .node-hosting .node-connector {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)) !important;
}

/* Data particles on light - more visible */
.section-light .data-particle {
  width: 12px;
  height: 12px;
  opacity: 1;
}

.section-light .particle-1 {
  background: var(--accent);
  box-shadow:
    0 0 20px var(--accent),
    0 0 40px var(--accent),
    0 0 60px rgba(99, 102, 241, 0.5);
}

.section-light .particle-2 {
  background: var(--accent2);
  box-shadow:
    0 0 20px var(--accent2),
    0 0 40px var(--accent2),
    0 0 60px rgba(249, 115, 22, 0.5);
}

.section-light .particle-3 {
  background: var(--accent3);
  box-shadow:
    0 0 20px var(--accent3),
    0 0 40px var(--accent3),
    0 0 60px rgba(34, 211, 238, 0.5);
}

.section-light .particle-4 {
  background: #10b981;
  box-shadow:
    0 0 20px #10b981,
    0 0 40px #10b981,
    0 0 60px rgba(16, 185, 129, 0.5);
}

/* Hosting banner on light */
/* Hosting banner - DARK with white text on dark mode (like other solution cards) */
.section-light .hosting-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
  border: 1px solid rgba(99, 102, 241, 0.15);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.section-light .hosting-banner:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.15);
}

.section-light .hosting-banner-bg {
  opacity: 0.5;
}

.section-light .hosting-text h4 {
  color: #ffffff;
}

.section-light .hosting-text p {
  color: rgba(255, 255, 255, 0.7);
}

.section-light .hosting-features span {
  color: rgba(255, 255, 255, 0.8);
}

.section-light .hosting-features i {
  color: #10b981;
}

.section-light .hosting-btn {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #fff;
}

/* Testimonial cards - Clean white design */
.section-light .testimonial-card-modern {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.08);
  padding: 0;
  border-radius: 20px;
}

.section-light .testimonial-card-modern:hover {
  background: #ffffff;
  box-shadow: 0 15px 40px rgba(5, 8, 22, 0.12);
  transform: translateY(-5px);
}

.section-light .testimonial-card-inner {
  background: transparent;
  border-radius: 20px;
}

.section-light .testimonial-quote,
.section-light .testimonial-quote p {
  color: #334155;
  font-size: 16px;
  line-height: 1.8;
}

.section-light .author-company {
  color: #0f172a !important;
  font-weight: 700;
}

.section-light .author-position {
  color: #64748b !important;
}

/* Fix for dark mode - section-light cards should have dark text */
.section-light .testimonial-card-inner {
  background: #ffffff !important;
}

.section-light .testimonial-card-modern {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3), rgba(34, 211, 238, 0.2)) !important;
}

.section-light .decor-quote {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.08));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-light .decor-gradient {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
}

.section-light .author-line {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Logo - subtle background */
.section-light .testimonial-logo-wrap img {
  background: #f8fafc;
  box-shadow: 0 2px 10px rgba(5, 8, 22, 0.06);
  border: 1px solid rgba(5, 8, 22, 0.06);
}

/* Testimoniale light - responsive */
@media (max-width: 768px) {
  .section-light.testimonials-section {
    padding: 50px 0;
  }

  .section-light .testimonial-card-modern {
    box-shadow: 0 4px 15px rgba(5, 8, 22, 0.08);
  }

  .section-light .testimonial-card-inner {
    padding: 25px;
  }
}

@media (max-width: 480px) {
  .section-light.testimonials-section {
    padding: 40px 0;
  }

  .section-light .testimonial-card-modern {
    box-shadow: 0 3px 12px rgba(5, 8, 22, 0.06);
  }

  .section-light .testimonial-card-inner {
    padding: 20px 18px;
  }

  .section-light .testimonial-quote,
  .section-light .testimonial-quote p {
    font-size: 14px;
  }
}

/* Landscape mobil - testimoniale */
@media (max-width: 900px) and (orientation: landscape) {
  .section-light.testimonials-section {
    padding: 30px 0;
  }

  .section-light .testimonial-card-inner {
    padding: 20px;
    min-height: auto;
  }

  .section-light .testimonial-quote {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .section-light .decor-quote {
    font-size: 50px;
  }
}

/* Process cards on light */
.section-light .process-modern .glass-card {
  background: #fff;
  border: 1px solid #e2e8f0;
}

.section-light .process-modern h3 {
  color: #0f172a;
}

.section-light .process-modern p {
  color: #64748b !important;
}

/* ===== Case Study Cards - New Design ===== */
.case-study-card {
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.case-study-card:hover {
  transform: translateY(-8px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 25px 50px rgba(99, 102, 241, 0.2);
}

.case-study-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.case-study-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, #0f172a, transparent);
  pointer-events: none;
}

.case-study-image img {
  transition: transform 0.5s ease;
}

.case-study-card:hover .case-study-image img {
  transform: scale(1.05);
}

.case-study-content {
  padding: 24px;
}

.case-study-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

.case-study-content p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 16px;
  line-height: 1.6;
}

.case-study-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: all 0.3s ease;
}

.case-study-link i {
  transition: transform 0.3s ease;
}

.case-study-card:hover .case-study-link {
  color: #818cf8;
}

.case-study-card:hover .case-study-link i {
  transform: translateX(4px);
}

/* Button Case Studies */
.btn-case-studies {
  background: linear-gradient(135deg, var(--accent), #818cf8);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-case-studies:hover {
  background: linear-gradient(135deg, #818cf8, var(--accent));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
}

/* Responsive Case Studies */
@media (max-width: 768px) {
  .case-study-image {
    height: 180px;
  }

  .case-study-content {
    padding: 20px;
  }

  .case-study-content h3 {
    font-size: 16px;
  }

  .case-study-content p {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .case-study-image {
    height: 160px;
  }

  .case-study-content {
    padding: 16px;
  }
}

/* Buttons on light */
.section-light .btn.glass {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: var(--accent);
}

.section-light .btn.glass:hover {
  background: var(--accent);
  color: #fff;
}

/* Navigation buttons on light */
.section-light .testimonial-nav-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
}

.section-light .testimonial-nav-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.section-light .testimonial-dot {
  background: #cbd5e1;
}

.section-light .testimonial-dot.active {
  background: var(--accent);
}

/* Hide decorative blur orbs on light sections */
.section-light > .position-absolute[style*="radial-gradient"] {
  opacity: 0.5;
}

/* Integration logos on light - white background */
.section-light .integration-node {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.section-light .integration-node:hover {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
}

.section-light .integration-node img {
  filter: none;
}

/* Integration tooltips on light background */
.section-light .integration-tooltip {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Light theme - Integration tooltips fully visible */
[data-theme="light"] .section-light .integration-tooltip {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  opacity: 1;
  border: 1px solid rgba(99, 102, 241, 0.4);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .section-light .integration-node:hover .integration-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
}

.section-light .ecosystem-integration-label {
  bottom: 8%;
  left: -2%;
}

.section-light .ecosystem-integration-label span {
  background: #fff;
  color: #64748b;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Light theme - Integration label more visible */
[data-theme="light"] .section-light .ecosystem-integration-label span {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.1);
  font-weight: 700;
}

/* Outer ring for integrations on light - more visible */
.section-light .ecosystem-integrations::before {
  border: 2px dashed rgba(99, 102, 241, 0.25);
}

/* ===== Integration Particles - Bidirectional ===== */
.integration-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 4;
  opacity: 0;
}

/* INPUT particles (from partners to center) */
/* eMag particle - red - INPUT */
.int-particle-emag {
  background: #e53935;
  box-shadow: 0 0 15px #e53935, 0 0 30px rgba(229, 57, 53, 0.5);
  top: 5%;
  left: 50%;
  animation: particleToCenter 2.5s ease-in-out infinite;
}

/* Sameday particle - red/orange - INPUT */
.int-particle-sameday {
  background: #ff5722;
  box-shadow: 0 0 15px #ff5722, 0 0 30px rgba(255, 87, 34, 0.5);
  top: 25%;
  right: 8%;
  animation: particleToCenterDiag1 2.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

/* FAN Courier particle - blue - INPUT */
.int-particle-fan {
  background: #1976d2;
  box-shadow: 0 0 15px #1976d2, 0 0 30px rgba(25, 118, 210, 0.5);
  bottom: 25%;
  right: 8%;
  animation: particleToCenterDiag2 2.5s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* OUTPUT particles (from center to partners) */
/* Cargus particle - orange - OUTPUT */
.int-particle-cargus {
  background: #ff9800;
  box-shadow: 0 0 15px #ff9800, 0 0 30px rgba(255, 152, 0, 0.5);
  top: 50%;
  left: 50%;
  animation: particleFromCenterBottom 2.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

/* Netopia particle - green - OUTPUT */
.int-particle-netopia {
  background: #43a047;
  box-shadow: 0 0 15px #43a047, 0 0 30px rgba(67, 160, 71, 0.5);
  top: 50%;
  left: 50%;
  animation: particleFromCenterDiag3 2.5s ease-in-out infinite;
  animation-delay: 0.6s;
}

/* ANAF particle - blue - OUTPUT */
.int-particle-anaf {
  background: #0d47a1;
  box-shadow: 0 0 15px #0d47a1, 0 0 30px rgba(13, 71, 161, 0.5);
  top: 50%;
  left: 50%;
  animation: particleFromCenterDiag4 2.5s ease-in-out infinite;
  animation-delay: 1s;
}

/* INPUT Animations - to center */
@keyframes particleToCenter {
  0%, 100% { transform: translate(-50%, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-50%, 120px); opacity: 0; }
}

@keyframes particleToCenterDiag1 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-80px, 60px); opacity: 0; }
}

@keyframes particleToCenterDiag2 {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-80px, -60px); opacity: 0; }
}

/* OUTPUT Animations - from center */
@keyframes particleFromCenterBottom {
  0%, 100% { transform: translate(-50%, -50%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-50%, 130px); opacity: 0; }
}

@keyframes particleFromCenterDiag3 {
  0%, 100% { transform: translate(-50%, -50%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-180px, 50px); opacity: 0; }
}

@keyframes particleFromCenterDiag4 {
  0%, 100% { transform: translate(-50%, -50%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-180px, -80px); opacity: 0; }
}

/* Light mode - more visible integration particles */
.section-light .integration-particle {
  width: 12px;
  height: 12px;
}

.section-light .int-particle-emag {
  box-shadow: 0 0 20px #e53935, 0 0 40px #e53935, 0 0 60px rgba(229, 57, 53, 0.5);
}

.section-light .int-particle-sameday {
  box-shadow: 0 0 20px #ff5722, 0 0 40px #ff5722, 0 0 60px rgba(255, 87, 34, 0.5);
}

.section-light .int-particle-fan {
  box-shadow: 0 0 20px #1976d2, 0 0 40px #1976d2, 0 0 60px rgba(25, 118, 210, 0.5);
}

.section-light .int-particle-cargus {
  box-shadow: 0 0 20px #ff9800, 0 0 40px #ff9800, 0 0 60px rgba(255, 152, 0, 0.5);
}

.section-light .int-particle-netopia {
  box-shadow: 0 0 20px #43a047, 0 0 40px #43a047, 0 0 60px rgba(67, 160, 71, 0.5);
}

.section-light .int-particle-anaf {
  box-shadow: 0 0 20px #0d47a1, 0 0 40px #0d47a1, 0 0 60px rgba(13, 71, 161, 0.5);
}

/* ============================================
   LIGHT MODE - Solutions Section Override
   When theme is light, .section-light needs white cards and dark text
   ============================================ */

/* Node cards - white background on light mode */
[data-theme="light"] .section-light .node-card {
  background: #ffffff !important;
  border: 1px solid rgba(5, 8, 22, 0.1);
  box-shadow: 0 8px 30px rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .section-light .node-card:hover {
  box-shadow: 0 20px 50px rgba(5, 8, 22, 0.12);
  border-color: var(--accent);
}

[data-theme="light"] .section-light .node-card h4 {
  color: #050816 !important;
}

[data-theme="light"] .section-light .node-card p {
  color: rgba(5, 8, 22, 0.6) !important;
}

/* Node badges on light */
[data-theme="light"] .section-light .node-badge {
  background: rgba(99, 102, 241, 0.1);
  color: var(--accent);
}

[data-theme="light"] .section-light .node-badge-alt {
  background: rgba(249, 115, 22, 0.1);
  color: var(--accent2);
}

[data-theme="light"] .section-light .node-badge-cyan {
  background: rgba(34, 211, 238, 0.1);
  color: var(--accent3);
}

/* Ecosystem rings - visible on light */
[data-theme="light"] .section-light .ecosystem-ring {
  border-color: rgba(5, 8, 22, 0.15) !important;
}

[data-theme="light"] .section-light .ecosystem-ring-2 {
  border-color: rgba(5, 8, 22, 0.1) !important;
}

/* Ecosystem core - white on light */
[data-theme="light"] .section-light .ecosystem-core {
  background: #ffffff !important;
  border: 2px solid rgba(5, 8, 22, 0.15);
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.15);
}

/* Node connectors - dark on light */
[data-theme="light"] .section-light .node-connector {
  background: linear-gradient(to right, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

[data-theme="light"] .section-light .node-crm .node-connector {
  background: linear-gradient(to right, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

[data-theme="light"] .section-light .node-erp .node-connector {
  background: linear-gradient(to bottom, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

[data-theme="light"] .section-light .node-shop .node-connector {
  background: linear-gradient(to left, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

[data-theme="light"] .section-light .node-hosting .node-connector {
  background: linear-gradient(to top, rgba(5, 8, 22, 0.3), rgba(5, 8, 22, 0.05)) !important;
}

/* Integration nodes - white on light */
[data-theme="light"] .section-light .integration-node {
  background: #ffffff !important;
  border-color: rgba(5, 8, 22, 0.1);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

/* ============================================
   LIGHT MODE - Testimonials Override
   ============================================ */
[data-theme="light"] .section-light .testimonial-card-modern {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .section-light .testimonial-card-modern:hover {
  box-shadow: 0 15px 40px rgba(5, 8, 22, 0.12);
}

[data-theme="light"] .section-light .testimonial-card-inner {
  background: transparent !important;
}

[data-theme="light"] .section-light .testimonial-quote,
[data-theme="light"] .section-light .testimonial-quote p {
  color: #334155 !important;
}

[data-theme="light"] .section-light .author-company {
  color: #0f172a !important;
}

[data-theme="light"] .section-light .author-position {
  color: #64748b !important;
}

[data-theme="light"] .section-light .testimonial-logo-wrap img {
  background: #f8fafc !important;
  border: 1px solid rgba(5, 8, 22, 0.06);
}

/* Navigation buttons and dots on light */
.section-light .testimonial-nav-btn {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.1);
  color: #334155;
  box-shadow: 0 2px 8px rgba(5, 8, 22, 0.06);
}

.section-light .testimonial-nav-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.section-light .testimonial-dot {
  background: rgba(5, 8, 22, 0.15);
}

.section-light .testimonial-dot:hover {
  background: rgba(5, 8, 22, 0.3);
}

.section-light .testimonial-dot.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

[data-theme="light"] .section-light .testimonial-nav-btn {
  background: #ffffff !important;
  border: 1px solid rgba(5, 8, 22, 0.1);
  color: #334155 !important;
}

[data-theme="light"] .section-light .testimonial-dot {
  background: rgba(5, 8, 22, 0.15) !important;
}

[data-theme="light"] .section-light .testimonial-dot:hover {
  background: rgba(5, 8, 22, 0.3) !important;
}

/* Testimonials section header - dark mode (default) */
.section-light.testimonials-section h2 {
  color: #ffffff !important;
}

.section-light.testimonials-section .section-subtitle {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Testimonials section header - light mode */
[data-theme="light"] .section-light.testimonials-section h2 {
  color: #0f172a !important;
}

[data-theme="light"] .section-light.testimonials-section .section-subtitle {
  color: #64748b !important;
}

/* ============================================
   LIGHT MODE - Case Studies Override
   ============================================ */
[data-theme="light"] .section-light .case-study-card {
  background: #ffffff !important;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .section-light .case-study-card:hover {
  border-color: var(--accent);
  box-shadow: 0 15px 40px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .section-light .case-study-image::after {
  background: linear-gradient(to top, #ffffff, transparent);
}

[data-theme="light"] .section-light .case-study-content h3 {
  color: #0f172a !important;
}

[data-theme="light"] .section-light .case-study-content p {
  color: #64748b !important;
}

[data-theme="light"] .section-light .case-study-link {
  color: var(--accent);
}

[data-theme="light"] .section-light .case-study-card:hover .case-study-link {
  color: #4f46e5;
}

/* Case studies section header on light */
[data-theme="light"] .section-light.case-studies-section h2 {
  color: #0f172a !important;
}

[data-theme="light"] .section-light.case-studies-section .lead,
[data-theme="light"] .section-light.case-studies-section p {
  color: #64748b !important;
}

/* ============================================
   LIGHT MODE - Hosting Banner (white with dark text)
   ============================================ */
[data-theme="light"] .section-light .hosting-banner {
  background: #ffffff !important;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .section-light .hosting-banner:hover {
  border-color: var(--accent);
  box-shadow: 0 15px 40px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .section-light .hosting-banner-bg {
  opacity: 0.15;
}

[data-theme="light"] .section-light .hosting-text h4 {
  color: #0f172a !important;
}

[data-theme="light"] .section-light .hosting-text p {
  color: #64748b !important;
}

[data-theme="light"] .section-light .hosting-features span {
  color: #334155 !important;
}

[data-theme="light"] .section-light .hosting-features i {
  color: #10b981 !important;
}

[data-theme="light"] .section-light .hosting-btn {
  background: linear-gradient(135deg, #10b981, #34d399) !important;
  color: #fff !important;
}

/* ============================================
   LIGHT MODE - Footer CTA Section
   Gradient pastel subtil, aspect premium
   ============================================ */
[data-theme="light"] .footer-cta-section {
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 50%, #f0fdff 100%);
}

[data-theme="light"] .footer-cta-bg {
  background:
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(99, 102, 241, 0.08), transparent 60%),
    radial-gradient(ellipse 80% 60% at 0% 50%, rgba(168, 85, 247, 0.06), transparent),
    radial-gradient(ellipse 60% 50% at 100% 30%, rgba(34, 211, 238, 0.05), transparent);
}

[data-theme="light"] .footer-cta-content {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.1);
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.08);
  backdrop-filter: blur(20px);
}

[data-theme="light"] .footer-cta-content::before {
  background: linear-gradient(90deg, transparent, var(--accent), rgba(168, 85, 247, 0.6), transparent);
}

[data-theme="light"] .footer-cta-text h2 {
  background: linear-gradient(135deg, #0f172a 0%, #334155 50%, #0f172a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .footer-cta-text p {
  color: #64748b;
}

[data-theme="light"] .footer-cta-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #818cf8 50%, var(--accent) 100%);
  background-size: 200% 100%;
  color: #fff;
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .footer-cta-btn-primary:hover {
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.35);
}

[data-theme="light"] .footer-cta-btn-secondary {
  background: #ffffff;
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: #334155;
  box-shadow: 0 4px 12px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .footer-cta-btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

/* ============================================
   RESPONSIVE - Light/Dark Mode Adjustments
   Desktop, Tablet, Mobile (Portrait & Landscape)
   ============================================ */

/* ===== TABLET LANDSCAPE (max-width: 992px) ===== */
@media (max-width: 992px) {
  /* Solution cards */
  .section-light .solution-card-featured {
    padding: 24px;
  }

  .section-light .solution-card-featured .industry-tag {
    padding: 4px 8px;
    font-size: 10px;
  }

  [data-theme="light"] .section-light .solution-card-featured {
    padding: 24px;
  }

  /* Hosting banner */
  .section-light .hosting-banner {
    padding: 24px;
  }

  /* Testimonials */
  .section-light .testimonial-card-inner {
    padding: 30px;
    min-height: 250px;
  }

  /* Case studies */
  [data-theme="light"] .section-light .case-study-content {
    padding: 20px;
  }

  /* Footer CTA */
  [data-theme="light"] .footer-cta-content {
    padding: 30px;
  }
}

/* ===== TABLET PORTRAIT / MOBILE LARGE (max-width: 768px) ===== */
@media (max-width: 768px) {
  /* Solution cards */
  .section-light .solution-card {
    padding: 20px;
  }

  .section-light .solution-card-featured {
    padding: 20px;
  }

  .section-light .solution-card-featured .solution-industries {
    gap: 6px;
  }

  .section-light .solution-card-featured .industry-tag {
    padding: 3px 6px;
    font-size: 9px;
  }

  .section-light .solution-card-featured .solution-features li {
    font-size: 13px;
  }

  [data-theme="light"] .section-light .solution-card {
    padding: 20px;
  }

  [data-theme="light"] .section-light .solution-card-featured {
    padding: 20px;
  }

  /* Hosting banner */
  .section-light .hosting-banner {
    padding: 20px;
  }

  .section-light .hosting-text h4 {
    font-size: 18px;
    text-align: center;
  }

  .section-light .hosting-text p {
    font-size: 13px;
    text-align: center;
  }

  .section-light .hosting-features {
    justify-content: center;
  }

  .section-light .hosting-features span {
    padding: 6px 10px;
    font-size: 11px;
  }

  [data-theme="light"] .section-light .hosting-banner {
    padding: 20px;
  }

  /* Testimonials */
  .section-light .testimonial-card-inner {
    padding: 24px;
    min-height: auto;
  }

  .section-light .testimonial-quote,
  .section-light .testimonial-quote p {
    font-size: 14px;
  }

  .section-light .testimonial-logo-wrap img {
    max-width: 120px;
    padding: 8px 14px;
  }

  [data-theme="light"] .section-light .testimonial-quote,
  [data-theme="light"] .section-light .testimonial-quote p {
    font-size: 14px !important;
  }

  /* Case studies */
  [data-theme="light"] .section-light .case-study-card {
    border-radius: 16px;
  }

  [data-theme="light"] .section-light .case-study-content {
    padding: 16px;
  }

  [data-theme="light"] .section-light .case-study-content h3 {
    font-size: 16px;
  }

  [data-theme="light"] .section-light .case-study-content p {
    font-size: 13px;
  }

  /* Footer CTA */
  [data-theme="light"] .footer-cta-section {
    padding: 40px 0;
  }

  [data-theme="light"] .footer-cta-content {
    padding: 24px 20px;
    border-radius: 20px;
  }

  [data-theme="light"] .footer-cta-text h2 {
    font-size: 22px;
  }

  [data-theme="light"] .footer-cta-text p {
    font-size: 14px;
  }

  [data-theme="light"] .footer-cta-btn-primary,
  [data-theme="light"] .footer-cta-btn-secondary {
    padding: 12px 20px;
    font-size: 13px;
  }
}

/* ===== MOBILE (max-width: 576px) ===== */
@media (max-width: 576px) {
  /* Solution cards */
  .section-light .solution-card {
    padding: 18px;
  }

  .section-light .solution-card-featured {
    padding: 18px;
  }

  .section-light .solution-card-featured .solution-badge-top {
    font-size: 9px;
    padding: 4px 10px;
  }

  .section-light .solution-card-featured .solution-title {
    font-size: 18px;
  }

  .section-light .solution-card-featured .solution-desc {
    font-size: 13px;
  }

  .section-light .solution-card-featured .industry-tag {
    padding: 2px 5px;
    font-size: 8px;
  }

  [data-theme="light"] .section-light .solution-card {
    padding: 18px;
  }

  [data-theme="light"] .section-light .solution-card-featured {
    padding: 18px;
  }

  /* Hosting banner */
  .section-light .hosting-banner {
    padding: 16px;
    border-radius: 16px;
  }

  .section-light .hosting-text h4 {
    font-size: 16px;
  }

  .section-light .hosting-text p {
    font-size: 12px;
  }

  .section-light .hosting-features span {
    padding: 5px 8px;
    font-size: 10px;
  }

  .section-light .hosting-btn {
    padding: 10px 16px;
    font-size: 12px;
    width: 100%;
    justify-content: center;
  }

  [data-theme="light"] .section-light .hosting-banner {
    padding: 16px;
    border-radius: 16px;
  }

  /* Testimonials */
  .section-light .testimonial-card-modern {
    border-radius: 16px;
  }

  .section-light .testimonial-card-inner {
    padding: 20px;
  }

  .section-light .testimonial-quote,
  .section-light .testimonial-quote p {
    font-size: 13px;
    line-height: 1.7;
  }

  .section-light .author-company {
    font-size: 14px;
  }

  .section-light .author-position {
    font-size: 12px;
  }

  .section-light .testimonial-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .section-light .testimonial-dot {
    width: 10px;
    height: 10px;
  }

  [data-theme="light"] .section-light .testimonial-card-modern {
    border-radius: 16px;
  }

  /* Case studies */
  [data-theme="light"] .section-light .case-study-image {
    height: 160px;
  }

  [data-theme="light"] .section-light .case-study-content {
    padding: 14px;
  }

  [data-theme="light"] .section-light .case-study-content h3 {
    font-size: 15px;
  }

  [data-theme="light"] .section-light .case-study-content p {
    font-size: 12px;
    margin-bottom: 12px;
  }

  /* Footer CTA */
  [data-theme="light"] .footer-cta-section {
    padding: 30px 0;
  }

  [data-theme="light"] .footer-cta-content {
    padding: 20px 16px;
    border-radius: 16px;
  }

  [data-theme="light"] .footer-cta-text h2 {
    font-size: 20px;
  }

  [data-theme="light"] .footer-cta-text p {
    font-size: 13px;
  }

  [data-theme="light"] .footer-cta-actions {
    flex-direction: column;
    gap: 12px;
  }

  [data-theme="light"] .footer-cta-btn-primary,
  [data-theme="light"] .footer-cta-btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }
}

/* ===== MOBILE SMALL (max-width: 480px) ===== */
@media (max-width: 480px) {
  /* Solution cards */
  .section-light .solution-card {
    padding: 16px;
  }

  .section-light .solution-card-featured {
    padding: 16px;
  }

  .section-light .solution-card-featured .solution-industries {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  [data-theme="light"] .section-light .solution-card {
    padding: 16px;
  }

  /* Testimonials */
  .section-light .testimonial-card-inner {
    padding: 16px;
  }

  .section-light .testimonial-quote,
  .section-light .testimonial-quote p {
    font-size: 12px;
  }

  .section-light .testimonial-logo-wrap img {
    max-width: 100px;
    padding: 6px 10px;
  }

  .section-light.testimonials-section h2 {
    font-size: 24px;
  }

  [data-theme="light"] .section-light.testimonials-section h2 {
    font-size: 24px !important;
  }

  /* Footer CTA */
  [data-theme="light"] .footer-cta-text h2 {
    font-size: 18px;
  }

  [data-theme="light"] .footer-cta-content::before {
    width: 60px;
  }
}

/* ===== LANDSCAPE MOBILE (max-width: 900px, landscape) ===== */
@media (max-width: 900px) and (orientation: landscape) {
  /* Hero diagram light mode */
  [data-theme="light"] .hero-hub-orbit {
    border-color: rgba(5, 8, 22, 0.2);
    border-width: 2px;
  }

  [data-theme="light"] .hero-hub-orbit-2 {
    border-color: rgba(5, 8, 22, 0.12);
    border-width: 2px;
  }

  [data-theme="light"] .hero-solution-node {
    background: #ffffff;
    border: 2px solid rgba(5, 8, 22, 0.15);
    box-shadow: 0 4px 15px rgba(5, 8, 22, 0.1);
  }

  [data-theme="light"] .hero-hub-inner {
    background: #ffffff;
    border: 2px solid rgba(5, 8, 22, 0.1);
  }

  /* Solution cards */
  .section-light .solution-card {
    padding: 16px;
  }

  .section-light .solution-card-featured {
    padding: 16px;
  }

  .section-light .solution-card-featured .solution-industries {
    margin-bottom: 8px;
  }

  .section-light .solution-card-featured .solution-features {
    margin-bottom: 12px;
  }

  [data-theme="light"] .section-light .solution-card {
    padding: 16px;
  }

  /* Hosting banner */
  .section-light .hosting-banner {
    padding: 16px;
  }

  .section-light .hosting-text p {
    font-size: 12px;
  }

  [data-theme="light"] .section-light .hosting-banner {
    padding: 16px;
  }

  /* Testimonials */
  .section-light .testimonial-card-inner {
    padding: 20px;
    min-height: auto;
  }

  .section-light .testimonial-quote,
  .section-light .testimonial-quote p {
    font-size: 13px;
    margin-bottom: 15px;
  }

  .section-light .decor-quote {
    font-size: 80px;
  }

  /* Footer CTA */
  [data-theme="light"] .footer-cta-section {
    padding: 25px 0;
  }

  [data-theme="light"] .footer-cta-content {
    padding: 20px;
  }

  [data-theme="light"] .footer-cta-text {
    margin-bottom: 16px;
  }

  [data-theme="light"] .footer-cta-text h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  [data-theme="light"] .footer-cta-text p {
    font-size: 13px;
  }
}

/* =====================================================
   SERVICE ARCHIVE & SINGLE PAGES
   ===================================================== */

/* Service Archive Hero */
.services-archive-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.services-archive-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.services-archive-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.services-archive-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #6366f1;
  margin-bottom: 24px;
}

.services-archive-hero-badge .badge-dot {
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.services-archive-hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  margin: 0 0 24px;
}

.services-archive-hero-title .title-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.services-archive-hero-desc {
  font-size: 20px;
  line-height: 1.7;
  color: #64748b;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Service Archive Grid */
.services-archive-section {
  padding: 80px 0;
  background: #ffffff;
}

.services-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.service-archive-card {
  display: flex;
  gap: 24px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.service-archive-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

.service-archive-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
}

.service-icon-violet {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.service-icon-cyan {
  background: linear-gradient(135deg, #22d3ee, #67e8f9);
}

.service-icon-orange {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

.service-icon-green {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.service-icon-blue {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.service-icon-red {
  background: linear-gradient(135deg, #ef4444, #f87171);
}

.service-archive-content {
  flex: 1;
}

.service-archive-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
}

.service-archive-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-archive-title a:hover {
  color: #6366f1;
}

.service-archive-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: #64748b;
  margin: 0 0 16px;
}

.service-archive-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6366f1;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-archive-link:hover {
  gap: 12px;
}

.service-archive-link i {
  font-size: 12px;
}

.services-archive-empty {
  text-align: center;
  padding: 80px 20px;
  background: #f8fafc;
  border-radius: 20px;
  border: 1px dashed #cbd5e1;
}

.services-archive-empty i {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 20px;
}

.services-archive-empty h3 {
  font-size: 20px;
  color: #64748b;
  margin: 0 0 8px;
}

.services-archive-empty p {
  color: #94a3b8;
  margin: 0;
}

/* Single Service Hero */
.service-single-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.service-single-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.service-single-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.service-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  margin-bottom: 32px;
  transition: all 0.3s ease;
}

.service-back-link:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.service-single-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 28px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.3);
}

.service-single-title {
  font-size: 48px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 20px;
}

.service-single-excerpt {
  font-size: 20px;
  line-height: 1.7;
  color: #64748b;
  margin: 0 0 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.service-hero-cta {
  padding: 16px 32px;
  font-size: 16px;
}

/* Service Features Section */
.service-features-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.service-features-section .section-header-center {
  text-align: center;
  margin-bottom: 50px;
}

.service-features-section .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
  margin-bottom: 16px;
}

.service-features-section h2 {
  font-size: 36px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.service-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-feature-item {
  padding: 28px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.service-feature-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  border-color: rgba(99, 102, 241, 0.3);
}

.service-feature-item .feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #6366f1;
}

.service-feature-item p {
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}

/* Service Single Content */
.service-single-content-section {
  padding: 80px 0;
  background: #ffffff;
}

.service-single-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 50px;
  align-items: start;
}

.service-content-body {
  font-size: 17px;
  line-height: 1.8;
  color: #475569;
}

.service-content-body h2 {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin: 40px 0 16px;
}

.service-content-body h3 {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 32px 0 12px;
}

.service-content-body p {
  margin: 0 0 20px;
}

.service-content-body ul,
.service-content-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.service-content-body li {
  margin-bottom: 8px;
}

.service-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 28px 0;
}

/* Service Sidebar */
.service-single-sidebar {
  position: sticky;
  top: 100px;
}

.service-sidebar-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 20px;
}

.service-sidebar-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.service-sidebar-card h3 i {
  color: #6366f1;
}

.service-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #475569;
  margin-bottom: 12px;
  line-height: 1.5;
}

.service-benefits-list li:last-child {
  margin-bottom: 0;
}

.service-benefits-list li i {
  color: #10b981;
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

.service-sidebar-cta {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(99, 102, 241, 0.2);
  text-align: center;
}

.service-sidebar-cta h3 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 8px;
  justify-content: center;
}

.service-sidebar-cta p {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 20px;
}

.service-sidebar-cta .btn-block {
  width: 100%;
}

/* Service Navigation */
.service-navigation-section {
  padding: 60px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.service-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.service-nav-item {
  flex: 1;
  padding: 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-nav-item:hover {
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.service-nav-prev {
  text-align: left;
}

.service-nav-next {
  text-align: right;
}

.service-nav-empty {
  background: transparent;
  border-color: transparent;
}

.service-nav-item .nav-direction {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
  margin-bottom: 8px;
}

.service-nav-next .nav-direction {
  justify-content: flex-end;
}

.service-nav-item .nav-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.service-nav-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.service-nav-all span {
  display: none;
}

.service-nav-all:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}

/* Dark Mode - Service Archive */
[data-theme="dark"] .services-archive-hero {
  background-color: #050816;
}

[data-theme="dark"] .services-archive-hero-badge {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

[data-theme="dark"] .services-archive-hero-title {
  color: #ffffff;
}

[data-theme="dark"] .services-archive-hero-desc {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .services-archive-section {
  background: #050816;
}

[data-theme="dark"] .service-archive-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .service-archive-card:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .service-archive-title a {
  color: #ffffff;
}

[data-theme="dark"] .service-archive-excerpt {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .service-archive-link {
  color: #a5b4fc;
}

[data-theme="dark"] .services-archive-empty {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .services-archive-empty i {
  color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .services-archive-empty h3 {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .services-archive-empty p {
  color: rgba(255, 255, 255, 0.5);
}

/* Dark Mode - Single Service */
[data-theme="dark"] .service-single-hero {
  background-color: #050816;
}

[data-theme="dark"] .service-back-link {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .service-back-link:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

[data-theme="dark"] .service-single-title {
  color: #ffffff;
}

[data-theme="dark"] .service-single-excerpt {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .service-features-section {
  background: linear-gradient(180deg, #0a0f1a 0%, #050816 100%);
}

[data-theme="dark"] .service-features-section .section-badge {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .service-features-section h2 {
  color: #ffffff;
}

[data-theme="dark"] .service-feature-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .service-feature-item:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .service-feature-item .feature-icon {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .service-feature-item p {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .service-single-content-section {
  background: #050816;
}

[data-theme="dark"] .service-content-body {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .service-content-body h2,
[data-theme="dark"] .service-content-body h3 {
  color: #ffffff;
}

[data-theme="dark"] .service-sidebar-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .service-sidebar-card h3 {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .service-benefits-list li {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .service-benefits-list li i {
  color: #4ade80;
}

[data-theme="dark"] .service-sidebar-cta {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .service-sidebar-cta h3 {
  border-bottom: none;
}

[data-theme="dark"] .service-sidebar-cta p {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .service-navigation-section {
  background: #0a0f1a;
  border-top-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .service-nav-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .service-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .service-nav-item .nav-direction {
  color: #a5b4fc;
}

[data-theme="dark"] .service-nav-item .nav-title {
  color: #ffffff;
}

/* Service Pages Responsive */
@media (max-width: 1024px) {
  .services-archive-grid {
    gap: 24px;
  }

  .service-single-layout {
    grid-template-columns: 1fr 300px;
    gap: 40px;
  }

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

@media (max-width: 768px) {
  .services-archive-hero,
  .service-single-hero {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .services-archive-hero-title {
    font-size: 36px;
  }

  .services-archive-hero-desc {
    font-size: 17px;
  }

  .services-archive-grid {
    grid-template-columns: 1fr;
  }

  .service-archive-card {
    flex-direction: column;
    text-align: center;
  }

  .service-archive-icon {
    margin: 0 auto;
  }

  .service-single-title {
    font-size: 32px;
  }

  .service-single-excerpt {
    font-size: 17px;
  }

  .service-single-icon {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }

  .service-single-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .service-single-sidebar {
    position: static;
  }

  .service-features-grid {
    grid-template-columns: 1fr;
  }

  .service-navigation {
    flex-direction: column;
  }

  .service-nav-item {
    width: 100%;
  }

  .service-nav-prev,
  .service-nav-next {
    text-align: center;
  }

  .service-nav-item .nav-direction {
    justify-content: center;
  }

  .service-nav-all {
    order: -1;
    width: 100%;
    height: auto;
    padding: 16px;
    border-radius: 12px;
  }

  .service-nav-all span {
    display: inline;
  }
}

/* ============================================
   BLOG ARCHIVE PAGE
   ============================================ */

/* Blog Hero */
.blog-archive-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 80px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.blog-archive-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.blog-archive-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.blog-archive-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #a5b4fc;
  margin-bottom: 24px;
}

.blog-archive-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 24px;
  color: #fff;
}

.blog-archive-hero-desc {
  font-size: 1.25rem;
  color: rgba(255,255,255,.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Blog Archive Section */
.blog-archive-section {
  padding: 80px 0;
  background: var(--bg);
}

/* Categories Filter */
.blog-categories-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 48px;
}

.blog-cat-btn {
  padding: 10px 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all .3s ease;
}

.blog-cat-btn:hover,
.blog-cat-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Blog Grid */
.blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Blog Card */
.blog-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
  transition: all .3s ease;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: rgba(99,102,241,.3);
}

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

.blog-card-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.blog-card-featured .blog-card-image {
  aspect-ratio: 16/10;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s ease;
}

.blog-card:hover .blog-card-image-overlay {
  opacity: 1;
}

.blog-card-content {
  padding: 24px;
}

.blog-card-featured .blog-card-content {
  padding: 32px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.blog-card-category {
  padding: 4px 12px;
  background: rgba(99,102,241,.15);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.blog-card-category:hover {
  background: var(--accent);
  color: #fff;
}

.blog-card-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.blog-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.4;
}

.blog-card-featured .blog-card-title {
  font-size: 1.75rem;
}

.blog-card-title a {
  color: var(--text);
  text-decoration: none;
  transition: color .3s ease;
}

.blog-card-title a:hover {
  color: var(--accent);
}

.blog-card-excerpt {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}

.blog-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-card-author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.blog-card-author span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.blog-card-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap .3s ease;
}

.blog-card-link:hover {
  gap: 12px;
}

/* Blog Pagination */
.blog-archive-pagination {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.blog-archive-pagination .nav-links {
  display: flex;
  gap: 8px;
}

.blog-archive-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: all .3s ease;
}

.blog-archive-pagination .page-numbers:hover,
.blog-archive-pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Empty State */
.blog-archive-empty {
  text-align: center;
  padding: 80px 20px;
}

.blog-archive-empty i {
  font-size: 64px;
  color: var(--muted);
  margin-bottom: 24px;
}

.blog-archive-empty h3 {
  font-size: 1.5rem;
  margin: 0 0 12px;
  color: var(--text);
}

.blog-archive-empty p {
  color: var(--muted);
}

/* ============================================
   BLOG SINGLE PAGE
   ============================================ */

/* Single Hero */
.blog-single-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 0 100px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.blog-single-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.blog-single-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color .3s ease;
}

.blog-back-link:hover {
  color: #fff;
}

.blog-single-categories {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.blog-single-category {
  padding: 6px 16px;
  background: rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #a5b4fc;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: all .3s ease;
}

.blog-single-category:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.blog-single-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 32px;
  color: #fff;
}

.blog-single-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.blog-single-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blog-single-author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
}

.blog-single-author .author-info {
  text-align: left;
}

.blog-single-author .author-name {
  display: block;
  font-weight: 600;
  color: #fff;
}

.blog-single-author .post-date {
  font-size: 14px;
  color: rgba(255,255,255,.6);
}

.blog-single-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.reading-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,.6);
}

/* Content Section */
.blog-single-content-section {
  padding: 80px 0;
  background: var(--bg);
}

.blog-single-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}

.blog-single-main {
  min-width: 0;
}

.blog-content-body {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text);
}

.blog-content-body h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 48px 0 20px;
  color: var(--text);
}

.blog-content-body h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 36px 0 16px;
  color: var(--text);
}

.blog-content-body p {
  margin: 0 0 24px;
}

.blog-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 32px 0;
}

.blog-content-body a {
  color: var(--accent);
  text-decoration: underline;
}

.blog-content-body ul,
.blog-content-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.blog-content-body li {
  margin-bottom: 12px;
}

.blog-content-body blockquote {
  margin: 32px 0;
  padding: 24px 32px;
  background: var(--card-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 16px 16px 0;
  font-style: italic;
  color: var(--muted);
}

.blog-content-body code {
  padding: 2px 8px;
  background: var(--surface2);
  border-radius: 6px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
}

.blog-content-body pre {
  padding: 24px;
  background: #1e1e1e;
  border-radius: 16px;
  overflow-x: auto;
  margin: 32px 0;
}

.blog-content-body pre code {
  padding: 0;
  background: transparent;
}

/* Tags */
.blog-single-tags {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0;
  margin-top: 40px;
  border-top: 1px solid var(--card-border);
}

.tags-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
}

.tags-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag-link {
  padding: 6px 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 50px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all .3s ease;
}

.tag-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Share */
.blog-single-share {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--card-border);
}

.share-label {
  font-weight: 600;
  color: var(--text);
}

.share-buttons {
  display: flex;
  gap: 10px;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all .3s ease;
}

.share-btn:hover {
  transform: translateY(-2px);
}

.share-facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}

.share-twitter:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

.share-linkedin:hover {
  background: #0077b5;
  border-color: #0077b5;
  color: #fff;
}

.share-copy:hover,
.share-copy.copied {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Author Box */
.blog-author-box {
  display: flex;
  gap: 24px;
  padding: 32px;
  margin-top: 40px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
}

.author-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.author-content h4 {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 4px;
}

.author-content .author-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
}

.author-bio {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Sidebar */
.blog-single-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-sidebar-card {
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
}

.blog-sidebar-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--text);
}

.blog-sidebar-card h3 i {
  color: var(--accent);
}

/* Table of Contents */
.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toc-link {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 8px;
  transition: all .3s ease;
}

.toc-link:hover {
  background: var(--surface2);
  color: var(--accent);
}

.toc-h3 {
  padding-left: 24px;
  font-size: 13px;
}

/* Related Posts */
.related-posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.related-post-item {
  display: flex;
  gap: 12px;
  text-decoration: none;
  transition: all .3s ease;
}

.related-post-item:hover h4 {
  color: var(--accent);
}

.related-post-thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
}

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

.related-post-content h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
  line-height: 1.4;
  transition: color .3s ease;
}

.related-post-date {
  font-size: 12px;
  color: var(--muted);
}

/* Sidebar CTA */
.blog-sidebar-cta {
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.15));
  border-color: rgba(99,102,241,.3);
}

.blog-sidebar-cta h3 {
  margin-bottom: 12px;
}

.blog-sidebar-cta p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
}

/* Navigation */
.blog-navigation-section {
  padding: 60px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--card-border);
}

.blog-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}

.blog-nav-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  text-decoration: none;
  transition: all .3s ease;
}

.blog-nav-item:hover {
  border-color: rgba(99,102,241,.3);
  transform: translateY(-4px);
}

.blog-nav-prev {
  text-align: left;
}

.blog-nav-next {
  text-align: right;
}

.blog-nav-item .nav-direction {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.blog-nav-next .nav-direction {
  justify-content: flex-end;
}

.blog-nav-item .nav-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.blog-nav-empty {
  background: transparent;
  border: 1px dashed var(--card-border);
}

.blog-nav-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 80px;
  height: 80px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: all .3s ease;
}

.blog-nav-all:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.blog-nav-all i {
  font-size: 20px;
}

/* ============================================
   BLOG DARK MODE
   ============================================ */

[data-theme="dark"] .blog-archive-hero,
[data-theme="dark"] .blog-single-hero {
  background-color: var(--bg);
}

/* ============================================
   BLOG LIGHT MODE
   ============================================ */

[data-theme="light"] .blog-archive-hero-badge,
[data-theme="light"] .blog-single-category {
  background: rgba(99,102,241,.1);
  border-color: rgba(99,102,241,.2);
  color: var(--accent);
}

[data-theme="light"] .blog-archive-hero-title,
[data-theme="light"] .blog-single-title {
  color: #fff;
}

[data-theme="light"] .blog-archive-hero-desc,
[data-theme="light"] .blog-back-link,
[data-theme="light"] .blog-single-author .post-date,
[data-theme="light"] .reading-time {
  color: rgba(255,255,255,.8);
}

[data-theme="light"] .blog-single-author .author-name {
  color: #fff;
}

[data-theme="light"] .blog-card {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .blog-card:hover {
  border-color: var(--accent);
}

[data-theme="light"] .blog-cat-btn {
  background: #fff;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .blog-sidebar-card,
[data-theme="light"] .blog-author-box {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .blog-nav-item {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .blog-nav-all {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .blog-navigation-section {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .tag-link,
[data-theme="light"] .share-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .blog-content-body blockquote {
  background: #f8fafc;
}

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

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

  .blog-card-featured {
    grid-column: span 2;
    grid-row: span 1;
  }

  .blog-single-layout {
    grid-template-columns: 1fr;
  }

  .blog-single-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .blog-sidebar-card {
    flex: 1;
    min-width: 280px;
  }

  .blog-toc {
    display: none;
  }
}

@media (max-width: 768px) {
  .blog-archive-hero,
  .blog-single-hero {
    min-height: auto;
    padding: 120px 0 60px;
  }

  .blog-archive-grid {
    grid-template-columns: 1fr;
  }

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

  .blog-categories-filter {
    gap: 8px;
  }

  .blog-cat-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .blog-single-meta {
    flex-direction: column;
    gap: 16px;
  }

  .blog-author-box {
    flex-direction: column;
    text-align: center;
  }

  .blog-single-share {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-navigation {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-nav-prev,
  .blog-nav-next {
    text-align: center;
  }

  .blog-nav-item .nav-direction {
    justify-content: center;
  }

  .blog-nav-all {
    order: -1;
    width: 100%;
    height: auto;
    padding: 16px;
    border-radius: 12px;
  }
}

/* ===================================================================
   SIMPLIO CRM - PREMIUM HERO & MODULES
   =================================================================== */

/* ----- CRM Hero Section ----- */
.crm-hero {
  position: relative;
  padding: 140px 0 100px;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.crm-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.crm-hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-dark) 0%, #0a0f1e 100%);
}

.crm-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.crm-hero-orb-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -100px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
  animation: crmOrbFloat 20s ease-in-out infinite;
}

.crm-hero-orb-2 {
  width: 500px;
  height: 500px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
  animation: crmOrbFloat 25s ease-in-out infinite reverse;
}

@keyframes crmOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 30px) scale(0.95); }
}

.crm-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.crm-hero-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Trust Badges */
.crm-trust-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.crm-badge-main {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #a5b4fc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.crm-badge-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #34d399;
}

/* Hero Title */
.crm-hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #fff;
}

.crm-title-gradient {
  display: block;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.crm-title-highlight {
  display: inline-block;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.crm-title-highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 2px;
  opacity: 0.6;
}

.crm-hero-desc {
  font-size: 19px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 28px;
  max-width: 540px;
}

/* Industry Tags */
.crm-industries {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.crm-industry-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.crm-industry-tag:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
}

.crm-industry-tag i {
  font-size: 12px;
  opacity: 0.7;
}

.crm-industry-more {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

/* CTA Buttons */
.crm-hero-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.crm-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  border-radius: 14px;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.4s ease;
}

.crm-btn-primary .crm-btn-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transition: all 0.4s ease;
}

.crm-btn-primary:hover .crm-btn-bg {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.crm-btn-primary .crm-btn-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.crm-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.crm-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.crm-btn-secondary .crm-btn-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

/* Video Button */
.crm-btn-video {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px 14px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 60px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.crm-btn-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.crm-btn-video:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
}

.crm-btn-video:hover::before {
  opacity: 1;
}

.crm-btn-video-icon {
  position: relative;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.crm-btn-video-icon i {
  color: #fff;
  font-size: 1rem;
  margin-left: 3px;
}

.crm-btn-video:hover .crm-btn-video-icon {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
}

.crm-btn-video-text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.crm-btn-video-pulse {
  position: absolute;
  top: 50%;
  left: 28px;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.crm-btn-video-pulse::before,
.crm-btn-video-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.4);
  animation: videoPulse 2s ease-out infinite;
}

.crm-btn-video-pulse::after {
  animation-delay: 1s;
}

@keyframes videoPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Hero Stats */
.crm-hero-stats {
  display: flex;
  gap: 32px;
}

.crm-stat {
  display: flex;
  align-items: center;
  gap: 14px;
}

.crm-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a5b4fc;
  font-size: 18px;
}

.crm-stat-content {
  display: flex;
  flex-direction: column;
}

.crm-stat-number {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.crm-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

/* ----- Dashboard Mockup ----- */
.crm-hero-visual {
  position: relative;
}

.crm-dashboard-mockup {
  position: relative;
  background: rgba(15, 20, 35, 0.9);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 50px 100px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
}

.crm-browser-frame {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.crm-browser-dots {
  display: flex;
  gap: 8px;
}

.crm-browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.crm-browser-dots span:nth-child(1) { background: #ff5f57; }
.crm-browser-dots span:nth-child(2) { background: #ffbd2e; }
.crm-browser-dots span:nth-child(3) { background: #28ca42; }

.crm-browser-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.crm-browser-url i {
  color: #10b981;
  font-size: 11px;
}

/* Dashboard Content */
.crm-dashboard-content {
  display: flex;
  min-height: 360px;
}

.crm-dash-sidebar {
  width: 60px;
  background: rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.crm-dash-logo {
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
}

.crm-dash-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.crm-dash-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-dash-nav a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.crm-dash-nav a:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

.crm-dash-nav a.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.2));
  color: #fff;
}

/* Main Dashboard Area */
.crm-dash-main {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crm-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.crm-mini-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-mini-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.crm-mini-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.crm-mini-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
}

.crm-mini-trend.up {
  color: #10b981;
}

.crm-mini-trend.down {
  color: #ef4444;
}

/* Chart */
.crm-dash-chart {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  flex: 1;
}

.crm-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
}

.crm-chart-header span:first-child {
  color: #fff;
  font-weight: 600;
}

.crm-chart-period {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

.crm-chart-svg {
  width: 100%;
  height: 80px;
}

.crm-chart-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: crmChartDraw 2s ease forwards 0.5s;
}

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

/* Activity Feed */
.crm-dash-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.crm-activity-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.crm-activity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.crm-activity-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.crm-activity-action {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.crm-activity-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* Floating Elements */
.crm-float-notification {
  position: absolute;
  top: 80px;
  right: -30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9));
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
  animation: crmFloatPulse 3s ease-in-out infinite;
  z-index: 10;
}

.crm-float-notification i {
  color: #fff;
  font-size: 16px;
}

.crm-float-notification span {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.crm-float-badge {
  position: absolute;
  bottom: 100px;
  left: -20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(99, 102, 241, 0.9);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
  animation: crmFloatPulse 3s ease-in-out infinite 1.5s;
  z-index: 10;
}

.crm-float-badge i {
  color: #fbbf24;
  font-size: 14px;
}

.crm-float-badge span {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

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

.crm-visual-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* ===== CRM MODULES SECTION ===== */
.crm-modules-section {
  padding: 70px 0;
  background: linear-gradient(180deg, rgba(5, 8, 22, 1) 0%, rgba(10, 17, 40, 1) 100%);
  position: relative;
}

.crm-section-header {
  margin-bottom: 70px;
}

.crm-section-badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #a5b4fc;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.crm-section-title {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

.crm-section-desc {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto;
}

/* Modules Grid */
.crm-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.crm-module-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.crm-module-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.crm-module-card:hover .crm-module-glow {
  opacity: 1;
}

.crm-module-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.crm-module-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.3);
  position: relative;
  z-index: 1;
}

.crm-module-icon-cyan {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
  box-shadow: 0 12px 30px rgba(6, 182, 212, 0.3);
}

.crm-module-icon-orange {
  background: linear-gradient(135deg, #f97316, #fb923c);
  box-shadow: 0 12px 30px rgba(249, 115, 22, 0.3);
}

.crm-module-icon-green {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
}

.crm-module-icon-purple {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3);
}

.crm-module-icon-red {
  background: linear-gradient(135deg, #ef4444, #f87171);
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.3);
}

.crm-module-icon-emerald {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
}

.crm-module-icon-indigo {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.3);
}

.crm-module-icon-rose {
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.3);
}

.crm-module-content {
  position: relative;
  z-index: 1;
}

.crm-module-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.crm-module-content > p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
}

.crm-module-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-module-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.crm-module-features li i {
  color: #10b981;
  font-size: 12px;
}

/* Modules Connection Visual */
.crm-modules-connection {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.crm-connection-center {
  position: relative;
  width: 200px;
  height: 200px;
}

.crm-connection-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
  border: 2px solid rgba(99, 102, 241, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}

.crm-connection-core i {
  font-size: 28px;
  color: #a5b4fc;
}

.crm-connection-core span {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.crm-connection-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(99, 102, 241, 0.3);
  animation: crmRingSpin 30s linear infinite;
}

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

/* ----- CRM Responsive ----- */
@media (max-width: 1200px) {
  .crm-hero-wrapper {
    gap: 50px;
  }

  .crm-hero-title {
    font-size: 48px;
  }

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

@media (max-width: 992px) {
  .crm-hero {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .crm-hero-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .crm-hero-content {
    text-align: center;
  }

  .crm-trust-row {
    justify-content: center;
  }

  .crm-hero-title {
    font-size: 42px;
  }

  .crm-hero-desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .crm-industries {
    justify-content: center;
  }

  .crm-hero-actions {
    justify-content: center;
  }

  .crm-hero-stats {
    justify-content: center;
    flex-wrap: wrap;
  }

  .crm-hero-visual {
    max-width: 600px;
    margin: 0 auto;
  }

  .crm-float-notification {
    right: -10px;
  }

  .crm-float-badge {
    left: -10px;
  }

  .crm-section-title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .crm-hero-title {
    font-size: 34px;
  }

  .crm-hero-desc {
    font-size: 17px;
  }

  .crm-hero-stats {
    gap: 20px;
  }

  .crm-stat {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .crm-modules-grid {
    grid-template-columns: 1fr;
  }

  .crm-module-card {
    padding: 28px;
  }

  .crm-dashboard-content {
    min-height: 280px;
  }

  .crm-dash-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .crm-mini-stat {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
  }

  .crm-float-notification,
  .crm-float-badge {
    display: none;
  }

  .crm-connection-center {
    width: 150px;
    height: 150px;
  }

  .crm-connection-core {
    width: 90px;
    height: 90px;
  }

  .crm-connection-core i {
    font-size: 22px;
  }

  .crm-connection-core span {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .crm-hero-title {
    font-size: 28px;
  }

  .crm-hero-actions {
    flex-direction: column;
  }

  .crm-btn-primary,
  .crm-btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .crm-industry-tag {
    padding: 6px 12px;
    font-size: 12px;
  }

  .crm-section-title {
    font-size: 28px;
  }
}

/* ===== CRM INDUSTRIES SECTION ===== */
.crm-industries-section {
  padding: 70px 0;
  background: linear-gradient(180deg, rgba(10, 17, 40, 1) 0%, rgba(5, 8, 22, 1) 100%);
  position: relative;
}

.crm-industries-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

/* Industry Tabs Navigation */
.crm-industry-tabs {
  margin-top: 60px;
}

.crm-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.crm-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.crm-tab-btn:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.crm-tab-btn.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
  border-color: rgba(99, 102, 241, 0.4);
  color: #fff;
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.2);
}

.crm-tab-btn i {
  font-size: 18px;
}

/* Tab Panels */
.crm-tabs-content {
  position: relative;
}

.crm-tab-panel {
  display: none;
  animation: crmTabFadeIn 0.4s ease;
}

.crm-tab-panel.active {
  display: block;
}

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

.crm-tab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Tab Info Side */
.crm-tab-info {
  padding-right: 20px;
}

.crm-tab-icon-large {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  margin-bottom: 28px;
  box-shadow: 0 15px 40px rgba(99, 102, 241, 0.3);
}

.crm-tab-icon-large.crm-icon-orange {
  background: linear-gradient(135deg, #f97316, #fb923c);
  box-shadow: 0 15px 40px rgba(249, 115, 22, 0.3);
}

.crm-tab-icon-large.crm-icon-cyan {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
  box-shadow: 0 15px 40px rgba(6, 182, 212, 0.3);
}

.crm-tab-icon-large.crm-icon-green {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.3);
}

.crm-tab-icon-large.crm-icon-purple {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  box-shadow: 0 15px 40px rgba(139, 92, 246, 0.3);
}

.crm-tab-info h3 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

.crm-tab-info > p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 32px;
}

/* Tab Features */
.crm-tab-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.crm-tab-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.crm-tab-feature > i {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a5b4fc;
  font-size: 18px;
  flex-shrink: 0;
}

.crm-tab-feature > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-tab-feature strong {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.crm-tab-feature span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

/* Tab Visual Side - Mockups */
.crm-tab-visual {
  position: relative;
}

.crm-tab-mockup {
  background: rgba(15, 20, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.crm-mockup-header {
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.crm-mockup-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* Kanban Mockup (Imobiliare) */
.crm-mockup-kanban {
  display: flex;
  gap: 12px;
  padding: 20px;
  overflow-x: auto;
}

.crm-kanban-col {
  min-width: 160px;
  flex: 1;
}

.crm-kanban-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.crm-kanban-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.crm-kanban-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-2px);
}

.crm-kanban-card.highlight {
  border-left: 3px solid #f97316;
}

.crm-kanban-card.success {
  border-left: 3px solid #10b981;
}

.crm-kanban-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.crm-kanban-prop {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.crm-kanban-price {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #a5b4fc;
}

/* Dashboard Mockup (Producție) */
.crm-mockup-dashboard {
  padding: 20px;
}

.crm-dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.crm-dash-widget {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
}

.crm-widget-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.crm-widget-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.crm-widget-trend {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

.crm-widget-trend.up {
  color: #10b981;
}

.crm-widget-sub {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

.crm-dash-clients {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  padding: 4px;
}

.crm-client-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 8px;
}

.crm-client-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.crm-client-name {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.crm-client-val {
  font-size: 13px;
  font-weight: 600;
  color: #a5b4fc;
}

/* Projects Mockup (Servicii) */
.crm-mockup-projects {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.crm-project-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px;
}

.crm-project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.crm-project-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.crm-project-client {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.crm-project-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.crm-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.crm-progress-bar.cyan {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.crm-project-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.crm-project-footer span:first-child {
  color: rgba(255, 255, 255, 0.5);
}

.crm-project-footer span:last-child {
  font-weight: 600;
  color: #a5b4fc;
}

/* Trips Mockup (Logistică) */
.crm-mockup-trips {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-trip-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.crm-trip-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.crm-trip-status.active {
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  animation: crmPulse 2s ease-in-out infinite;
}

.crm-trip-status.loading {
  background: #f97316;
}

.crm-trip-status.completed {
  background: rgba(255, 255, 255, 0.3);
}

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

.crm-trip-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crm-trip-route {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.crm-trip-driver {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.crm-trip-eta {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

/* Customer Mockup (Retail) */
.crm-mockup-customer {
  padding: 24px;
}

.crm-customer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.crm-customer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.crm-customer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-customer-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.crm-customer-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  width: fit-content;
}

.crm-customer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.crm-cust-stat {
  text-align: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.crm-cust-val {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.crm-cust-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Industries CTA */
.crm-industries-cta {
  margin-top: 70px;
  text-align: center;
  padding: 50px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
}

.crm-industries-cta p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
}

/* Why Choose Us Section */
.crm-why-us-section {
  padding: 70px 0;
  background: linear-gradient(180deg, var(--dark) 0%, rgba(15, 20, 35, 1) 100%);
  position: relative;
}

.crm-why-us-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.5), transparent);
}

.crm-why-us-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.crm-why-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 40px 30px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.crm-why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.crm-why-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(99, 102, 241, 0.2);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.crm-why-card:hover::before {
  opacity: 1;
}

.crm-why-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 24px;
  color: #6366f1;
  transition: all 0.3s ease;
}

.crm-why-card:hover .crm-why-icon {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.crm-why-icon-cyan {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.05));
  color: #22d3ee;
}

.crm-why-card:hover .crm-why-icon-cyan {
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3);
}

.crm-why-icon-green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
  color: #10b981;
}

.crm-why-card:hover .crm-why-icon-green {
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.crm-why-icon-orange {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.05));
  color: #f97316;
}

.crm-why-card:hover .crm-why-icon-orange {
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3);
}

.crm-why-icon-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.05));
  color: #a855f7;
}

.crm-why-card:hover .crm-why-icon-purple {
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}

.crm-why-icon-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05));
  color: #ef4444;
}

.crm-why-card:hover .crm-why-icon-red {
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3);
}

.crm-why-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.crm-why-card p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin: 0;
}

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

@media (max-width: 768px) {
  .crm-why-us-section {
    padding: 70px 0;
  }

  .crm-why-us-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  .crm-why-card {
    padding: 30px 24px;
  }
}

/* ===== CRM TESTIMONIALS SECTION ===== */
.crm-testimonials-section {
  padding: 70px 0;
  background: linear-gradient(180deg, var(--dark) 0%, rgba(15, 20, 35, 1) 100%);
  position: relative;
  overflow: hidden;
}

.crm-testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

.crm-rating-aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
}

.crm-rating-stars {
  display: flex;
  gap: 4px;
}

.crm-rating-stars i {
  color: #fbbf24;
  font-size: 1.25rem;
}

.crm-rating-value {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

.crm-rating-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
}

.crm-testimonials-slider {
  position: relative;
  overflow: hidden;
  margin: 0 -12px;
  padding: 0 12px;
}

.crm-testimonials-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.crm-testimonial-card {
  flex: 0 0 calc(50% - 12px);
  min-width: calc(50% - 12px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px;
  position: relative;
  transition: all 0.3s ease;
}

.crm-testimonial-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-4px);
}

.crm-testimonial-quote {
  position: absolute;
  top: 30px;
  right: 30px;
  opacity: 0.1;
}

.crm-testimonial-quote i {
  font-size: 3rem;
  color: #6366f1;
}

.crm-testimonial-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

.crm-testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.crm-author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}

.crm-author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-author-info strong {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
}

.crm-author-info span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

.crm-testimonial-rating {
  display: flex;
  gap: 4px;
}

.crm-testimonial-rating i {
  color: #fbbf24;
  font-size: 0.9rem;
}

.crm-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.crm-slider-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crm-slider-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.5);
  transform: scale(1.05);
}

.crm-slider-dots {
  display: flex;
  gap: 8px;
}

.crm-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.crm-slider-dot.active {
  background: #6366f1;
  transform: scale(1.2);
}

.crm-slider-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.4);
}

/* ===== CRM ROMANIA SECTION ===== */
.crm-romania-section {
  padding: 100px 0;
  background: linear-gradient(180deg, rgba(15, 20, 35, 1) 0%, rgba(20, 25, 45, 1) 100%);
  position: relative;
  overflow: hidden;
}

.crm-romania-section::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 45, 114, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.crm-romania-section::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(252, 209, 22, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.crm-badge-flag {
  width: 20px;
  height: 14px;
  margin-right: 8px;
  border-radius: 2px;
}

.crm-romania-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 60px;
}

.crm-romania-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.crm-romania-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #002d72, #fcd116);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.crm-romania-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-6px);
}

.crm-romania-card:hover::before {
  opacity: 1;
}

.crm-romania-card-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #002d72, #0047ab);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(0, 45, 114, 0.3);
}

.crm-romania-card-icon i {
  font-size: 1.5rem;
  color: #fff;
}

.crm-romania-icon-cyan {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  box-shadow: 0 12px 30px rgba(6, 182, 212, 0.3);
}

.crm-romania-icon-green {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
}

.crm-romania-icon-purple {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.3);
}

.crm-romania-card-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.crm-romania-card-content > p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.crm-romania-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-romania-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

.crm-romania-features li i {
  color: #10b981;
  font-size: 0.8rem;
  margin-top: 4px;
  flex-shrink: 0;
}

.crm-romania-card-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, rgba(0, 45, 114, 0.2), rgba(0, 71, 171, 0.15));
  border: 1px solid rgba(0, 71, 171, 0.3);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.crm-badge-green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.crm-badge-purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.1));
  border-color: rgba(139, 92, 246, 0.3);
  color: #a78bfa;
}

.crm-romania-card-logos {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.crm-romania-card-logos span {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.crm-romania-bottom {
  margin-top: 50px;
}

.crm-romania-bottom-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: linear-gradient(135deg, rgba(252, 209, 22, 0.08), rgba(0, 45, 114, 0.08));
  border: 1px solid rgba(252, 209, 22, 0.15);
  border-radius: 20px;
  padding: 28px 32px;
}

.crm-romania-bottom-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #fcd116, #f59e0b);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.crm-romania-bottom-icon i {
  font-size: 1.25rem;
  color: #1a1a2e;
}

.crm-romania-bottom-text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.crm-romania-bottom-text strong {
  color: #fcd116;
}

/* Romania Section Responsive */
@media (max-width: 1024px) {
  .crm-romania-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .crm-romania-section {
    padding: 80px 0;
  }

  .crm-romania-card {
    padding: 28px;
  }

  .crm-romania-card-icon {
    width: 56px;
    height: 56px;
  }

  .crm-romania-card-icon i {
    font-size: 1.3rem;
  }

  .crm-romania-card-content h3 {
    font-size: 1.2rem;
  }

  .crm-romania-card-badge {
    position: static;
    display: inline-block;
    margin-bottom: 16px;
  }

  .crm-romania-bottom-content {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .crm-romania-bottom-icon {
    margin: 0 auto;
  }
}

/* ===== CRM FAQ SECTION ===== */
.crm-faq-section {
  padding: 70px 0;
  background: linear-gradient(180deg, rgba(15, 20, 35, 1) 0%, var(--dark) 100%);
  position: relative;
}

.crm-faq-section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

.crm-faq-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  margin-top: 60px;
  align-items: start;
}

.crm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crm-faq-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.crm-faq-item:hover {
  border-color: rgba(99, 102, 241, 0.3);
}

.crm-faq-item.active {
  background: rgba(99, 102, 241, 0.05);
  border-color: rgba(99, 102, 241, 0.3);
}

.crm-faq-question {
  width: 100%;
  padding: 24px 28px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
}

.crm-faq-question span {
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
}

.crm-faq-question i {
  color: #6366f1;
  font-size: 0.9rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

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

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

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

.crm-faq-answer p {
  padding: 0 28px 24px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.8;
}

.crm-faq-cta {
  position: sticky;
  top: 120px;
}

.crm-faq-cta-content {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
}

.crm-faq-cta-content i {
  font-size: 3rem;
  color: #6366f1;
  margin-bottom: 20px;
}

.crm-faq-cta-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.crm-faq-cta-content p {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 28px;
  font-size: 0.95rem;
}

/* Testimonials Responsive */
@media (max-width: 1024px) {
  .crm-testimonial-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .crm-testimonials-section {
    padding: 80px 0;
  }

  .crm-rating-aggregate {
    flex-wrap: wrap;
    gap: 8px;
  }

  .crm-rating-value {
    font-size: 1.6rem;
  }

  .crm-testimonial-card {
    padding: 30px 24px;
  }

  .crm-testimonial-text {
    font-size: 1rem;
  }

  .crm-author-avatar {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }

  .crm-slider-btn {
    width: 40px;
    height: 40px;
  }
}

/* Comparison Responsive */
@media (max-width: 900px) {
  .crm-comparison-table {
    margin: 50px -20px 0;
    border-radius: 16px;
  }

  .crm-comparison-header,
  .crm-comparison-row {
    grid-template-columns: 1fr;
  }

  .crm-comparison-header > div {
    padding: 16px 20px;
    justify-content: center;
    text-align: center;
  }

  .crm-comparison-header .crm-comparison-feature {
    display: none;
  }

  .crm-comparison-feature {
    padding: 20px;
    background: rgba(99, 102, 241, 0.05);
    justify-content: center;
    text-align: center;
  }

  .crm-comparison-simplio,
  .crm-comparison-others {
    padding: 16px 20px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .crm-comparison-simplio::before {
    content: 'Simplio:';
    font-weight: 600;
    color: #6366f1;
  }

  .crm-comparison-others::before {
    content: 'Altele:';
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
  }
}

@media (max-width: 768px) {
  .crm-comparison-section {
    padding: 80px 0;
  }
}

/* FAQ Responsive */
@media (max-width: 1024px) {
  .crm-faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .crm-faq-cta {
    position: static;
    order: -1;
  }

  .crm-faq-cta-content {
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .crm-faq-section {
    padding: 80px 0;
  }

  .crm-faq-grid {
    margin-top: 40px;
  }

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

  .crm-faq-question span {
    font-size: 0.95rem;
  }

  .crm-faq-answer p {
    padding: 0 20px 20px;
    font-size: 0.9rem;
  }

  .crm-faq-cta-content i {
    font-size: 2.5rem;
  }

  .crm-faq-cta-content h3 {
    font-size: 1.3rem;
  }
}

/* ===== CRM VIDEO MODAL ===== */
.crm-video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.crm-video-modal.active {
  opacity: 1;
  visibility: visible;
}

.crm-video-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}

.crm-video-modal-content {
  position: relative;
  width: 90%;
  max-width: 1000px;
  z-index: 1;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.crm-video-modal.active .crm-video-modal-content {
  transform: scale(1) translateY(0);
}

.crm-video-modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.crm-video-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg);
}

.crm-video-modal-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.crm-video-modal-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  .crm-video-modal-content {
    width: 95%;
  }

  .crm-video-modal-close {
    top: -45px;
    right: 5px;
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .crm-video-modal-wrapper {
    border-radius: 12px;
  }
}

/* Case Studies Section */
.crm-case-studies-section {
  padding: 70px 0;
  background: linear-gradient(180deg, rgba(15, 20, 35, 1) 0%, var(--dark) 100%);
  position: relative;
}

.crm-case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.crm-case-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.crm-case-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.crm-case-card[data-color="violet"]::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.crm-case-card[data-color="orange"]::before { background: linear-gradient(90deg, #f97316, #fb923c); }
.crm-case-card[data-color="cyan"]::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.crm-case-card[data-color="green"]::before { background: linear-gradient(90deg, #10b981, #34d399); }
.crm-case-card[data-color="purple"]::before { background: linear-gradient(90deg, #a855f7, #c084fc); }

.crm-case-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(99, 102, 241, 0.2);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.crm-case-card:hover::before {
  opacity: 1;
}

.crm-case-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.crm-case-industry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
}

.crm-case-card[data-color="orange"] .crm-case-industry {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.crm-case-card[data-color="cyan"] .crm-case-industry {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
}

.crm-case-card[data-color="green"] .crm-case-industry {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.crm-case-card[data-color="purple"] .crm-case-industry {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.crm-case-client {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
}

.crm-case-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.4;
}

.crm-case-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.crm-tech-tag {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.crm-case-results {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crm-case-results li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.crm-case-results li i {
  color: #10b981;
  font-size: 12px;
  margin-top: 3px;
  flex-shrink: 0;
}

.crm-case-testimonial {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid rgba(99, 102, 241, 0.5);
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 0 10px 10px 0;
}

.crm-case-testimonial p {
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0 0 12px;
}

.crm-case-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crm-case-author strong {
  font-size: 13px;
  color: #fff;
}

.crm-case-author span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.crm-case-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6366f1;
  text-decoration: none;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
}

.crm-case-link:hover {
  color: #818cf8;
  gap: 12px;
}

.crm-case-studies-cta {
  text-align: center;
  margin-top: 50px;
}

.crm-case-studies-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.5);
}

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

@media (max-width: 768px) {
  .crm-case-studies-section {
    padding: 70px 0;
  }

  .crm-case-studies-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  .crm-case-header {
    flex-direction: column;
  }

  .crm-case-client {
    text-align: left;
  }
}

/* ============================================
   CRM PAGE SECTIONS - Light Mode
   ============================================ */

/* Hero Section - Light */
[data-theme="light"] .crm-hero {
  background: #ffffff;
}

[data-theme="light"] .crm-hero-gradient {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

[data-theme="light"] .crm-hero-orb-1 {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
}

[data-theme="light"] .crm-hero-orb-2 {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
}

[data-theme="light"] .crm-hero-grid-pattern {
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.06) 1px, transparent 1px);
}

[data-theme="light"] .crm-hero-title {
  color: #050816;
}

[data-theme="light"] .crm-title-gradient {
  background: linear-gradient(135deg, #050816 0%, rgba(5, 8, 22, 0.8) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="light"] .crm-hero-desc {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-badge-main {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366f1;
}

[data-theme="light"] .crm-badge-small {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #059669;
}

[data-theme="light"] .crm-industry-tag {
  background: rgba(5, 8, 22, 0.04);
  border-color: rgba(5, 8, 22, 0.1);
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-industry-tag:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.25);
  color: #6366f1;
}

[data-theme="light"] .crm-industry-more {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

[data-theme="light"] .crm-btn-secondary {
  background: rgba(5, 8, 22, 0.04);
  border-color: rgba(5, 8, 22, 0.12);
}

[data-theme="light"] .crm-btn-secondary:hover {
  background: rgba(5, 8, 22, 0.08);
  border-color: rgba(5, 8, 22, 0.2);
}

[data-theme="light"] .crm-btn-secondary .crm-btn-content {
  color: #050816;
}

[data-theme="light"] .crm-btn-video {
  background: rgba(5, 8, 22, 0.03);
  border-color: rgba(5, 8, 22, 0.12);
}

[data-theme="light"] .crm-btn-video:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="light"] .crm-btn-video-text {
  color: #050816;
}

[data-theme="light"] .crm-btn-video-pulse::before,
[data-theme="light"] .crm-btn-video-pulse::after {
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="light"] .crm-stat-icon {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

[data-theme="light"] .crm-stat-number {
  color: #050816;
}

[data-theme="light"] .crm-stat-label {
  color: rgba(5, 8, 22, 0.5);
}

/* Dashboard Mockup - Light */
[data-theme="light"] .crm-dashboard-mockup {
  background: #ffffff;
  border-color: rgba(5, 8, 22, 0.1);
  box-shadow:
    0 50px 100px rgba(5, 8, 22, 0.15),
    0 0 0 1px rgba(5, 8, 22, 0.05) inset;
}

[data-theme="light"] .crm-browser-frame {
  background: rgba(5, 8, 22, 0.03);
  border-bottom-color: rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .crm-browser-url {
  background: rgba(5, 8, 22, 0.04);
  color: rgba(5, 8, 22, 0.6);
}

[data-theme="light"] .crm-dash-sidebar {
  background: rgba(5, 8, 22, 0.02);
  border-right-color: rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .crm-dash-nav a {
  color: rgba(5, 8, 22, 0.4);
}

[data-theme="light"] .crm-dash-nav a:hover {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

[data-theme="light"] .crm-dash-nav a.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
  color: #6366f1;
}

[data-theme="light"] .crm-mini-stat {
  background: rgba(5, 8, 22, 0.02);
  border-color: rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .crm-mini-label {
  color: rgba(5, 8, 22, 0.5);
}

[data-theme="light"] .crm-mini-value {
  color: #050816;
}

[data-theme="light"] .crm-mini-trend {
  color: #059669;
}

[data-theme="light"] .crm-dash-chart {
  background: rgba(5, 8, 22, 0.02);
  border-color: rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .crm-chart-header span {
  color: #050816;
}

[data-theme="light"] .crm-chart-period {
  color: rgba(5, 8, 22, 0.5);
}

[data-theme="light"] .crm-dash-activity {
  background: rgba(5, 8, 22, 0.02);
  border-color: rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .crm-activity-name {
  color: #050816;
}

[data-theme="light"] .crm-activity-action {
  color: rgba(5, 8, 22, 0.6);
}

[data-theme="light"] .crm-activity-time {
  color: rgba(5, 8, 22, 0.4);
}

[data-theme="light"] .crm-float-notification {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 10px 40px rgba(16, 185, 129, 0.15);
}

[data-theme="light"] .crm-float-notification i {
  color: #059669;
}

[data-theme="light"] .crm-float-notification span {
  color: #047857;
}

[data-theme="light"] .crm-float-badge {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .crm-float-badge i {
  color: #f59e0b;
}

[data-theme="light"] .crm-float-badge span {
  color: #4f46e5;
}

[data-theme="light"] .crm-visual-glow {
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
}

/* Modules Section - Light */
[data-theme="light"] .crm-modules-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

[data-theme="light"] .crm-module-card {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .crm-module-card:hover {
  background: #ffffff;
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .crm-module-content h3 {
  color: #050816;
}

[data-theme="light"] .crm-module-content p {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-module-features li {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-modules-connection {
  background: rgba(99, 102, 241, 0.03);
}

[data-theme="light"] .crm-connection-core {
  background: #ffffff;
  border-color: rgba(5, 8, 22, 0.1);
  box-shadow: 0 10px 40px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .crm-connection-core span {
  color: #050816;
}

/* Industries Section - Light */
[data-theme="light"] .crm-industries-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

[data-theme="light"] .crm-industries-section::before {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.2), transparent);
}

/* Industry Tabs - Light */
[data-theme="light"] .crm-tab-btn {
  background: rgba(5, 8, 22, 0.04);
  border-color: rgba(5, 8, 22, 0.08);
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-tab-btn:hover {
  background: rgba(5, 8, 22, 0.08);
  color: #050816;
}

[data-theme="light"] .crm-tab-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  color: #ffffff;
}

/* Tab Panel Content - Light */
[data-theme="light"] .crm-tab-panel {
  /* Tab panels inherit section background - no explicit styling needed */
}

[data-theme="light"] .crm-tab-info h3 {
  color: #050816;
}

[data-theme="light"] .crm-tab-info p {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-tab-icon-large {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .crm-tab-icon-large.crm-icon-orange {
  background: linear-gradient(135deg, #f97316, #fb923c);
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.25);
}

[data-theme="light"] .crm-tab-icon-large.crm-icon-cyan {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.25);
}

[data-theme="light"] .crm-tab-icon-large.crm-icon-green {
  background: linear-gradient(135deg, #10b981, #34d399);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .crm-tab-icon-large.crm-icon-purple {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.25);
}

[data-theme="light"] .crm-tab-feature > i {
  background: rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .crm-tab-feature strong {
  color: #050816;
}

[data-theme="light"] .crm-tab-feature span {
  color: rgba(5, 8, 22, 0.6);
}

/* Tab Mockups - Light */
[data-theme="light"] .crm-tab-mockup {
  background: #ffffff;
  border-color: rgba(5, 8, 22, 0.1);
  box-shadow: 0 20px 50px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .crm-mockup-header {
  background: rgba(5, 8, 22, 0.03);
  border-bottom-color: rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .crm-mockup-title {
  color: #050816;
}

[data-theme="light"] .crm-dash-widget {
  background: rgba(5, 8, 22, 0.02);
  border-color: rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .crm-widget-label {
  color: rgba(5, 8, 22, 0.6);
}

[data-theme="light"] .crm-widget-value {
  color: #050816;
}

[data-theme="light"] .crm-widget-sub {
  color: rgba(5, 8, 22, 0.5);
}

[data-theme="light"] .crm-client-row {
  border-bottom-color: rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .crm-client-name {
  color: #050816;
}

[data-theme="light"] .crm-client-val {
  color: rgba(5, 8, 22, 0.6);
}

[data-theme="light"] .crm-trip-route {
  color: #050816;
}

[data-theme="light"] .crm-trip-driver {
  color: rgba(5, 8, 22, 0.6);
}

[data-theme="light"] .crm-trip-eta {
  color: rgba(5, 8, 22, 0.5);
}

/* Industries CTA - Light */
[data-theme="light"] .crm-industries-cta {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .crm-industries-cta p {
  color: rgba(5, 8, 22, 0.7);
}

/* ===== TESTIMONIALS - Light Theme ===== */
[data-theme="light"] .crm-testimonials-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

[data-theme="light"] .crm-testimonials-section::before {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent);
}

[data-theme="light"] .crm-rating-value {
  color: #050816;
}

[data-theme="light"] .crm-rating-count {
  color: rgba(5, 8, 22, 0.5);
}

[data-theme="light"] .crm-testimonial-card {
  background: #fff;
  border-color: rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.05);
}

[data-theme="light"] .crm-testimonial-card:hover {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .crm-testimonial-text {
  color: rgba(5, 8, 22, 0.8);
}

[data-theme="light"] .crm-author-info strong {
  color: #050816;
}

[data-theme="light"] .crm-author-info span {
  color: rgba(5, 8, 22, 0.55);
}

[data-theme="light"] .crm-slider-btn {
  background: #fff;
  border-color: rgba(5, 8, 22, 0.1);
  color: #050816;
  box-shadow: 0 2px 8px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .crm-slider-btn:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="light"] .crm-slider-dot {
  background: rgba(5, 8, 22, 0.15);
}

[data-theme="light"] .crm-slider-dot:hover:not(.active) {
  background: rgba(5, 8, 22, 0.3);
}

/* ===== ROMANIA - Light Theme ===== */
[data-theme="light"] .crm-romania-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

[data-theme="light"] .crm-romania-section::before {
  background: radial-gradient(circle, rgba(0, 45, 114, 0.06) 0%, transparent 70%);
}

[data-theme="light"] .crm-romania-section::after {
  background: radial-gradient(circle, rgba(252, 209, 22, 0.04) 0%, transparent 70%);
}

[data-theme="light"] .crm-romania-card {
  background: #fff;
  border-color: rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.04);
}

[data-theme="light"] .crm-romania-card:hover {
  background: #fff;
  border-color: rgba(0, 45, 114, 0.2);
  box-shadow: 0 12px 40px rgba(0, 45, 114, 0.1);
}

[data-theme="light"] .crm-romania-card::before {
  background: linear-gradient(90deg, #002d72, #fcd116);
}

[data-theme="light"] .crm-romania-card-content h3 {
  color: #050816;
}

[data-theme="light"] .crm-romania-card-content > p {
  color: rgba(5, 8, 22, 0.65);
}

[data-theme="light"] .crm-romania-features li {
  color: rgba(5, 8, 22, 0.75);
}

[data-theme="light"] .crm-romania-card-badge {
  background: linear-gradient(135deg, rgba(0, 45, 114, 0.08), rgba(0, 71, 171, 0.05));
  border-color: rgba(0, 71, 171, 0.15);
  color: #0047ab;
}

[data-theme="light"] .crm-badge-green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.05));
  border-color: rgba(16, 185, 129, 0.2);
  color: #059669;
}

[data-theme="light"] .crm-badge-purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(124, 58, 237, 0.05));
  border-color: rgba(139, 92, 246, 0.2);
  color: #7c3aed;
}

[data-theme="light"] .crm-romania-card-logos {
  border-color: rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .crm-romania-card-logos span {
  background: rgba(5, 8, 22, 0.04);
  border-color: rgba(5, 8, 22, 0.1);
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-romania-bottom-content {
  background: linear-gradient(135deg, rgba(252, 209, 22, 0.06), rgba(0, 45, 114, 0.04));
  border-color: rgba(252, 209, 22, 0.2);
}

[data-theme="light"] .crm-romania-bottom-text p {
  color: rgba(5, 8, 22, 0.8);
}

[data-theme="light"] .crm-romania-bottom-text strong {
  color: #b45309;
}

/* ===== FAQ - Light Theme ===== */
[data-theme="light"] .crm-faq-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

[data-theme="light"] .crm-faq-section::before {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent);
}

[data-theme="light"] .crm-faq-item {
  background: #fff;
  border-color: rgba(5, 8, 22, 0.08);
  box-shadow: 0 2px 10px rgba(5, 8, 22, 0.03);
}

[data-theme="light"] .crm-faq-item:hover {
  border-color: rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .crm-faq-item.active {
  background: rgba(99, 102, 241, 0.03);
  border-color: rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .crm-faq-question span {
  color: #050816;
}

[data-theme="light"] .crm-faq-answer p {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-faq-cta-content {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.06));
  border-color: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .crm-faq-cta-content h3 {
  color: #050816;
}

[data-theme="light"] .crm-faq-cta-content p {
  color: rgba(5, 8, 22, 0.6);
}

/* Why Us & Case Studies - Light */
[data-theme="light"] .crm-why-us-section,
[data-theme="light"] .crm-case-studies-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

[data-theme="light"] .crm-why-us-section::before {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.3), transparent);
}

[data-theme="light"] .crm-section-title {
  color: #050816;
}

[data-theme="light"] .crm-section-desc {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-section-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

/* Why Us Cards - Light */
[data-theme="light"] .crm-why-card {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .crm-why-card::before {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

[data-theme="light"] .crm-why-card:hover {
  background: #ffffff;
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .crm-why-card h3 {
  color: #050816;
}

[data-theme="light"] .crm-why-card p {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-why-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04));
}

[data-theme="light"] .crm-why-icon-cyan {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.04));
}

[data-theme="light"] .crm-why-icon-green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
}

[data-theme="light"] .crm-why-icon-orange {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.04));
}

[data-theme="light"] .crm-why-icon-purple {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.04));
}

[data-theme="light"] .crm-why-icon-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
}

/* Case Study Cards - Light */
[data-theme="light"] .crm-case-card {
  background: #ffffff;
  border: 1px solid rgba(5, 8, 22, 0.08);
  box-shadow: 0 4px 20px rgba(5, 8, 22, 0.06);
}

[data-theme="light"] .crm-case-card:hover {
  background: #ffffff;
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(5, 8, 22, 0.1);
}

[data-theme="light"] .crm-case-client {
  color: rgba(5, 8, 22, 0.5);
}

[data-theme="light"] .crm-case-title {
  color: #050816;
}

[data-theme="light"] .crm-tech-tag {
  background: rgba(5, 8, 22, 0.04);
  border-color: rgba(5, 8, 22, 0.08);
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-case-results li {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-case-testimonial {
  background: rgba(99, 102, 241, 0.04);
  border-left-color: rgba(99, 102, 241, 0.4);
}

[data-theme="light"] .crm-case-testimonial p {
  color: rgba(5, 8, 22, 0.7);
}

[data-theme="light"] .crm-case-author strong {
  color: #050816;
}

[data-theme="light"] .crm-case-author span {
  color: rgba(5, 8, 22, 0.5);
}

[data-theme="light"] .crm-case-link {
  border-top-color: rgba(5, 8, 22, 0.08);
}

[data-theme="light"] .crm-case-studies-empty {
  color: rgba(5, 8, 22, 0.5);
}

/* Industries Responsive */
@media (max-width: 1024px) {
  .crm-tab-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .crm-tab-info {
    padding-right: 0;
    text-align: center;
  }

  .crm-tab-icon-large {
    margin-left: auto;
    margin-right: auto;
  }

  .crm-tab-features {
    max-width: 500px;
    margin: 0 auto;
  }

  .crm-tab-feature {
    text-align: left;
  }

  .crm-tab-visual {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .crm-industries-section {
    padding: 80px 0;
  }

  .crm-tabs-nav {
    gap: 8px;
  }

  .crm-tab-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .crm-tab-btn span {
    display: none;
  }

  .crm-tab-btn i {
    font-size: 20px;
  }

  .crm-tab-info h3 {
    font-size: 26px;
  }

  .crm-kanban-col {
    min-width: 140px;
  }

  .crm-industries-cta {
    padding: 30px 20px;
  }

  .crm-industries-cta p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .crm-tab-features {
    gap: 16px;
  }

  .crm-tab-feature > i {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .crm-dash-row {
    grid-template-columns: 1fr;
  }

  .crm-customer-stats {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   SIMPLIO SHOP - ECOMMERCE SOLUTION STYLES
   ======================================== */

/* Shop Color Palette - Commercial Orange Theme */
:root {
  --shop-primary: #f97316;
  --shop-primary-dark: #ea580c;
  --shop-primary-light: #fb923c;
  --shop-secondary: #0ea5e9;
  --shop-accent: #8b5cf6;
  --shop-success: #22c55e;
  --shop-dark: #0f172a;
  --shop-dark-lighter: #1e293b;
  --shop-text: rgba(255, 255, 255, 0.9);
  --shop-text-muted: rgba(255, 255, 255, 0.6);
  --shop-border: rgba(255, 255, 255, 0.1);
}

.shop-solution-template {
  background: var(--shop-dark);
  color: var(--shop-text);
  overflow-x: hidden;
}

/* Hide footer CTA on Shop page (has its own CTA) */
.shop-solution-template ~ .site-footer .footer-cta-section,
body:has(.shop-solution-template) .footer-cta-section {
  display: none;
}

/* Reveal Animation */
.shop-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.shop-reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   SHOP HERO SECTION
   ======================================== */

.shop-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
}

.shop-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shop-hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(249, 115, 22, 0.25), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(14, 165, 233, 0.15), transparent),
    linear-gradient(180deg, var(--shop-dark) 0%, var(--shop-dark-lighter) 100%);
}

.shop-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Floating Elements */
.shop-hero-floating-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shop-float-element {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.2rem;
  animation: shopFloat 6s ease-in-out infinite;
}

.shop-float-cart {
  top: 20%;
  left: 10%;
  background: rgba(249, 115, 22, 0.2);
  color: var(--shop-primary);
  animation-delay: 0s;
}

.shop-float-box {
  top: 60%;
  left: 5%;
  background: rgba(14, 165, 233, 0.2);
  color: var(--shop-secondary);
  animation-delay: 1.5s;
}

.shop-float-tag {
  top: 30%;
  right: 8%;
  background: rgba(34, 197, 94, 0.2);
  color: var(--shop-success);
  animation-delay: 3s;
}

.shop-float-star {
  top: 70%;
  right: 12%;
  background: rgba(139, 92, 246, 0.2);
  color: var(--shop-accent);
  animation-delay: 4.5s;
}

@keyframes shopFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

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

.shop-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Hero Content */
.shop-hero-content {
  max-width: 600px;
}

.shop-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--shop-primary);
  margin-bottom: 24px;
}

.shop-hero-badge i {
  font-size: 1rem;
}

.shop-hero-title {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 24px;
}

.shop-title-highlight {
  display: block;
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shop-hero-desc {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--shop-text-muted);
  margin-bottom: 32px;
}

.shop-hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.shop-hero-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--shop-text);
}

.shop-hero-feature i {
  color: var(--shop-success);
  font-size: 1rem;
}

.shop-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.shop-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark));
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 30px rgba(249, 115, 22, 0.4);
}

.shop-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(249, 115, 22, 0.5);
}

.shop-btn-primary .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.shop-btn-primary:hover .btn-icon {
  transform: translateX(4px);
}

.shop-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--shop-border);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.shop-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.shop-btn-secondary .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--shop-primary);
  border-radius: 50%;
  font-size: 0.8rem;
}

/* Hero Visual */
.shop-hero-visual {
  position: relative;
}

.shop-hero-mockup {
  position: relative;
}

.shop-mockup-browser {
  background: var(--shop-dark-lighter);
  border: 1px solid var(--shop-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}

.shop-browser-dots {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--shop-border);
}

.shop-browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.shop-browser-dots span:first-child { background: #ef4444; }
.shop-browser-dots span:nth-child(2) { background: #eab308; }
.shop-browser-dots span:nth-child(3) { background: #22c55e; }

.shop-browser-content {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.shop-mockup-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-mockup-placeholder {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.shop-mockup-header {
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.shop-mockup-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  flex: 1;
}

.shop-mockup-product {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

/* Floating Cards */
.shop-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid var(--shop-border);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: shopCardFloat 4s ease-in-out infinite;
}

.shop-card-order {
  top: 15%;
  left: -60px;
  animation-delay: 0s;
}

.shop-card-payment {
  top: 45%;
  right: -50px;
  animation-delay: 1.3s;
}

.shop-card-delivery {
  bottom: 10%;
  left: -40px;
  animation-delay: 2.6s;
}

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

.shop-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 115, 22, 0.2);
  border-radius: 10px;
  color: var(--shop-primary);
}

.shop-card-icon.shop-icon-green {
  background: rgba(34, 197, 94, 0.2);
  color: var(--shop-success);
}

.shop-card-icon.shop-icon-blue {
  background: rgba(14, 165, 233, 0.2);
  color: var(--shop-secondary);
}

.shop-card-content {
  display: flex;
  flex-direction: column;
}

.shop-card-label {
  font-size: 0.75rem;
  color: var(--shop-text-muted);
}

.shop-card-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

/* ========================================
   SHOP STATS SECTION
   ======================================== */

.shop-stats-section {
  padding: 80px 0;
  background: var(--shop-dark-lighter);
  border-top: 1px solid var(--shop-border);
  border-bottom: 1px solid var(--shop-border);
}

.shop-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.shop-stat-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.shop-stat-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(249, 115, 22, 0.3);
  transform: translateY(-4px);
}

.shop-stat-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark));
  border-radius: 14px;
  font-size: 1.5rem;
  color: #fff;
}

.shop-stat-content {
  display: flex;
  flex-direction: column;
}

.shop-stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.shop-stat-label {
  font-size: 0.9rem;
  color: var(--shop-text-muted);
}

/* ========================================
   SHOP SECTION HEADER (shared)
   ======================================== */

.shop-section-header {
  margin-bottom: 60px;
}

.shop-section-badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(249, 115, 22, 0.15);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--shop-primary);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shop-section-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.shop-section-desc {
  font-size: 1.15rem;
  color: var(--shop-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* ========================================
   SHOP PACKAGE SECTION
   ======================================== */

.shop-package-section {
  padding: 120px 0;
  background: var(--shop-dark);
}

.shop-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.shop-package-card {
  padding: 36px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 20px;
  transition: all 0.4s ease;
}

.shop-package-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(249, 115, 22, 0.3);
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.shop-package-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 24px;
}

.shop-package-icon.shop-icon-purple {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.shop-package-icon.shop-icon-orange {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

.shop-package-icon.shop-icon-green {
  background: linear-gradient(135deg, #22c55e, #4ade80);
}

.shop-package-icon.shop-icon-blue {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

.shop-package-icon.shop-icon-red {
  background: linear-gradient(135deg, #ef4444, #f87171);
}

.shop-package-icon.shop-icon-cyan {
  background: linear-gradient(135deg, #06b6d4, #22d3ee);
}

.shop-package-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.shop-package-card > p {
  font-size: 0.95rem;
  color: var(--shop-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.shop-package-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shop-package-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--shop-text);
  border-top: 1px solid var(--shop-border);
}

.shop-package-features li:first-child {
  border-top: none;
}

.shop-package-features li i {
  color: var(--shop-success);
  font-size: 0.8rem;
}

/* ========================================
   SHOP INTEGRATIONS SECTION
   ======================================== */

.shop-integrations-section {
  padding: 120px 0;
  background: var(--shop-dark-lighter);
}

.shop-integrations-tabs {
  max-width: 900px;
  margin: 0 auto;
}

.shop-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.shop-tab-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--shop-border);
  border-radius: 12px;
  color: var(--shop-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shop-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.shop-tab-btn.active {
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}

.shop-tab-btn i {
  font-size: 1.1rem;
}

.shop-tab-panel {
  display: none;
  animation: shopFadeIn 0.4s ease;
}

.shop-tab-panel.active {
  display: block;
}

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

.shop-integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.shop-integration-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.shop-integration-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(249, 115, 22, 0.4);
  transform: translateY(-4px);
}

.shop-integration-card.shop-card-featured {
  border-color: rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.08);
}

.shop-integration-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 4px 10px;
  background: var(--shop-primary);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.shop-integration-logo {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 115, 22, 0.15);
  border-radius: 12px;
}

.shop-logo-text {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--shop-primary);
}

.shop-logo-cargus { background: rgba(220, 38, 38, 0.15); }
.shop-logo-cargus .shop-logo-text { color: #dc2626; }

.shop-logo-sameday { background: rgba(234, 179, 8, 0.15); }
.shop-logo-sameday .shop-logo-text { color: #eab308; }

.shop-logo-dpd { background: rgba(220, 38, 38, 0.15); }
.shop-logo-dpd .shop-logo-text { color: #dc2626; }

.shop-logo-gls { background: rgba(234, 179, 8, 0.15); }
.shop-logo-gls .shop-logo-text { color: #eab308; }

.shop-logo-netopia { background: rgba(14, 165, 233, 0.15); }
.shop-logo-netopia .shop-logo-text { color: #0ea5e9; }

.shop-logo-euplatesc { background: rgba(34, 197, 94, 0.15); }
.shop-logo-euplatesc .shop-logo-text { color: #22c55e; }

.shop-logo-paypal { background: rgba(14, 165, 233, 0.15); }
.shop-logo-paypal .shop-logo-text { color: #0ea5e9; }

.shop-logo-bt { background: rgba(59, 130, 246, 0.15); }
.shop-logo-bt .shop-logo-text { color: #3b82f6; }

.shop-logo-ing { background: rgba(249, 115, 22, 0.15); }
.shop-logo-ing .shop-logo-text { color: #f97316; }

.shop-logo-emag { background: rgba(249, 115, 22, 0.15); }
.shop-logo-emag .shop-logo-text { color: #f97316; }

.shop-logo-olx { background: rgba(34, 197, 94, 0.15); }
.shop-logo-olx .shop-logo-text { color: #22c55e; }

.shop-logo-amazon { background: rgba(249, 115, 22, 0.15); }
.shop-logo-amazon .shop-logo-text { color: #f97316; }

.shop-logo-altex { background: rgba(234, 179, 8, 0.15); }
.shop-logo-altex .shop-logo-text { color: #f59e0b; }

.shop-logo-flanco { background: rgba(220, 38, 38, 0.15); }
.shop-logo-flanco .shop-logo-text { color: #dc2626; }

.shop-logo-saga { background: rgba(59, 130, 246, 0.15); }
.shop-logo-saga .shop-logo-text { color: #3b82f6; }

.shop-logo-winmentor { background: rgba(14, 165, 233, 0.15); }
.shop-logo-winmentor .shop-logo-text { color: #0ea5e9; }

.shop-logo-senior { background: rgba(139, 92, 246, 0.15); }
.shop-logo-senior .shop-logo-text { color: #8b5cf6; }

.shop-logo-nexus { background: rgba(34, 197, 94, 0.15); }
.shop-logo-nexus .shop-logo-text { color: #22c55e; }

.shop-logo-smartbill { background: rgba(14, 165, 233, 0.15); }
.shop-logo-smartbill .shop-logo-text { color: #0ea5e9; }

.shop-logo-oblio { background: rgba(249, 115, 22, 0.15); }
.shop-logo-oblio .shop-logo-text { color: #f97316; }

.shop-integration-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--shop-text);
  text-align: center;
}

.shop-integration-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--shop-border);
  border-radius: 12px;
}

.shop-int-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--shop-text);
}

.shop-int-feature i {
  color: var(--shop-success);
}

/* ========================================
   SHOP TYPES SECTION
   ======================================== */

.shop-types-section {
  padding: 120px 0;
  background: var(--shop-dark);
}

.shop-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.shop-type-card {
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.shop-type-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(249, 115, 22, 0.4);
  transform: translateY(-6px);
}

.shop-type-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background: rgba(249, 115, 22, 0.15);
  border-radius: 14px;
  font-size: 1.4rem;
  color: var(--shop-primary);
  transition: all 0.3s ease;
}

.shop-type-card:hover .shop-type-icon {
  background: var(--shop-primary);
  color: #fff;
  transform: scale(1.1);
}

.shop-type-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.shop-type-card p {
  font-size: 0.85rem;
  color: var(--shop-text-muted);
  line-height: 1.5;
}

/* ========================================
   SHOP PROCESS SECTION
   ======================================== */

.shop-process-section {
  padding: 120px 0;
  background: var(--shop-dark-lighter);
}

.shop-process-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 80px;
}

.shop-process-line {
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--shop-primary), var(--shop-secondary));
}

.shop-process-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 50px;
}

.shop-process-step:last-child {
  margin-bottom: 0;
}

.shop-step-number {
  position: absolute;
  left: -80px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark));
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.4);
  z-index: 1;
}

.shop-step-content {
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 16px;
  flex: 1;
  transition: all 0.3s ease;
}

.shop-step-content:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(249, 115, 22, 0.3);
}

.shop-step-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.shop-step-content p {
  font-size: 0.95rem;
  color: var(--shop-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.shop-step-duration {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(249, 115, 22, 0.15);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--shop-primary);
}

/* ========================================
   SHOP WHY SECTION
   ======================================== */

.shop-why-section {
  padding: 120px 0;
  background: var(--shop-dark);
}

.shop-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.shop-why-card {
  padding: 36px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 20px;
  text-align: center;
  transition: all 0.4s ease;
}

.shop-why-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(249, 115, 22, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.shop-why-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.1));
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 20px;
  font-size: 1.6rem;
  color: var(--shop-primary);
  transition: all 0.3s ease;
}

.shop-why-card:hover .shop-why-icon {
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark));
  color: #fff;
  transform: scale(1.1);
}

.shop-why-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.shop-why-card p {
  font-size: 0.95rem;
  color: var(--shop-text-muted);
  line-height: 1.6;
}

/* ========================================
   SHOP PORTFOLIO SECTION
   ======================================== */

.shop-portfolio-section {
  padding: 70px 0;
  background: var(--shop-dark-lighter);
}

.shop-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

.shop-portfolio-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.shop-portfolio-card:hover {
  transform: translateY(-8px);
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.shop-portfolio-image {
  position: relative;
  overflow: hidden;
}

.shop-portfolio-mockup {
  background: var(--shop-dark);
  border-bottom: 1px solid var(--shop-border);
}

.shop-mockup-bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.4);
}

.shop-mockup-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.shop-mockup-bar span:nth-child(1) { background: #ef4444; }
.shop-mockup-bar span:nth-child(2) { background: #eab308; }
.shop-mockup-bar span:nth-child(3) { background: #22c55e; }

.shop-mockup-screen {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  position: relative;
  overflow: hidden;
}

.shop-mockup-screen::before {
  content: '';
  position: absolute;
  inset: 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03) 0%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 20px);
  border-radius: 8px;
}

.shop-mockup-placeholder-img {
  position: absolute;
  inset: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-mockup-placeholder-img::after {
  content: '\f07a';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.1);
}

/* Portfolio screenshot image */
.shop-portfolio-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0 0 8px 8px;
}

/* Different screen colors per category */
.shop-screen-electronics {
  background: linear-gradient(135deg, #0c1929 0%, #1a365d 100%);
}

.shop-screen-beauty {
  background: linear-gradient(135deg, #2d1f3d 0%, #4a1942 100%);
}

.shop-screen-home {
  background: linear-gradient(135deg, #1a2e1a 0%, #2d4a2d 100%);
}

.shop-portfolio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(249, 115, 22, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.shop-portfolio-card:hover .shop-portfolio-overlay {
  opacity: 1;
}

.shop-portfolio-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #fff;
  border-radius: 10px;
  color: var(--shop-primary);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.shop-portfolio-card:hover .shop-portfolio-link {
  transform: translateY(0);
}

.shop-portfolio-link:hover {
  background: #f8fafc;
}

.shop-portfolio-content {
  padding: 28px;
}

.shop-portfolio-category {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(249, 115, 22, 0.15);
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--shop-primary);
  margin-bottom: 14px;
}

.shop-portfolio-category.shop-cat-blue {
  background: rgba(14, 165, 233, 0.15);
  color: #0ea5e9;
}

.shop-portfolio-category.shop-cat-pink {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

.shop-portfolio-category.shop-cat-green {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.shop-portfolio-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.shop-portfolio-desc {
  font-size: 0.95rem;
  color: var(--shop-text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.shop-portfolio-stats {
  display: flex;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--shop-border);
}

.shop-portfolio-stat {
  display: flex;
  flex-direction: column;
}

.shop-portfolio-stat .stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--shop-primary);
}

.shop-portfolio-stat .stat-label {
  font-size: 0.8rem;
  color: var(--shop-text-muted);
}

.shop-portfolio-cta {
  text-align: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 20px;
}

.shop-portfolio-cta p {
  font-size: 1.1rem;
  color: var(--shop-text-muted);
  margin-bottom: 24px;
}

.shop-portfolio-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark));
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
}

.shop-portfolio-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(249, 115, 22, 0.4);
}

.shop-portfolio-btn i {
  transition: transform 0.3s ease;
}

.shop-portfolio-btn:hover i {
  transform: translateX(4px);
}

/* Portfolio Responsive */
@media (max-width: 992px) {
  .shop-portfolio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .shop-portfolio-section {
    padding: 80px 0;
  }

  .shop-portfolio-content {
    padding: 24px 20px;
  }

  .shop-portfolio-stats {
    gap: 16px;
  }

  .shop-portfolio-stat .stat-value {
    font-size: 1.2rem;
  }

  .shop-portfolio-cta {
    padding: 30px 20px;
  }

  .shop-portfolio-cta p {
    font-size: 1rem;
  }
}

/* ========================================
   SHOP TESTIMONIALS SECTION
   ======================================== */

.shop-testimonials-section {
  padding: 70px 0;
  background: var(--shop-dark-lighter);
}

.shop-testimonials-slider {
  max-width: 700px;
  margin: 0 auto;
}

.shop-testimonials-track {
  position: relative;
  min-height: 300px;
}

.shop-testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.shop-testimonial-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.shop-testimonial-card {
  padding: 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 24px;
}

.shop-testimonial-content {
  margin-bottom: 30px;
}

.shop-testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  justify-content: center;
}

.shop-testimonial-stars i {
  color: #fbbf24;
  font-size: 1.1rem;
}

.shop-testimonial-card blockquote {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--shop-text);
  text-align: center;
  font-style: italic;
  margin: 0;
}

.shop-testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.shop-author-avatar {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark));
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.shop-author-info {
  display: flex;
  flex-direction: column;
}

.shop-author-info strong {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.shop-author-info span {
  font-size: 0.85rem;
  color: var(--shop-text-muted);
}

.shop-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.shop-slider-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--shop-border);
  border-radius: 50%;
  color: var(--shop-text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
}

.shop-slider-btn:hover {
  background: var(--shop-primary);
  border-color: var(--shop-primary);
  color: #fff;
}

.shop-slider-dots {
  display: flex;
  gap: 10px;
}

.shop-slider-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shop-slider-dot.is-active {
  background: var(--shop-primary);
  transform: scale(1.3);
}

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

.shop-faq-section {
  padding: 120px 0;
  background: var(--shop-dark);
}

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

.shop-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shop-faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--shop-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.shop-faq-item:hover {
  border-color: rgba(249, 115, 22, 0.3);
}

.shop-faq-item.active {
  border-color: var(--shop-primary);
  background: rgba(249, 115, 22, 0.05);
}

.shop-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 28px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shop-faq-question span {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  flex: 1;
  padding-right: 20px;
}

.shop-faq-question i {
  color: var(--shop-primary);
  font-size: 1rem;
  transition: transform 0.3s ease;
}

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

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

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

.shop-faq-answer p {
  padding: 0 28px 24px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--shop-text-muted);
}

/* ========================================
   SHOP CTA SECTION
   ======================================== */

.shop-cta-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}

.shop-cta-bg {
  position: absolute;
  inset: 0;
}

.shop-cta-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(249, 115, 22, 0.3), transparent),
    linear-gradient(180deg, var(--shop-dark-lighter) 0%, var(--shop-dark) 100%);
}

.shop-cta-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}

.shop-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.shop-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: rgba(249, 115, 22, 0.2);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--shop-primary);
  margin-bottom: 24px;
}

.shop-cta-title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
}

.shop-cta-desc {
  font-size: 1.2rem;
  color: var(--shop-text-muted);
  margin-bottom: 40px;
  line-height: 1.7;
}

.shop-cta-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.shop-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark));
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 40px rgba(249, 115, 22, 0.4);
  transition: all 0.3s ease;
}

.shop-cta-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 50px rgba(249, 115, 22, 0.5);
}

.shop-cta-btn-primary .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.shop-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.shop-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.shop-cta-btn-secondary .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(34, 197, 94, 0.2);
  border-radius: 50%;
  color: var(--shop-success);
}

.shop-cta-trust {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.shop-cta-trust span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--shop-text-muted);
}

.shop-cta-trust i {
  color: var(--shop-success);
}

/* ========================================
   SHOP RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1200px) {
  .shop-hero-grid {
    gap: 40px;
  }

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

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

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

@media (max-width: 992px) {
  .shop-hero {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .shop-hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .shop-hero-content {
    text-align: center;
    max-width: 100%;
  }

  .shop-hero-features {
    justify-content: center;
  }

  .shop-hero-actions {
    justify-content: center;
  }

  .shop-hero-visual {
    max-width: 600px;
    margin: 0 auto;
  }

  .shop-floating-card {
    display: none;
  }

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

  .shop-package-grid,
  .shop-why-grid {
    grid-template-columns: 1fr;
  }

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

  .shop-process-timeline {
    padding-left: 60px;
  }

  .shop-step-number {
    left: -60px;
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .shop-process-line {
    left: 23px;
  }
}

@media (max-width: 768px) {
  .shop-hero {
    padding: 100px 0 60px;
  }

  .shop-hero-title {
    font-size: 2rem;
  }

  .shop-hero-desc {
    font-size: 1rem;
  }

  .shop-hero-features {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .shop-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .shop-btn-primary,
  .shop-btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .shop-float-element {
    display: none;
  }

  .shop-stats-section {
    padding: 60px 0;
  }

  .shop-stats-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .shop-stat-item {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }

  .shop-section-header {
    margin-bottom: 40px;
  }

  .shop-package-section,
  .shop-integrations-section,
  .shop-types-section,
  .shop-process-section,
  .shop-why-section,
  .shop-testimonials-section,
  .shop-faq-section,
  .shop-cta-section {
    padding: 80px 0;
  }

  .shop-tabs-nav {
    gap: 8px;
  }

  .shop-tab-btn {
    padding: 12px 16px;
    font-size: 0.85rem;
  }

  .shop-tab-btn span {
    display: none;
  }

  .shop-integrations-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .shop-integration-card {
    padding: 16px 12px;
  }

  .shop-integration-features {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .shop-types-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .shop-type-card {
    padding: 24px 16px;
  }

  .shop-process-timeline {
    padding-left: 50px;
  }

  .shop-step-number {
    left: -50px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .shop-process-line {
    left: 19px;
  }

  .shop-step-content {
    padding: 20px;
  }

  .shop-testimonial-card {
    padding: 28px 20px;
  }

  .shop-testimonial-card blockquote {
    font-size: 1rem;
  }

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

  .shop-faq-question span {
    font-size: 0.95rem;
  }

  .shop-faq-answer p {
    padding: 0 20px 20px;
  }

  .shop-cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .shop-cta-btn-primary,
  .shop-cta-btn-secondary {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .shop-cta-trust {
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .shop-hero-badge {
    font-size: 0.8rem;
    padding: 8px 16px;
  }

  .shop-hero-title {
    font-size: 1.7rem;
  }

  .shop-section-title {
    font-size: 1.6rem;
  }

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

  .shop-types-grid {
    grid-template-columns: 1fr;
  }

  .shop-cta-title {
    font-size: 1.8rem;
  }

  .shop-cta-desc {
    font-size: 1rem;
  }
}

/* ========================================
   SHOP LIGHT THEME
   ======================================== */

[data-theme="light"] .shop-solution-template {
  background: #f8fafc;
  color: #1e293b;
}

[data-theme="light"] .shop-hero-gradient {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(249, 115, 22, 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(14, 165, 233, 0.1), transparent),
    linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

[data-theme="light"] .shop-hero-grid-pattern {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

[data-theme="light"] .shop-hero-title,
[data-theme="light"] .shop-section-title,
[data-theme="light"] .shop-cta-title {
  color: #0f172a;
}

[data-theme="light"] .shop-hero-desc,
[data-theme="light"] .shop-section-desc,
[data-theme="light"] .shop-cta-desc {
  color: #64748b;
}

[data-theme="light"] .shop-hero-feature span {
  color: #334155;
}

[data-theme="light"] .shop-stats-section {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .shop-stat-item,
[data-theme="light"] .shop-package-card,
[data-theme="light"] .shop-type-card,
[data-theme="light"] .shop-why-card,
[data-theme="light"] .shop-testimonial-card,
[data-theme="light"] .shop-faq-item,
[data-theme="light"] .shop-step-content,
[data-theme="light"] .shop-integration-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .shop-stat-item:hover,
[data-theme="light"] .shop-package-card:hover,
[data-theme="light"] .shop-type-card:hover,
[data-theme="light"] .shop-why-card:hover,
[data-theme="light"] .shop-integration-card:hover {
  background: #fafafa;
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .shop-stat-number,
[data-theme="light"] .shop-package-card h3,
[data-theme="light"] .shop-type-card h3,
[data-theme="light"] .shop-why-card h3,
[data-theme="light"] .shop-step-content h3,
[data-theme="light"] .shop-faq-question span,
[data-theme="light"] .shop-author-info strong {
  color: #0f172a;
}

[data-theme="light"] .shop-stat-label,
[data-theme="light"] .shop-package-card > p,
[data-theme="light"] .shop-type-card p,
[data-theme="light"] .shop-why-card p,
[data-theme="light"] .shop-step-content p,
[data-theme="light"] .shop-faq-answer p,
[data-theme="light"] .shop-author-info span {
  color: #64748b;
}

[data-theme="light"] .shop-package-features li {
  color: #334155;
  border-color: #e2e8f0;
}

[data-theme="light"] .shop-integrations-section {
  background: #f1f5f9;
}

[data-theme="light"] .shop-tab-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .shop-tab-btn:hover {
  background: #f8fafc;
  color: #0f172a;
}

[data-theme="light"] .shop-integration-features {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .shop-int-feature span,
[data-theme="light"] .shop-integration-name {
  color: #334155;
}

[data-theme="light"] .shop-process-section,
[data-theme="light"] .shop-testimonials-section {
  background: #f1f5f9;
}

[data-theme="light"] .shop-slider-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .shop-slider-dot {
  background: #cbd5e1;
}

[data-theme="light"] .shop-faq-item.active {
  background: rgba(249, 115, 22, 0.05);
  border-color: var(--shop-primary);
}

[data-theme="light"] .shop-mockup-browser {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .shop-browser-dots {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="light"] .shop-floating-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .shop-card-value {
  color: #0f172a;
}

[data-theme="light"] .shop-card-label {
  color: #64748b;
}

[data-theme="light"] .shop-cta-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(249, 115, 22, 0.15), transparent),
    linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
}

[data-theme="light"] .shop-btn-secondary {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .shop-btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .shop-cta-btn-secondary {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .shop-cta-trust span {
  color: #64748b;
}

[data-theme="light"] .shop-testimonial-card blockquote {
  color: #334155;
}

/* Shop Light Theme - Additional Styles */
[data-theme="light"] .shop-package-section,
[data-theme="light"] .shop-types-section,
[data-theme="light"] .shop-why-section,
[data-theme="light"] .shop-faq-section {
  background: #ffffff;
}

[data-theme="light"] .shop-title-highlight {
  background: linear-gradient(135deg, #ea580c, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .shop-hero-badge {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.25);
}

[data-theme="light"] .shop-section-badge {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.25);
}

[data-theme="light"] .shop-cta-badge {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.3);
}

[data-theme="light"] .shop-process-line {
  background: linear-gradient(180deg, #f97316, #0ea5e9);
}

[data-theme="light"] .shop-step-duration {
  background: rgba(249, 115, 22, 0.1);
}

[data-theme="light"] .shop-why-icon {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.06));
  border-color: rgba(249, 115, 22, 0.2);
}

[data-theme="light"] .shop-mockup-placeholder {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

[data-theme="light"] .shop-mockup-header,
[data-theme="light"] .shop-mockup-product {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .shop-card-icon {
  background: rgba(249, 115, 22, 0.12);
}

[data-theme="light"] .shop-card-icon.shop-icon-green {
  background: rgba(34, 197, 94, 0.12);
}

[data-theme="light"] .shop-card-icon.shop-icon-blue {
  background: rgba(14, 165, 233, 0.12);
}

[data-theme="light"] .shop-float-cart {
  background: rgba(249, 115, 22, 0.12);
}

[data-theme="light"] .shop-float-box {
  background: rgba(14, 165, 233, 0.12);
}

[data-theme="light"] .shop-float-tag {
  background: rgba(34, 197, 94, 0.12);
}

[data-theme="light"] .shop-float-star {
  background: rgba(139, 92, 246, 0.12);
}

[data-theme="light"] .shop-type-icon {
  background: rgba(249, 115, 22, 0.1);
}

[data-theme="light"] .shop-integration-card.shop-card-featured {
  background: rgba(249, 115, 22, 0.05);
  border-color: rgba(249, 115, 22, 0.3);
}

[data-theme="light"] .shop-integration-logo {
  background: rgba(249, 115, 22, 0.08);
}

[data-theme="light"] .shop-logo-cargus { background: rgba(220, 38, 38, 0.08); }
[data-theme="light"] .shop-logo-sameday { background: rgba(234, 179, 8, 0.1); }
[data-theme="light"] .shop-logo-dpd { background: rgba(220, 38, 38, 0.08); }
[data-theme="light"] .shop-logo-gls { background: rgba(234, 179, 8, 0.1); }
[data-theme="light"] .shop-logo-posta { background: rgba(234, 179, 8, 0.1); }
[data-theme="light"] .shop-logo-netopia { background: rgba(14, 165, 233, 0.08); }
[data-theme="light"] .shop-logo-euplatesc { background: rgba(34, 197, 94, 0.08); }
[data-theme="light"] .shop-logo-stripe { background: rgba(99, 102, 241, 0.08); }
[data-theme="light"] .shop-logo-paypal { background: rgba(14, 165, 233, 0.08); }
[data-theme="light"] .shop-logo-bt { background: rgba(59, 130, 246, 0.08); }
[data-theme="light"] .shop-logo-ing { background: rgba(249, 115, 22, 0.08); }
[data-theme="light"] .shop-logo-emag { background: rgba(249, 115, 22, 0.08); }
[data-theme="light"] .shop-logo-olx { background: rgba(34, 197, 94, 0.08); }
[data-theme="light"] .shop-logo-amazon { background: rgba(249, 115, 22, 0.08); }
[data-theme="light"] .shop-logo-altex { background: rgba(234, 179, 8, 0.1); }
[data-theme="light"] .shop-logo-flanco { background: rgba(220, 38, 38, 0.08); }
[data-theme="light"] .shop-logo-saga { background: rgba(59, 130, 246, 0.08); }
[data-theme="light"] .shop-logo-winmentor { background: rgba(14, 165, 233, 0.08); }
[data-theme="light"] .shop-logo-senior { background: rgba(139, 92, 246, 0.08); }
[data-theme="light"] .shop-logo-nexus { background: rgba(34, 197, 94, 0.08); }
[data-theme="light"] .shop-logo-smartbill { background: rgba(14, 165, 233, 0.08); }
[data-theme="light"] .shop-logo-oblio { background: rgba(249, 115, 22, 0.08); }

[data-theme="light"] .shop-step-content:hover {
  background: #fafafa;
  border-color: rgba(249, 115, 22, 0.3);
}

[data-theme="light"] .shop-faq-question {
  color: #0f172a;
}

[data-theme="light"] .shop-slider-btn:hover {
  background: var(--shop-primary);
  border-color: var(--shop-primary);
  color: #fff;
}

[data-theme="light"] .shop-cta-section {
  background: #f8fafc;
}

[data-theme="light"] .shop-cta-pattern {
  background-image:
    radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
}

/* Shop Portfolio - Light Theme */
[data-theme="light"] .shop-portfolio-section {
  background: #f8fafc;
}

[data-theme="light"] .shop-portfolio-card {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .shop-portfolio-card:hover {
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 12px 40px rgba(249, 115, 22, 0.12);
}

[data-theme="light"] .shop-portfolio-mockup {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

[data-theme="light"] .shop-mockup-browser {
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .shop-mockup-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .shop-mockup-url {
  background: #fff;
  color: #64748b;
  border-color: #e2e8f0;
}

[data-theme="light"] .shop-mockup-screen {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

[data-theme="light"] .shop-mockup-element {
  background: rgba(249, 115, 22, 0.15);
}

[data-theme="light"] .shop-mockup-element.el-2 {
  background: rgba(14, 165, 233, 0.15);
}

[data-theme="light"] .shop-mockup-element.el-3 {
  background: rgba(139, 92, 246, 0.15);
}

[data-theme="light"] .shop-portfolio-content {
  background: #fff;
}

[data-theme="light"] .shop-portfolio-category {
  background: rgba(249, 115, 22, 0.1);
  color: var(--shop-primary-dark);
}

[data-theme="light"] .shop-portfolio-category.cat-tech {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

[data-theme="light"] .shop-portfolio-category.cat-beauty {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

[data-theme="light"] .shop-portfolio-category.cat-home {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

[data-theme="light"] .shop-portfolio-title {
  color: #0f172a;
}

[data-theme="light"] .shop-portfolio-desc {
  color: #64748b;
}

[data-theme="light"] .shop-portfolio-stats {
  border-top-color: #e2e8f0;
}

[data-theme="light"] .shop-portfolio-stat-value {
  color: #0f172a;
}

[data-theme="light"] .shop-portfolio-stat-label {
  color: #94a3b8;
}

[data-theme="light"] .shop-portfolio-cta-text {
  color: #475569;
}

/* ==========================================================================
   SIMPLIO CLOUD PAGE STYLES
   ========================================================================== */

:root {
  --cloud-primary: #0ea5e9;
  --cloud-primary-dark: #0284c7;
  --cloud-primary-light: #38bdf8;
  --cloud-secondary: #8b5cf6;
  --cloud-accent: #06b6d4;
  --cloud-success: #22c55e;
  --cloud-dark: #0c1222;
  --cloud-dark-lighter: #162032;
  --cloud-text: #e2e8f0;
  --cloud-text-muted: #94a3b8;
  --cloud-border: rgba(14, 165, 233, 0.15);
}

.cloud-solution-template {
  background: var(--cloud-dark);
  color: var(--cloud-text);
  overflow-x: hidden;
}

/* Cloud Hero Section */
.cloud-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
}

.cloud-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cloud-hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14, 165, 233, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}

.cloud-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14, 165, 233, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.cloud-hero-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

.cloud-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

.cloud-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cloud-primary-light);
  margin-bottom: 28px;
}

.cloud-hero-badge i {
  font-size: 1rem;
}

.cloud-hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #fff;
}

.cloud-title-highlight {
  display: block;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cloud-hero-desc {
  font-size: 1.2rem;
  color: var(--cloud-text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cloud-hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.cloud-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
}

.cloud-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(14, 165, 233, 0.4);
  color: #fff;
}

.cloud-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cloud-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.cloud-hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.cloud-hero-stat {
  text-align: center;
}

.cloud-stat-value {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.cloud-stat-label {
  font-size: 0.85rem;
  color: var(--cloud-text-muted);
}

/* Floating Elements */
.cloud-float-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cloud-float {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  animation: cloudFloat 6s ease-in-out infinite;
}

.cloud-float-server {
  top: 20%;
  left: 10%;
  background: rgba(14, 165, 233, 0.15);
  color: var(--cloud-primary);
  animation-delay: 0s;
}

.cloud-float-shield {
  top: 30%;
  right: 12%;
  background: rgba(34, 197, 94, 0.15);
  color: var(--cloud-success);
  animation-delay: 1s;
}

.cloud-float-bolt {
  bottom: 30%;
  left: 15%;
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  animation-delay: 2s;
}

.cloud-float-database {
  bottom: 25%;
  right: 10%;
  background: rgba(139, 92, 246, 0.15);
  color: var(--cloud-secondary);
  animation-delay: 3s;
}

@keyframes cloudFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* Trust Section */
.cloud-trust-section {
  padding: 30px 0;
  background: var(--cloud-dark-lighter);
  border-top: 1px solid var(--cloud-border);
  border-bottom: 1px solid var(--cloud-border);
}

.cloud-trust-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.cloud-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cloud-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.cloud-trust-item i {
  font-size: 1.2rem;
  color: var(--cloud-primary);
}

/* Section Headers */
.cloud-section-header {
  margin-bottom: 60px;
}

.cloud-section-badge {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cloud-primary);
  margin-bottom: 20px;
}

.cloud-section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

.cloud-section-desc {
  font-size: 1.1rem;
  color: var(--cloud-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* Billing Toggle */
.cloud-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 8px 20px;
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 50px;
}

.cloud-billing-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cloud-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cloud-billing-label.is-active {
  color: #fff;
  font-weight: 600;
}

.cloud-billing-save {
  display: inline-block;
  padding: 3px 8px;
  background: linear-gradient(135deg, var(--cloud-success) 0%, #16a34a 100%);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

/* Toggle Switch */
.cloud-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.cloud-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cloud-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cloud-dark-lighter);
  border: 1px solid var(--cloud-border);
  border-radius: 28px;
  transition: all 0.3s ease;
}

.cloud-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: var(--cloud-text-muted);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.cloud-toggle input:checked + .cloud-toggle-slider {
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  border-color: var(--cloud-primary);
}

.cloud-toggle input:checked + .cloud-toggle-slider:before {
  transform: translateX(24px);
  background: #fff;
}

/* Price Billed Text */
.cloud-price-billed {
  display: block;
  font-size: 0.8rem;
  color: var(--cloud-text-muted);
  margin-top: 4px;
}

.cloud-price-amount {
  transition: transform 0.2s ease;
}

/* Domain Search Section */
.cloud-domain-section {
  padding: 120px 0;
  background: var(--cloud-dark-lighter);
}

.cloud-domain-search {
  max-width: 700px;
  margin: 0 auto 60px;
}

.cloud-domain-form {
  display: flex;
  gap: 0;
  background: var(--cloud-dark);
  border: 2px solid var(--cloud-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cloud-domain-form:focus-within {
  border-color: var(--cloud-primary);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}

.cloud-domain-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
}

.cloud-domain-input-wrap i {
  font-size: 1.2rem;
  color: var(--cloud-text-muted);
}

.cloud-domain-input-wrap input {
  flex: 1;
  background: none;
  border: none;
  padding: 18px 0;
  font-size: 1.1rem;
  color: #fff;
  outline: none;
}

.cloud-domain-input-wrap input::placeholder {
  color: var(--cloud-text-muted);
}

.cloud-domain-select {
  background: rgba(14, 165, 233, 0.1);
  border: none;
  border-left: 1px solid var(--cloud-border);
  padding: 18px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cloud-primary);
  cursor: pointer;
  outline: none;
}

.cloud-domain-select option {
  background: var(--cloud-dark);
  color: #fff;
}

.cloud-domain-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cloud-domain-btn:hover {
  background: linear-gradient(135deg, var(--cloud-primary-light) 0%, var(--cloud-primary) 100%);
}

/* Domain Result */
.cloud-domain-result {
  margin-top: 20px;
  display: none;
}

.cloud-domain-result.is-visible {
  display: block;
}

.cloud-domain-checking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(14, 165, 233, 0.1);
  border-radius: 12px;
  color: var(--cloud-primary);
  font-size: 1rem;
}

.cloud-domain-available,
.cloud-domain-unavailable {
  padding: 24px;
  border-radius: 12px;
  text-align: center;
}

.cloud-domain-available {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.cloud-domain-unavailable {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.cloud-domain-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.cloud-domain-available .cloud-domain-status {
  color: var(--cloud-success);
}

.cloud-domain-unavailable .cloud-domain-status {
  color: #ef4444;
}

.cloud-domain-status i {
  font-size: 1.4rem;
}

.cloud-domain-register-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--cloud-success);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cloud-domain-register-btn:hover {
  background: #16a34a;
  transform: translateY(-2px);
  color: #fff;
}

.cloud-domain-suggestion {
  color: var(--cloud-text-muted);
  margin: 0;
}

/* Extensions Grid */
.cloud-extensions-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cloud-text-muted);
  margin-bottom: 30px;
}

.cloud-extensions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

@media (max-width: 1200px) {
  .cloud-extensions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.cloud-extension-card {
  position: relative;
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.cloud-extension-card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 165, 233, 0.3);
}

.cloud-ext-popular {
  border-color: var(--cloud-primary);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, var(--cloud-dark) 100%);
}

.cloud-ext-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--cloud-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cloud-ext-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cloud-ext-flag {
  font-size: 1.5rem;
}

.cloud-ext-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}

.cloud-ext-price {
  margin-bottom: 8px;
}

.cloud-ext-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cloud-primary);
}

.cloud-ext-currency {
  font-size: 0.9rem;
  color: var(--cloud-text-muted);
}

.cloud-ext-label {
  display: block;
  font-size: 0.8rem;
  color: var(--cloud-text-muted);
  margin-bottom: 16px;
}

.cloud-ext-btn {
  width: 100%;
  padding: 10px 16px;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 8px;
  color: var(--cloud-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cloud-ext-btn:hover {
  background: var(--cloud-primary);
  color: #fff;
}

/* Domain Features */
.cloud-domain-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

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

@media (max-width: 576px) {
  .cloud-domain-features {
    grid-template-columns: 1fr;
  }
}

.cloud-domain-feature {
  text-align: center;
  padding: 24px 20px;
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 16px;
}

.cloud-domain-feature-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 16px;
  background: rgba(14, 165, 233, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--cloud-primary);
}

.cloud-domain-feature h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.cloud-domain-feature p {
  font-size: 0.9rem;
  color: var(--cloud-text-muted);
  margin: 0;
}

/* Responsive Domain Form */
@media (max-width: 640px) {
  .cloud-domain-form {
    flex-direction: column;
  }

  .cloud-domain-input-wrap {
    border-bottom: 1px solid var(--cloud-border);
  }

  .cloud-domain-select {
    border-left: none;
    border-bottom: 1px solid var(--cloud-border);
  }

  .cloud-domain-btn {
    justify-content: center;
  }
}

/* Pricing Section */
.cloud-pricing-section {
  padding: 120px 0;
  background: var(--cloud-dark);
}

.cloud-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

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

@media (max-width: 640px) {
  .cloud-pricing-grid {
    grid-template-columns: 1fr;
  }
}

.cloud-pricing-card {
  position: relative;
  background: var(--cloud-dark-lighter);
  border: 1px solid var(--cloud-border);
  border-radius: 20px;
  padding: 32px 28px;
  transition: all 0.3s ease;
}

.cloud-pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.cloud-card-popular {
  border-color: var(--cloud-primary);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.1) 0%, var(--cloud-dark-lighter) 100%);
}

.cloud-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 20px;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-accent) 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cloud-pricing-header {
  text-align: center;
  margin-bottom: 24px;
}

.cloud-pricing-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: rgba(14, 165, 233, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--cloud-primary);
}

.cloud-pricing-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.cloud-pricing-subtitle {
  font-size: 0.9rem;
  color: var(--cloud-text-muted);
}

.cloud-pricing-price {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--cloud-border);
}

.cloud-price-old {
  display: block;
  font-size: 0.95rem;
  color: var(--cloud-text-muted);
  text-decoration: line-through;
  margin-bottom: 8px;
}

.cloud-price-current {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

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

.cloud-price-currency {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cloud-text-muted);
}

.cloud-price-period {
  font-size: 1rem;
  color: var(--cloud-text-muted);
}

.cloud-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.cloud-pricing-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.95rem;
  color: var(--cloud-text-muted);
}

.cloud-pricing-features li i {
  color: var(--cloud-success);
  font-size: 0.85rem;
}

.cloud-pricing-features li.cloud-feature-highlight {
  color: #fff;
  font-weight: 600;
}

.cloud-pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
  color: var(--cloud-primary);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cloud-pricing-btn:hover {
  background: var(--cloud-primary);
  color: #fff;
}

.cloud-pricing-btn.cloud-btn-highlight {
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  border-color: transparent;
  color: #fff;
}

.cloud-pricing-btn.cloud-btn-highlight:hover {
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
}

.cloud-pricing-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  background: rgba(14, 165, 233, 0.05);
  border-radius: 12px;
  color: var(--cloud-text-muted);
  font-size: 0.9rem;
}

.cloud-pricing-note i {
  color: var(--cloud-primary);
}

/* Features Section */
.cloud-features-section {
  padding: 120px 0;
  background: var(--cloud-dark-lighter);
}

.cloud-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 992px) {
  .cloud-features-grid {
    grid-template-columns: 1fr;
  }
}

.cloud-feature-column {
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 20px;
  padding: 36px 32px;
}

.cloud-feature-column-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cloud-border);
}

.cloud-feature-column-icon {
  width: 50px;
  height: 50px;
  background: rgba(14, 165, 233, 0.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--cloud-primary);
}

.cloud-feature-column-icon.cloud-icon-security {
  background: rgba(34, 197, 94, 0.15);
  color: var(--cloud-success);
}

.cloud-feature-column-icon.cloud-icon-support {
  background: rgba(139, 92, 246, 0.15);
  color: var(--cloud-secondary);
}

.cloud-feature-column-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.cloud-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cloud-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--cloud-text);
  font-size: 0.95rem;
}

.cloud-feature-list li i {
  color: var(--cloud-primary);
  font-size: 0.9rem;
}

/* Why Section */
.cloud-why-section {
  padding: 120px 0;
  background: var(--cloud-dark);
}

.cloud-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

@media (max-width: 992px) {
  .cloud-why-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

.cloud-why-desc {
  font-size: 1.1rem;
  color: var(--cloud-text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.cloud-why-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 36px;
}

.cloud-why-stat {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cloud-why-stat-icon {
  width: 50px;
  height: 50px;
  background: rgba(14, 165, 233, 0.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--cloud-primary);
}

.cloud-why-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.cloud-why-stat-label {
  font-size: 0.85rem;
  color: var(--cloud-text-muted);
}

/* Server Mockup */
.cloud-why-visual {
  display: flex;
  justify-content: center;
}

.cloud-server-mockup {
  position: relative;
  padding: 40px;
}

.cloud-server-rack {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #334155;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cloud-server-unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 16px 20px;
}

.cloud-server-lights {
  display: flex;
  gap: 8px;
}

.cloud-light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.cloud-light-green {
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
  animation: blink 2s ease-in-out infinite;
}

.cloud-light-blue {
  background: var(--cloud-primary);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
  animation: blink 1.5s ease-in-out infinite 0.5s;
}

.cloud-light-orange {
  background: #f97316;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
  animation: blink 3s ease-in-out infinite 1s;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.cloud-server-slots {
  display: flex;
  gap: 6px;
}

.cloud-server-slots span {
  width: 60px;
  height: 8px;
  background: #1e293b;
  border-radius: 2px;
}

.cloud-server-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.2) 0%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
}

/* FAQ Section */
.cloud-faq-section {
  padding: 120px 0;
  background: var(--cloud-dark-lighter);
}

.cloud-faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cloud-faq-item {
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 14px;
  overflow: hidden;
}

.cloud-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.cloud-faq-question i {
  font-size: 0.9rem;
  color: var(--cloud-primary);
  transition: transform 0.3s ease;
}

.cloud-faq-item.is-open .cloud-faq-question i {
  transform: rotate(45deg);
}

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

.cloud-faq-item.is-open .cloud-faq-answer {
  max-height: 300px;
}

.cloud-faq-answer p {
  padding: 0 28px 22px;
  color: var(--cloud-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* CTA Section */
.cloud-cta-section {
  padding: 100px 0;
  background: var(--cloud-dark);
}

.cloud-cta-box {
  position: relative;
  background: linear-gradient(135deg, var(--cloud-dark-lighter) 0%, rgba(14, 165, 233, 0.1) 100%);
  border: 1px solid var(--cloud-border);
  border-radius: 24px;
  padding: 80px 60px;
  text-align: center;
  overflow: hidden;
}

.cloud-cta-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.cloud-cta-content {
  position: relative;
  z-index: 1;
}

.cloud-cta-content h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

.cloud-cta-content p {
  font-size: 1.15rem;
  color: var(--cloud-text-muted);
  margin-bottom: 36px;
}

.cloud-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cloud-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
}

.cloud-cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(14, 165, 233, 0.4);
  color: #fff;
}

.cloud-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cloud-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Reveal Animations */
.cloud-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.cloud-reveal.cloud-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hide footer CTA on Cloud page */
.cloud-solution-template ~ .site-footer .footer-cta-section,
body:has(.cloud-solution-template) .footer-cta-section {
  display: none;
}

/* Cloud Responsive */
@media (max-width: 768px) {
  .cloud-hero-section {
    padding: 120px 0 80px;
    min-height: auto;
  }

  .cloud-hero-stats {
    gap: 24px;
  }

  .cloud-hero-stat {
    flex: 0 0 calc(50% - 12px);
  }

  .cloud-float-elements {
    display: none;
  }

  .cloud-trust-grid {
    gap: 24px;
  }

  .cloud-trust-item {
    flex: 0 0 calc(50% - 12px);
    justify-content: center;
  }

  .cloud-pricing-section,
  .cloud-features-section,
  .cloud-why-section,
  .cloud-faq-section,
  .cloud-cta-section {
    padding: 80px 0;
  }

  .cloud-why-stats {
    flex-direction: column;
    gap: 20px;
  }

  .cloud-cta-box {
    padding: 50px 30px;
  }
}

/* Cloud Responsive - Tablet (1024px) */
@media (max-width: 1024px) {
  .cloud-hero-title {
    font-size: 2.8rem;
  }

  .cloud-hero-actions {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .cloud-hero-actions a {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

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

  .cloud-features-grid {
    gap: 20px;
  }

  .cloud-feature-column {
    padding: 24px;
  }
}

/* Cloud Responsive - Small Tablet (768px) - Additional */
@media (max-width: 768px) {
  .cloud-hero-title {
    font-size: 2.2rem;
  }

  .cloud-title-highlight {
    display: block;
  }

  .cloud-billing-toggle {
    gap: 10px;
    padding: 6px 14px;
  }

  .cloud-billing-label {
    font-size: 0.85rem;
  }

  .cloud-toggle {
    width: 44px;
    height: 24px;
  }

  .cloud-toggle-slider:before {
    height: 16px;
    width: 16px;
  }

  .cloud-toggle input:checked + .cloud-toggle-slider:before {
    transform: translateX(20px);
  }

  .cloud-extensions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .cloud-extension-card {
    padding: 16px 12px;
  }

  .cloud-ext-name {
    font-size: 1rem;
  }

  .cloud-ext-amount {
    font-size: 1.2rem;
  }

  .cloud-features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .cloud-feature-column {
    padding: 20px;
  }

  .cloud-section-title {
    font-size: 1.8rem;
  }
}

/* Cloud Responsive - Mobile (576px) */
@media (max-width: 576px) {
  .cloud-hero-section {
    padding: 100px 0 60px;
  }

  .cloud-hero-title {
    font-size: 1.8rem;
  }

  .cloud-hero-desc {
    font-size: 1rem;
  }

  .cloud-hero-badge {
    font-size: 0.8rem;
    padding: 6px 14px;
  }

  .cloud-hero-stats {
    flex-wrap: wrap;
    gap: 16px;
  }

  .cloud-hero-stat {
    flex: 0 0 calc(50% - 8px);
    padding: 16px 12px;
  }

  .cloud-stat-value {
    font-size: 1.4rem;
  }

  .cloud-trust-grid {
    flex-wrap: wrap;
    gap: 16px;
  }

  .cloud-trust-item {
    flex: 0 0 calc(50% - 8px);
    font-size: 0.8rem;
  }

  .cloud-section-badge {
    font-size: 0.75rem;
  }

  .cloud-section-title {
    font-size: 1.5rem;
  }

  .cloud-section-desc {
    font-size: 0.95rem;
  }

  .cloud-billing-toggle {
    gap: 8px;
    padding: 5px 12px;
  }

  .cloud-billing-label {
    font-size: 0.8rem;
  }

  .cloud-billing-save {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  .cloud-extensions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 40px;
  }

  .cloud-extension-card {
    padding: 14px 10px;
  }

  .cloud-ext-flag {
    font-size: 1.2rem;
  }

  .cloud-ext-name {
    font-size: 0.9rem;
  }

  .cloud-ext-amount {
    font-size: 1.1rem;
  }

  .cloud-ext-currency {
    font-size: 0.7rem;
  }

  .cloud-ext-label {
    font-size: 0.7rem;
  }

  .cloud-ext-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .cloud-pricing-section,
  .cloud-features-section,
  .cloud-why-section,
  .cloud-faq-section,
  .cloud-domain-section {
    padding: 60px 0;
  }

  .cloud-pricing-card {
    padding: 24px 20px;
  }

  .cloud-pricing-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .cloud-pricing-name {
    font-size: 1.2rem;
  }

  .cloud-price-amount {
    font-size: 2.2rem;
  }

  .cloud-pricing-btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  .cloud-why-grid {
    grid-template-columns: 1fr;
  }

  .cloud-why-visual {
    display: none;
  }

  .cloud-faq-grid {
    gap: 12px;
  }

  .cloud-faq-question {
    padding: 16px;
    font-size: 0.9rem;
    gap: 12px;
  }

  .cloud-faq-question span {
    line-height: 1.4;
  }

  .cloud-faq-answer p {
    padding: 0 16px 16px;
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .cloud-cta-box {
    padding: 40px 20px;
  }

  .cloud-cta-title {
    font-size: 1.4rem;
  }
}

/* Cloud Responsive - Small Mobile (480px) */
@media (max-width: 480px) {
  .cloud-hero-title {
    font-size: 1.6rem;
  }

  .cloud-hero-stat {
    padding: 12px 10px;
  }

  .cloud-stat-value {
    font-size: 1.2rem;
  }

  .cloud-stat-label {
    font-size: 0.7rem;
  }

  .cloud-extensions-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cloud-extension-card {
    padding: 12px 8px;
  }

  .cloud-ext-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
    top: -8px;
  }

  .cloud-domain-form {
    border-radius: 12px;
  }

  .cloud-domain-input-wrap input {
    font-size: 0.95rem;
    padding: 14px 14px 14px 40px;
  }

  .cloud-domain-select {
    font-size: 0.9rem;
    padding: 14px 12px;
  }

  .cloud-domain-btn {
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  .cloud-pricing-card {
    padding: 20px 16px;
  }

  .cloud-popular-badge {
    font-size: 0.7rem;
    padding: 4px 14px;
  }

  .cloud-pricing-features li {
    font-size: 0.85rem;
    padding: 8px 0;
  }

  .cloud-billing-toggle {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .cloud-faq-grid {
    gap: 10px;
  }

  .cloud-faq-item {
    border-radius: 10px;
  }

  .cloud-faq-question {
    padding: 14px;
    font-size: 0.85rem;
    gap: 10px;
  }

  .cloud-faq-question i {
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  .cloud-faq-answer p {
    padding: 0 14px 14px;
    font-size: 0.8rem;
  }
}

/* Cloud Landscape Orientation */
@media (max-height: 500px) and (orientation: landscape) {
  .cloud-hero-section {
    padding: 80px 0 40px;
    min-height: auto;
  }

  .cloud-hero-title {
    font-size: 1.8rem;
  }

  .cloud-hero-desc {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .cloud-hero-stats {
    margin-top: 20px;
    gap: 12px;
  }

  .cloud-hero-stat {
    padding: 10px 14px;
  }

  .cloud-float-elements {
    display: none;
  }

  .cloud-pricing-section,
  .cloud-features-section,
  .cloud-why-section,
  .cloud-faq-section,
  .cloud-domain-section {
    padding: 40px 0;
  }

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

  .cloud-modal {
    max-height: 90vh;
    overflow-y: auto;
  }

  .cloud-cart-panel {
    max-height: 70vh;
  }
}

/* Cloud Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .cloud-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

/* ==========================================================================
   SIMPLIO CLOUD - LIGHT THEME
   ========================================================================== */

[data-theme="light"] .cloud-solution-template {
  background: #f8fafc;
  color: #1e293b;
}

[data-theme="light"] .cloud-hero-section {
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 100%);
}

[data-theme="light"] .cloud-hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14, 165, 233, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
}

[data-theme="light"] .cloud-hero-grid-pattern {
  background-image:
    linear-gradient(rgba(14, 165, 233, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px);
}

[data-theme="light"] .cloud-hero-glow {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
}

[data-theme="light"] .cloud-hero-badge {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.25);
  color: var(--cloud-primary-dark);
}

[data-theme="light"] .cloud-hero-title {
  color: #0f172a;
}

[data-theme="light"] .cloud-hero-desc {
  color: #64748b;
}

[data-theme="light"] .cloud-stat-value {
  color: #0f172a;
}

[data-theme="light"] .cloud-stat-label {
  color: #64748b;
}

[data-theme="light"] .cloud-btn-secondary {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .cloud-btn-secondary:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .cloud-float-server {
  background: rgba(14, 165, 233, 0.1);
}

[data-theme="light"] .cloud-float-shield {
  background: rgba(34, 197, 94, 0.1);
}

[data-theme="light"] .cloud-float-bolt {
  background: rgba(234, 179, 8, 0.1);
}

[data-theme="light"] .cloud-float-database {
  background: rgba(139, 92, 246, 0.1);
}

[data-theme="light"] .cloud-trust-section {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-trust-item {
  color: #475569;
}

[data-theme="light"] .cloud-section-badge {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.2);
}

[data-theme="light"] .cloud-section-title {
  color: #0f172a;
}

[data-theme="light"] .cloud-section-desc {
  color: #64748b;
}

[data-theme="light"] .cloud-billing-toggle {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .cloud-billing-label {
  color: #64748b;
}

[data-theme="light"] .cloud-billing-label.is-active {
  color: #0f172a;
}

[data-theme="light"] .cloud-toggle-slider {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

[data-theme="light"] .cloud-toggle-slider:before {
  background: #94a3b8;
}

[data-theme="light"] .cloud-toggle input:checked + .cloud-toggle-slider:before {
  background: #fff;
}

[data-theme="light"] .cloud-price-billed {
  color: #64748b;
}

[data-theme="light"] .cloud-pricing-section {
  background: #f8fafc;
}

[data-theme="light"] .cloud-pricing-card {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .cloud-pricing-card:hover {
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 20px 40px rgba(14, 165, 233, 0.1);
}

[data-theme="light"] .cloud-card-popular {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.05) 0%, #fff 100%);
}

[data-theme="light"] .cloud-pricing-icon {
  background: rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .cloud-pricing-name {
  color: #0f172a;
}

[data-theme="light"] .cloud-pricing-subtitle {
  color: #64748b;
}

[data-theme="light"] .cloud-price-old {
  color: #94a3b8;
}

[data-theme="light"] .cloud-price-amount {
  color: #0f172a;
}

[data-theme="light"] .cloud-price-currency,
[data-theme="light"] .cloud-price-period {
  color: #64748b;
}

[data-theme="light"] .cloud-pricing-price {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .cloud-pricing-features li {
  color: #64748b;
}

[data-theme="light"] .cloud-pricing-features li.cloud-feature-highlight {
  color: #0f172a;
}

[data-theme="light"] .cloud-pricing-btn {
  background: var(--cloud-primary);
  border-color: var(--cloud-primary);
  color: #fff;
}

[data-theme="light"] .cloud-pricing-btn:hover {
  background: var(--cloud-primary-dark);
  border-color: var(--cloud-primary-dark);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
}

[data-theme="light"] .cloud-pricing-btn.cloud-btn-highlight {
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  border-color: transparent;
  color: #fff;
}

[data-theme="light"] .cloud-pricing-btn.cloud-btn-highlight:hover {
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
}

[data-theme="light"] .cloud-pricing-note {
  background: rgba(14, 165, 233, 0.05);
  color: #64748b;
}

[data-theme="light"] .cloud-features-section {
  background: #fff;
}

[data-theme="light"] .cloud-feature-column {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-feature-column-header {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .cloud-feature-column-header h3 {
  color: #0f172a;
}

[data-theme="light"] .cloud-feature-column-icon {
  background: rgba(14, 165, 233, 0.1);
}

[data-theme="light"] .cloud-feature-column-icon.cloud-icon-security {
  background: rgba(34, 197, 94, 0.1);
}

[data-theme="light"] .cloud-feature-column-icon.cloud-icon-support {
  background: rgba(139, 92, 246, 0.1);
}

[data-theme="light"] .cloud-feature-list li {
  color: #475569;
}

[data-theme="light"] .cloud-why-section {
  background: #f8fafc;
}

[data-theme="light"] .cloud-why-desc {
  color: #64748b;
}

[data-theme="light"] .cloud-why-stat-icon {
  background: rgba(14, 165, 233, 0.1);
}

[data-theme="light"] .cloud-why-stat-value {
  color: #0f172a;
}

[data-theme="light"] .cloud-why-stat-label {
  color: #64748b;
}

[data-theme="light"] .cloud-server-rack {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
}

[data-theme="light"] .cloud-server-unit {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-server-slots span {
  background: #e2e8f0;
}

[data-theme="light"] .cloud-server-glow {
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
}

[data-theme="light"] .cloud-faq-section {
  background: #fff;
}

[data-theme="light"] .cloud-faq-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-faq-question {
  color: #0f172a;
}

[data-theme="light"] .cloud-faq-answer p {
  color: #64748b;
}

[data-theme="light"] .cloud-cta-section {
  background: #f8fafc;
}

[data-theme="light"] .cloud-cta-box {
  background: linear-gradient(135deg, #fff 0%, rgba(14, 165, 233, 0.05) 100%);
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-cta-pattern {
  background-image:
    radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}

[data-theme="light"] .cloud-cta-content h2 {
  color: #0f172a;
}

[data-theme="light"] .cloud-cta-content p {
  color: #64748b;
}

[data-theme="light"] .cloud-cta-btn-secondary {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .cloud-cta-btn-secondary:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Cloud Domain Section - Light Theme */
[data-theme="light"] .cloud-domain-section {
  background: #fff;
}

[data-theme="light"] .cloud-domain-form {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-domain-form:focus-within {
  border-color: var(--cloud-primary);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

[data-theme="light"] .cloud-domain-input-wrap input {
  color: #0f172a;
}

[data-theme="light"] .cloud-domain-input-wrap input::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .cloud-domain-select {
  background: rgba(14, 165, 233, 0.05);
  border-left-color: #e2e8f0;
}

[data-theme="light"] .cloud-domain-select option {
  background: #fff;
  color: #0f172a;
}

[data-theme="light"] .cloud-domain-checking {
  background: rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .cloud-domain-available {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}

[data-theme="light"] .cloud-domain-unavailable {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="light"] .cloud-domain-suggestion {
  color: #64748b;
}

[data-theme="light"] .cloud-extensions-title {
  color: #64748b;
}

[data-theme="light"] .cloud-extension-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-extension-card:hover {
  border-color: rgba(14, 165, 233, 0.4);
}

[data-theme="light"] .cloud-ext-popular {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.05) 0%, #f8fafc 100%);
}

[data-theme="light"] .cloud-ext-name {
  color: #0f172a;
}

[data-theme="light"] .cloud-ext-currency,
[data-theme="light"] .cloud-ext-label {
  color: #64748b;
}

[data-theme="light"] .cloud-ext-btn {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.25);
}

[data-theme="light"] .cloud-domain-feature {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-domain-feature-icon {
  background: rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .cloud-domain-feature h4 {
  color: #0f172a;
}

[data-theme="light"] .cloud-domain-feature p {
  color: #64748b;
}

/* ==========================================================================
   CLOUD SHOPPING CART
   ========================================================================== */

.cloud-cart {
  position: fixed !important;
  bottom: 100px !important;
  right: 30px !important;
  z-index: 99999 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.cloud-cart-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.4);
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
}

.cloud-cart-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(14, 165, 233, 0.5);
}

.cloud-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  background: #ef4444;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.cloud-cart.has-items .cloud-cart-count {
  opacity: 1;
  transform: scale(1);
}

.cloud-cart-panel {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 380px;
  max-height: calc(100vh - 200px);
  background: var(--cloud-dark-lighter);
  border: 1px solid var(--cloud-border);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 10000;
}

.cloud-cart-panel.is-open {
  display: flex;
  animation: cartSlideIn 0.3s ease forwards;
}

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

.cloud-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cloud-border);
}

.cloud-cart-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.cloud-cart-header h3 i {
  color: var(--cloud-primary);
}

.cloud-cart-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--cloud-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cloud-cart-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.cloud-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  max-height: 300px;
  min-height: 100px;
}

/* Custom Scrollbar */
.cloud-cart-items::-webkit-scrollbar {
  width: 6px;
}

.cloud-cart-items::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.cloud-cart-items::-webkit-scrollbar-thumb {
  background: var(--cloud-primary);
  border-radius: 3px;
}

.cloud-cart-items::-webkit-scrollbar-thumb:hover {
  background: var(--cloud-primary-light);
}

.cloud-cart-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--cloud-text-muted);
}

.cloud-cart-empty i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.3;
}

.cloud-cart-empty p {
  margin: 0;
}

.cloud-cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 12px;
  margin-bottom: 10px;
}

.cloud-cart-item:last-child {
  margin-bottom: 0;
}

.cloud-cart-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cloud-primary);
  flex-shrink: 0;
}

.cloud-cart-item-info {
  flex: 1;
  min-width: 0;
}

.cloud-cart-item-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-cart-item-type {
  display: block;
  font-size: 0.8rem;
  color: var(--cloud-text-muted);
}

.cloud-cart-item-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cloud-primary);
  white-space: nowrap;
}

.cloud-cart-item-remove {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--cloud-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cloud-cart-item-remove:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Cart Notification */
.cloud-cart-notification {
  position: fixed;
  bottom: 180px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--cloud-dark-lighter);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 999999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.cloud-cart-notification.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cloud-cart-notification i {
  color: var(--cloud-success);
  font-size: 1.2rem;
}

.cloud-cart-notification.is-error {
  border-color: rgba(239, 68, 68, 0.3);
}

.cloud-cart-notification.is-error i {
  color: #ef4444;
}

/* WooCommerce Mini Cart Styles */
.cloud-cart-items .widget_shopping_cart_content {
  height: 100%;
}

.cloud-cart-items .woocommerce-mini-cart {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cloud-cart-items .woocommerce-mini-cart__empty-message {
  display: block;
  padding: 40px 20px;
  color: var(--cloud-text-muted);
  text-align: center;
  font-size: 0.95rem;
}

.cloud-cart-items .woocommerce-mini-cart__empty-message::before {
  content: '\f291';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: block;
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.cloud-cart-items .woocommerce-mini-cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin: 8px 0;
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 12px;
  position: relative;
}

.cloud-cart-items .woocommerce-mini-cart-item a.remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  color: #ef4444 !important;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s ease;
}

.cloud-cart-items .woocommerce-mini-cart-item a.remove:hover {
  background: rgba(239, 68, 68, 0.2);
}

.cloud-cart-items .woocommerce-mini-cart-item img {
  display: none;
}

.cloud-cart-items .woocommerce-mini-cart-item a:not(.remove) {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.cloud-cart-items .woocommerce-mini-cart-item .quantity {
  display: block;
  color: var(--cloud-text-muted);
  font-size: 0.85rem;
  margin-top: 4px;
}

.cloud-cart-items .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount {
  color: var(--cloud-primary);
  font-weight: 700;
}

.cloud-cart-items .woocommerce-mini-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-top: 1px solid var(--cloud-border);
  margin-top: 8px;
  font-weight: 600;
  color: var(--cloud-text-muted);
}

.cloud-cart-items .woocommerce-mini-cart__total strong {
  color: #fff;
}

.cloud-cart-items .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
}

.cloud-cart-items .woocommerce-mini-cart__buttons {
  display: none; /* We use our own buttons in footer */
}

/* Cart Footer Buttons */
.cloud-cart-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--cloud-border);
  background: var(--cloud-dark);
  border-radius: 0 0 20px 20px;
}

.cloud-cart-view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--cloud-dark-lighter);
  border: 1px solid var(--cloud-border);
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cloud-cart-view-btn:hover {
  background: rgba(14, 165, 233, 0.1);
  border-color: var(--cloud-primary);
  color: #fff;
}

.cloud-cart-checkout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cloud-cart-checkout:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
  color: #fff;
}

/* Simplio Cart Item custom display */
.simplio-domain-cart-item,
.simplio-hosting-cart-item {
  display: block;
}

.simplio-domain-cart-item strong,
.simplio-hosting-cart-item strong {
  color: var(--cloud-primary);
}

/* Domain Actions in Result */
.cloud-domain-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}

.cloud-domain-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cloud-success);
}

/* BNR Currency Note */
.simplio-currency-note th,
.simplio-currency-note td {
  font-size: 0.85rem;
  color: #94a3b8;
  padding: 8px 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.2);
}

.simplio-currency-note th {
  font-weight: 500;
}

[data-theme="light"] .simplio-currency-note th,
[data-theme="light"] .simplio-currency-note td {
  color: #64748b;
}

/* VAT Row */
.simplio-vat-row th,
.simplio-vat-row td {
  font-size: 0.9rem;
  padding: 10px 0;
}

.simplio-vat-row th {
  font-weight: 500;
  color: #cbd5e1;
}

.simplio-vat-row td {
  color: var(--cloud-success);
  font-weight: 600;
}

[data-theme="light"] .simplio-vat-row th {
  color: #475569;
}

/* Cart subtotal small text */
.woocommerce-cart-form .cart_totals small,
.woocommerce-checkout-review-order-table small,
.cart_totals small {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 400;
}

[data-theme="light"] .cart_totals small {
  color: #64748b;
}

/* EUR/RON Price Display */
.woocommerce-mini-cart-item .quantity,
.woocommerce-mini-cart-item .amount {
  color: var(--cloud-success) !important;
  font-weight: 600;
}

/* Cart Responsive */
@media (max-width: 768px) {
  .cloud-cart {
    bottom: 80px;
    right: auto;
    left: 20px;
  }

  .cloud-cart-toggle {
    width: 54px;
    height: 54px;
    font-size: 1.2rem;
  }

  .cloud-cart-panel {
    position: fixed;
    width: calc(100vw - 40px);
    right: auto;
    left: 20px;
    bottom: 150px;
    max-height: 60vh;
  }

  .cloud-cart-notification {
    right: 20px;
    left: 20px;
    bottom: 160px;
  }
}

@media (max-width: 480px) {
  .cloud-cart {
    bottom: 70px;
    right: auto;
    left: 15px;
  }

  .cloud-cart-toggle {
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
  }

  .cloud-cart-panel {
    width: calc(100vw - 30px);
    right: auto;
    left: 15px;
  }

  .cloud-cart-notification {
    right: 15px;
    left: 15px;
    bottom: 140px;
  }
}

/* Light Theme Cart */
[data-theme="light"] .cloud-cart-panel {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .cloud-cart-header {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .cloud-cart-header h3 {
  color: #0f172a;
}

[data-theme="light"] .cloud-cart-close {
  background: #f1f5f9;
}

[data-theme="light"] .cloud-cart-empty {
  color: #64748b;
}

[data-theme="light"] .cloud-cart-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-cart-item-icon {
  background: rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .cloud-cart-item-name {
  color: #0f172a;
}

[data-theme="light"] .cloud-cart-item-type {
  color: #64748b;
}

[data-theme="light"] .cloud-cart-footer {
  background: #f8fafc;
  border-top-color: #e2e8f0;
}

[data-theme="light"] .cloud-cart-total {
  color: #64748b;
}

[data-theme="light"] .cloud-cart-total-amount {
  color: #0f172a;
}

[data-theme="light"] .cloud-cart-notification {
  background: #fff;
  border-color: rgba(34, 197, 94, 0.3);
  color: #0f172a;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Light Theme WooCommerce Mini Cart */
[data-theme="light"] .cloud-cart-items .woocommerce-mini-cart__empty-message {
  color: #64748b;
}

[data-theme="light"] .cloud-cart-items .woocommerce-mini-cart-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-cart-items .woocommerce-mini-cart-item a:not(.remove) {
  color: #0f172a;
}

[data-theme="light"] .cloud-cart-items .woocommerce-mini-cart-item .quantity {
  color: #64748b;
}

[data-theme="light"] .cloud-cart-items .woocommerce-mini-cart__total {
  border-top-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .cloud-cart-items .woocommerce-mini-cart__total strong {
  color: #0f172a;
}

[data-theme="light"] .cloud-cart-items .woocommerce-mini-cart__total .woocommerce-Price-amount {
  color: #0f172a;
}

[data-theme="light"] .cloud-cart-view-btn {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="light"] .cloud-cart-view-btn:hover {
  background: rgba(14, 165, 233, 0.08);
  border-color: var(--cloud-primary);
  color: #0f172a;
}

[data-theme="light"] .simplio-domain-cart-item,
[data-theme="light"] .simplio-hosting-cart-item {
  color: #0f172a;
}

/* ==========================================================================
   WOOCOMMERCE CART PAGE STYLES
   ========================================================================== */

/* Override content-narrow for WooCommerce pages */
.woocommerce-cart .content-narrow,
.woocommerce-checkout .content-narrow,
.woocommerce-cart .content-body,
.woocommerce-checkout .content-body {
  max-width: 1200px !important;
}

/* Page body background */
body.woocommerce-cart,
body.woocommerce-checkout {
  background: var(--bg, #050816);
}

[data-theme="light"] body.woocommerce-cart,
[data-theme="light"] body.woocommerce-checkout {
  background: #f8fafc;
}

/* Cart Page Container */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
}

/* Simplio Cart Wrapper */
.simplio-cart-wrapper {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 40px;
  align-items: start;
}

@media (max-width: 1100px) {
  .simplio-cart-wrapper {
    grid-template-columns: 1fr 380px;
  }
}

@media (max-width: 991px) {
  .simplio-cart-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Hide product thumbnail in cart */
.woocommerce-cart-form .product-thumbnail,
.woocommerce-cart-form th.product-thumbnail {
  display: none !important;
}

/* Simplio Checkout Wrapper - 2 Column Layout */
.simplio-checkout-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 550px !important;
  gap: 40px !important;
  max-width: 100% !important;
  align-items: start !important;
}

.simplio-checkout-wrapper .checkout-left {
  min-width: 0 !important;
  width: 100% !important;
}

.simplio-checkout-wrapper .checkout-right {
  position: sticky !important;
  top: 100px !important;
}

/* Tablet landscape */
@media (max-width: 1024px) {
  .simplio-checkout-wrapper {
    grid-template-columns: 1fr 380px !important;
    gap: 30px !important;
  }
}

/* Tablet portrait & mobile */
@media (max-width: 900px) {
  .simplio-checkout-wrapper {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .simplio-checkout-wrapper .checkout-right {
    position: static !important;
  }

  .simplio-checkout-wrapper .checkout-section {
    padding: 20px !important;
    border-radius: 12px !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .simplio-checkout-wrapper {
    gap: 16px !important;
  }

  .simplio-checkout-wrapper .checkout-section {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  .simplio-checkout-wrapper .checkout-section-title {
    font-size: 1.1rem !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
  }

  /* Radio buttons pe mobil */
  .simplio-checkout-wrapper input[type="radio"],
  .payment_methods input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 8px 0 0 !important;
  }

  [data-theme="light"] .simplio-checkout-wrapper input[type="radio"]:checked::after,
  [data-theme="light"] .payment_methods input[type="radio"]:checked::after {
    width: 10px !important;
    height: 10px !important;
  }

  /* Payment methods pe mobil */
  .payment_methods li label {
    padding: 16px !important;
    font-size: 0.95rem !important;
  }

  .payment_methods .payment_box {
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
  }
}

.simplio-checkout-wrapper .checkout-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

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

.simplio-checkout-wrapper .checkout-billing-column,
.simplio-checkout-wrapper .checkout-shipping-column {
  background: var(--cloud-dark-lighter, #1e293b);
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  border-radius: 16px;
  padding: 30px;
}

[data-theme="light"] .simplio-checkout-wrapper .checkout-billing-column,
[data-theme="light"] .simplio-checkout-wrapper .checkout-shipping-column {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.simplio-checkout-wrapper .checkout-order-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
}

[data-theme="light"] .simplio-checkout-wrapper .checkout-order-heading {
  color: #0f172a;
}

/* VAT Row in Cart Totals */
.cart_totals .simplio-vat-row th,
.cart_totals .tva-row th,
.woocommerce-checkout-review-order-table .simplio-vat-row th,
.woocommerce-checkout-review-order-table .tva-row th {
  color: #f97316 !important;
  font-weight: 600 !important;
}

.cart_totals .simplio-vat-row td,
.cart_totals .tva-row td,
.woocommerce-checkout-review-order-table .simplio-vat-row td,
.woocommerce-checkout-review-order-table .tva-row td {
  color: #f97316 !important;
  font-weight: 600;
}

/* Currency Note in Cart */
.cart_totals .simplio-currency-note th,
.cart_totals .currency-note-row th,
.woocommerce-checkout-review-order-table .simplio-currency-note th {
  font-size: 0.8rem;
  font-weight: 400 !important;
  color: #64748b !important;
}

.cart_totals .simplio-currency-note td,
.cart_totals .currency-note-row td,
.woocommerce-checkout-review-order-table .simplio-currency-note td {
  font-size: 0.8rem;
  color: #64748b !important;
}

/* Subtotal row styling */
.cart_totals .cart-subtotal td small,
.woocommerce-checkout-review-order-table .cart-subtotal td small {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 4px;
}

/* ==========================================================================
   CHECKOUT RADIO BUTTONS - Checkmark Style
   ========================================================================== */

/* Base radio button style */
.woocommerce-checkout input[type="radio"],
.simplio-checkout-wrapper input[type="radio"],
.payment_methods input[type="radio"],
input[name="payment_method"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 2px solid #64748b !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 10px 0 0 !important;
  transition: all 0.2s ease !important;
}

/* Light theme */
[data-theme="light"] .woocommerce-checkout input[type="radio"],
[data-theme="light"] .simplio-checkout-wrapper input[type="radio"],
[data-theme="light"] .payment_methods input[type="radio"],
[data-theme="light"] input[name="payment_method"] {
  border-color: #cbd5e1 !important;
  background: #fff !important;
}

/* Hover state */
.woocommerce-checkout input[type="radio"]:hover,
.simplio-checkout-wrapper input[type="radio"]:hover,
.payment_methods input[type="radio"]:hover,
input[name="payment_method"]:hover {
  border-color: #0ea5e9 !important;
}

/* Checked state */
.woocommerce-checkout input[type="radio"]:checked,
.simplio-checkout-wrapper input[type="radio"]:checked,
.payment_methods input[type="radio"]:checked,
input[name="payment_method"]:checked {
  border-color: #0ea5e9 !important;
  background: #0ea5e9 !important;
}

/* Checkmark inside - Dark theme */
.woocommerce-checkout input[type="radio"]:checked::after,
.simplio-checkout-wrapper input[type="radio"]:checked::after,
.payment_methods input[type="radio"]:checked::after,
input[name="payment_method"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 45% !important;
  left: 50% !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* Light theme - radio button checked with different style */
[data-theme="light"] .woocommerce-checkout input[type="radio"]:checked,
[data-theme="light"] .simplio-checkout-wrapper input[type="radio"]:checked,
[data-theme="light"] .payment_methods input[type="radio"]:checked,
[data-theme="light"] input[name="payment_method"]:checked {
  border-color: #0ea5e9 !important;
  background: #fff !important;
}

[data-theme="light"] .woocommerce-checkout input[type="radio"]:checked::after,
[data-theme="light"] .simplio-checkout-wrapper input[type="radio"]:checked::after,
[data-theme="light"] .payment_methods input[type="radio"]:checked::after,
[data-theme="light"] input[name="payment_method"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 12px !important;
  height: 12px !important;
  background: #0ea5e9 !important;
  border: none !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Cross-sell Products */
.cross-sells {
  display: none;
}

/* WooCommerce Breadcrumb */
.woocommerce-breadcrumb {
  display: none;
}

/* ==========================================================================
   WOOCOMMERCE GLOBAL BUTTON STYLES
   ========================================================================== */

/* Base button styles for all WooCommerce buttons */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce .button,
.woocommerce-cart .button,
.woocommerce-checkout .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, var(--cloud-primary, #0ea5e9) 0%, #0284c7 100%);
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.25);
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce .button:hover,
.woocommerce-cart .button:hover,
.woocommerce-checkout .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
  color: #fff !important;
}

.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Alt button style (secondary) */
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce .button.alt {
  background: linear-gradient(135deg, var(--cloud-success, #22c55e) 0%, #16a34a 100%);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.25);
}

.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .button.alt:hover {
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}

/* Checkout button specific */
.woocommerce a.button.checkout,
.woocommerce a.checkout-button,
.wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  padding: 16px 28px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--cloud-primary, #0ea5e9) 0%, #0284c7 100%);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.woocommerce a.button.checkout:hover,
.woocommerce a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
}

/* Light theme buttons */
[data-theme="light"] .woocommerce button.button,
[data-theme="light"] .woocommerce input.button,
[data-theme="light"] .woocommerce a.button,
[data-theme="light"] .woocommerce .button {
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2);
}

/* Page Title */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
  background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .woocommerce-cart .entry-title,
[data-theme="light"] .woocommerce-checkout .entry-title {
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cart Table */
.woocommerce-cart-form {
  margin-bottom: 40px;
}

.woocommerce-cart-form table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--cloud-dark-lighter, #1e293b);
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  border-radius: 16px;
  overflow: hidden;
}

[data-theme="light"] .woocommerce-cart-form table.shop_table {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.woocommerce-cart-form table.shop_table thead th {
  background: rgba(15, 23, 42, 0.5);
  padding: 16px 20px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  border-bottom: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
}

[data-theme="light"] .woocommerce-cart-form table.shop_table thead th {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}

.woocommerce-cart-form table.shop_table tbody td {
  padding: 20px;
  vertical-align: middle;
  border-bottom: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  color: #e2e8f0;
}

[data-theme="light"] .woocommerce-cart-form table.shop_table tbody td {
  color: #1e293b;
  border-color: #f1f5f9;
}

.woocommerce-cart-form table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

.woocommerce-cart-form table.shop_table tbody tr:hover {
  background: rgba(14, 165, 233, 0.03);
}

/* Product Thumbnail */
.woocommerce-cart-form .product-thumbnail img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
}

/* Product Name */
.woocommerce-cart-form .product-name a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.woocommerce-cart-form .product-name a:hover {
  color: var(--cloud-primary, #0ea5e9);
}

[data-theme="light"] .woocommerce-cart-form .product-name a {
  color: #0f172a;
}

/* Simplio Product Names */
.woocommerce-cart-form .simplio-hosting-cart-item,
.woocommerce-cart-form .simplio-domain-cart-item {
  display: block;
  font-size: 1rem;
}

.woocommerce-cart-form .simplio-hosting-cart-item strong,
.woocommerce-cart-form .simplio-domain-cart-item strong {
  color: var(--cloud-primary, #0ea5e9);
}

.woocommerce-cart-form .simplio-hosting-cart-item small {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* Product Price */
.woocommerce-cart-form .product-price .woocommerce-Price-amount,
.woocommerce-cart-form .product-subtotal .woocommerce-Price-amount {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--cloud-success, #22c55e);
}

/* Quantity Input */
.woocommerce-cart-form .quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.woocommerce-cart-form .quantity .qty {
  width: 60px;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.2));
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

[data-theme="light"] .woocommerce-cart-form .quantity .qty {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
}

.woocommerce-cart-form .quantity .qty:focus {
  outline: none;
  border-color: var(--cloud-primary, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* Remove Button */
.woocommerce-cart-form .product-remove a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444 !important;
  font-size: 1.2rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.woocommerce-cart-form .product-remove a.remove:hover {
  background: #ef4444;
  color: #fff !important;
  transform: scale(1.1);
}

/* Update Cart Button */
.woocommerce-cart-form .actions {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(15, 23, 42, 0.3);
}

[data-theme="light"] .woocommerce-cart-form .actions {
  background: #f8fafc;
}

/* Hide coupon section */
.woocommerce-cart-form .actions .coupon,
.simplio-cart-wrapper .actions-inner .coupon,
.woocommerce-cart .coupon,
.coupon,
div.coupon {
  display: none !important;
}

.woocommerce-cart-form .actions .coupon input[type="text"] {
  padding: 12px 16px;
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.2));
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  color: #fff;
  font-size: 0.9rem;
  min-width: 200px;
}

[data-theme="light"] .woocommerce-cart-form .actions .coupon input[type="text"] {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}

.woocommerce-cart-form .actions .coupon input[type="text"]::placeholder {
  color: #64748b;
}

.woocommerce-cart-form .actions .coupon input[type="text"]:focus {
  outline: none;
  border-color: var(--cloud-primary, #0ea5e9);
}

.woocommerce-cart-form .actions button,
.woocommerce-cart-form .actions .button {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.woocommerce-cart-form .actions button[name="apply_coupon"],
.woocommerce-cart-form .actions .coupon .button {
  background: linear-gradient(135deg, var(--cloud-primary, #0ea5e9) 0%, #0284c7 100%);
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25);
}

.woocommerce-cart-form .actions button[name="apply_coupon"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35);
}

.woocommerce-cart-form .actions button[name="update_cart"] {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .woocommerce-cart-form .actions button[name="update_cart"] {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.woocommerce-cart-form .actions button[name="update_cart"]:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

[data-theme="light"] .woocommerce-cart-form .actions button[name="update_cart"]:hover:not(:disabled) {
  background: #e2e8f0;
  color: #1e293b;
}

.woocommerce-cart-form .actions button[name="update_cart"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Cart Collaterals (Totals) */
.cart-collaterals {
  margin-top: 0;
  position: sticky;
  top: 100px;
}

.cart-collaterals .cart_totals {
  max-width: 100%;
  margin-left: 0;
  background: var(--cloud-dark-lighter, #1e293b);
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  border-radius: 16px;
  padding: 24px;
}

[data-theme="light"] .cart-collaterals .cart_totals {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.cart-collaterals .cart_totals > h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  color: #fff;
}

[data-theme="light"] .cart-collaterals .cart_totals > h2 {
  color: #0f172a;
  border-color: #e2e8f0;
}

.cart-collaterals .cart_totals table {
  width: 100%;
}

.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td {
  padding: 12px 0;
  vertical-align: top;
}

.cart-collaterals .cart_totals table th {
  text-align: left;
  font-weight: 500;
  color: #94a3b8;
  font-size: 0.95rem;
}

[data-theme="light"] .cart-collaterals .cart_totals table th {
  color: #64748b;
}

.cart-collaterals .cart_totals table td {
  text-align: right;
  color: #e2e8f0;
}

[data-theme="light"] .cart-collaterals .cart_totals table td {
  color: #1e293b;
}

.cart-collaterals .cart_totals .order-total th {
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  padding-top: 16px;
  border-top: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
}

[data-theme="light"] .cart-collaterals .cart_totals .order-total th {
  color: #0f172a;
  border-color: #e2e8f0;
}

.cart-collaterals .cart_totals .order-total td {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--cloud-success, #22c55e);
  padding-top: 16px;
  border-top: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
}

[data-theme="light"] .cart-collaterals .cart_totals .order-total td {
  border-color: #e2e8f0;
}

/* Checkout Button */
.cart-collaterals .wc-proceed-to-checkout {
  margin-top: 20px;
}

.cart-collaterals .wc-proceed-to-checkout a.checkout-button,
.cart-collaterals .wc-proceed-to-checkout a.button,
.cart-collaterals .wc-proceed-to-checkout a.button.alt,
.cart-collaterals .wc-proceed-to-checkout a.wc-forward,
.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward {
  display: block !important;
  width: 100% !important;
  padding: 18px 28px !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #fff !important;
  text-align: center !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  border: none !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.35) !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}

.cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover,
.cart-collaterals .wc-proceed-to-checkout a.button:hover,
.cart-collaterals .wc-proceed-to-checkout a.button.alt:hover,
.cart-collaterals .wc-proceed-to-checkout a.wc-forward:hover,
.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.45) !important;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

/* Empty Cart */
.woocommerce-cart .cart-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--cloud-dark-lighter, #1e293b);
  border-radius: 16px;
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
}

[data-theme="light"] .woocommerce-cart .cart-empty {
  background: #fff;
  border-color: #e2e8f0;
}

.woocommerce-cart .cart-empty::before {
  content: "\f07a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 4rem;
  display: block;
  margin-bottom: 20px;
  color: #475569;
}

.woocommerce-cart .return-to-shop {
  margin-top: 20px;
}

.woocommerce-cart .return-to-shop a.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--cloud-primary, #0ea5e9) 0%, #0284c7 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.woocommerce-cart .return-to-shop a.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
}

/* ==========================================================================
   CART PAGE - RESPONSIVE STYLES
   ========================================================================== */

/* Tablet */
@media (max-width: 900px) {
  .cart-collaterals {
    position: static !important;
    margin-top: 30px;
  }

  .woocommerce-cart-form .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-cart-form .actions .coupon {
    width: 100%;
    justify-content: center;
  }

  .woocommerce-cart-form .actions .coupon input[type="text"] {
    flex: 1;
    min-width: 0;
  }
}

/* Mobile - Stack table */
@media (max-width: 768px) {
  .woocommerce-cart-form table.shop_table,
  .woocommerce-cart-form table.shop_table thead,
  .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart-form table.shop_table tr,
  .woocommerce-cart-form table.shop_table td {
    display: block !important;
    width: 100% !important;
  }

  .woocommerce-cart-form table.shop_table thead {
    display: none !important;
  }

  .woocommerce-cart-form table.shop_table tbody tr {
    margin-bottom: 16px;
    border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
    border-radius: 12px;
    overflow: hidden;
    background: var(--cloud-dark-lighter, #1e293b);
  }

  [data-theme="light"] .woocommerce-cart-form table.shop_table tbody tr {
    background: #fff;
    border-color: #e2e8f0;
  }

  .woocommerce-cart-form table.shop_table tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.08)) !important;
    text-align: left !important;
    position: relative;
  }

  .woocommerce-cart-form table.shop_table tbody td:last-child {
    border-bottom: none !important;
  }

  .woocommerce-cart-form table.shop_table tbody td::before {
    content: attr(data-title);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-remove::before {
    display: none;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-thumbnail {
    text-align: center;
    padding-top: 40px !important;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-thumbnail::before {
    display: none;
  }

  .woocommerce-cart-form .product-thumbnail img {
    width: 100px !important;
    height: 100px !important;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-name {
    text-align: center;
    font-size: 1.1rem;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-name::before {
    display: none;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-price,
  .woocommerce-cart-form table.shop_table tbody td.product-quantity,
  .woocommerce-cart-form table.shop_table tbody td.product-subtotal {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-price::before,
  .woocommerce-cart-form table.shop_table tbody td.product-quantity::before,
  .woocommerce-cart-form table.shop_table tbody td.product-subtotal::before {
    margin-bottom: 0;
  }

  .woocommerce-cart-form .quantity {
    justify-content: flex-end;
  }

  /* Actions pe mobil */
  .woocommerce-cart-form .actions {
    padding: 16px;
    gap: 12px;
  }

  .woocommerce-cart-form .actions .coupon {
    flex-direction: column;
    width: 100%;
  }

  .woocommerce-cart-form .actions .coupon input[type="text"] {
    width: 100%;
    min-width: 0;
  }

  .woocommerce-cart-form .actions .coupon .button {
    width: 100%;
  }

  .woocommerce-cart-form .actions button[name="update_cart"] {
    width: 100%;
    order: -1;
  }

  /* Cart totals pe mobil */
  .cart-collaterals .cart_totals {
    padding: 20px;
    border-radius: 12px;
  }

  .cart-collaterals .cart_totals > h2 {
    font-size: 1.1rem;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .cart-collaterals .wc-proceed-to-checkout a.checkout-button,
  .cart-collaterals .wc-proceed-to-checkout a.button,
  .cart-collaterals .wc-proceed-to-checkout a.button.alt {
    padding: 16px 24px !important;
    font-size: 1rem !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .woocommerce-cart-form table.shop_table tbody td {
    padding: 10px 12px !important;
  }

  .woocommerce-cart-form .product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
  }

  .woocommerce-cart-form .quantity .qty {
    width: 50px;
    padding: 8px 10px;
  }

  .cart-collaterals .cart_totals {
    padding: 16px;
  }

  .cart-collaterals .cart_totals .order-total td {
    font-size: 1.1rem;
  }
}

/* WooCommerce Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 16px 20px;
  margin-bottom: 20px;
  border-radius: 12px;
  display: flow;
  align-items: center;
  padding-left: 70px;
  gap: 12px;
}

.woocommerce-message {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.woocommerce-info {
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
  color: var(--cloud-primary, #0ea5e9);
}

.woocommerce-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.2rem;
}

.woocommerce-message::before {
  content: "\f00c";
}

.woocommerce-info::before {
  content: "\f05a";
}

.woocommerce-error::before {
  content: "\f071";
}

.woocommerce-message a,
.woocommerce-info a {
  margin-left: auto;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.woocommerce-message a:hover,
.woocommerce-info a:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Cart Page Responsive */
@media (max-width: 768px) {
  .woocommerce-cart-form table.shop_table,
  .woocommerce-cart-form table.shop_table thead,
  .woocommerce-cart-form table.shop_table tbody,
  .woocommerce-cart-form table.shop_table th,
  .woocommerce-cart-form table.shop_table td,
  .woocommerce-cart-form table.shop_table tr {
    display: block;
  }

  .woocommerce-cart-form table.shop_table thead {
    display: none;
  }

  .woocommerce-cart-form table.shop_table tbody tr {
    position: relative;
    padding: 20px;
    padding-right: 50px;
    margin-bottom: 16px;
    border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
    border-radius: 12px;
  }

  .woocommerce-cart-form table.shop_table tbody td {
    padding: 8px 0;
    border: none;
    text-align: left;
  }

  .woocommerce-cart-form table.shop_table tbody td::before {
    content: attr(data-title);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-remove {
    position: absolute;
    top: 20px;
    right: 16px;
    padding: 0;
  }

  .woocommerce-cart-form table.shop_table tbody td.product-thumbnail {
    display: none;
  }

  .woocommerce-cart-form .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-cart-form .actions .coupon {
    width: 100%;
    flex-direction: column;
  }

  .woocommerce-cart-form .actions .coupon input[type="text"] {
    min-width: auto;
    width: 100%;
  }

  .woocommerce-cart-form .actions button[name="update_cart"] {
    width: 100%;
    order: 10;
    margin-top: 10px;
  }

  .cart-collaterals .cart_totals {
    max-width: 100%;
  }
}

/* ==========================================================================
   WOOCOMMERCE CHECKOUT PAGE STYLES
   ========================================================================== */

/* Checkout Layout */
.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr;
  }
}

/* Checkout Columns */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  background: var(--cloud-dark-lighter, #1e293b);
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  border-radius: 16px;
  padding: 24px;
}

[data-theme="light"] .woocommerce-checkout .col2-set .col-1,
[data-theme="light"] .woocommerce-checkout .col2-set .col-2 {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Section Headers */
.woocommerce-checkout h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  color: #fff;
}

[data-theme="light"] .woocommerce-checkout h3 {
  color: #0f172a;
  border-color: #e2e8f0;
}

/* Form Fields */
.woocommerce-checkout .woocommerce-input-wrapper {
  width: 100%;
}

.woocommerce-checkout .form-row {
  margin-bottom: 16px;
}

/* CRITICAL: Remove WooCommerce clearfix pseudo-elements that break flexbox/grid layouts */
.woocommerce form .form-row::before,
.woocommerce form .form-row::after,
.woocommerce-page form .form-row::before,
.woocommerce-page form .form-row::after,
body.woocommerce-checkout form .form-row::before,
body.woocommerce-checkout form .form-row::after,
.woocommerce-checkout form .form-row::before,
.woocommerce-checkout form .form-row::after,
.woocommerce .woocommerce-billing-fields__field-wrapper::before,
.woocommerce .woocommerce-billing-fields__field-wrapper::after,
.woocommerce .woocommerce-shipping-fields__field-wrapper::before,
.woocommerce .woocommerce-shipping-fields__field-wrapper::after,
.woocommerce #customer_details::before,
.woocommerce #customer_details::after,
.woocommerce .woocommerce-billing-fields::before,
.woocommerce .woocommerce-billing-fields::after,
.woocommerce .woocommerce-shipping-fields::before,
.woocommerce .woocommerce-shipping-fields::after {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  clear: none !important;
}

.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9rem;
  color: #e2e8f0;
}

[data-theme="light"] .woocommerce-checkout .form-row label {
  color: #374151;
}

.woocommerce-checkout .form-row label .required {
  color: #ef4444;
}

.woocommerce-checkout #payment div.form-row {
  display: none;
}

.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.2));
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  color: #fff;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

[data-theme="light"] .woocommerce-checkout .form-row input[type="text"],
[data-theme="light"] .woocommerce-checkout .form-row input[type="email"],
[data-theme="light"] .woocommerce-checkout .form-row input[type="tel"],
[data-theme="light"] .woocommerce-checkout .form-row input[type="number"],
[data-theme="light"] .woocommerce-checkout .form-row input[type="password"],
[data-theme="light"] .woocommerce-checkout .form-row textarea,
[data-theme="light"] .woocommerce-checkout .form-row select {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none;
  border-color: var(--cloud-primary, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.woocommerce-checkout .form-row input::placeholder {
  color: #64748b;
}

/* Select2 Dropdown Styling */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: auto;
  padding: 10px 16px;
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.2));
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
}

[data-theme="light"] .woocommerce-checkout .select2-container--default .select2-selection--single {
  background: #fff;
  border-color: #e2e8f0;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff;
  line-height: 1.5;
  padding: 0;
}

[data-theme="light"] .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0f172a;
}

/* Order Review Section */
.woocommerce-checkout #order_review_heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
}

[data-theme="light"] .woocommerce-checkout #order_review_heading {
  color: #0f172a;
}

.woocommerce-checkout #order_review {
  background: var(--cloud-dark-lighter, #1e293b);
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  border-radius: 16px;
  padding: 24px;
}

[data-theme="light"] .woocommerce-checkout #order_review {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Order Review Table */
.woocommerce-checkout-review-order-table {
  width: 100%;
  margin-bottom: 20px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
}

[data-theme="light"] .woocommerce-checkout-review-order-table th,
[data-theme="light"] .woocommerce-checkout-review-order-table td {
  border-color: #f1f5f9;
}

.woocommerce-checkout-review-order-table thead th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #94a3b8;
}

.woocommerce-checkout-review-order-table tbody td {
  color: #e2e8f0;
}

[data-theme="light"] .woocommerce-checkout-review-order-table tbody td {
  color: #1e293b;
}

.woocommerce-checkout-review-order-table tbody .product-name {
  font-weight: 500;
}

.woocommerce-checkout-review-order-table tbody .product-total {
  text-align: right;
  font-weight: 600;
  color: var(--cloud-success, #22c55e);
}

.woocommerce-checkout-review-order-table tfoot th {
  text-align: left;
  font-weight: 500;
  color: #94a3b8;
}

[data-theme="light"] .woocommerce-checkout-review-order-table tfoot th {
  color: #64748b;
}

.woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  color: #e2e8f0;
}

[data-theme="light"] .woocommerce-checkout-review-order-table tfoot td {
  color: #1e293b;
}

.woocommerce-checkout-review-order-table tfoot .order-total th {
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  padding-top: 16px;
}

[data-theme="light"] .woocommerce-checkout-review-order-table tfoot .order-total th {
  color: #0f172a;
}

.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--cloud-success, #22c55e);
  padding-top: 16px;
}

/* Payment Methods */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  border: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  border-radius: 12px;
  overflow: hidden;
}

[data-theme="light"] .woocommerce-checkout #payment ul.payment_methods {
  border-color: #e2e8f0;
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cloud-border, rgba(148, 163, 184, 0.1));
  background: rgba(15, 23, 42, 0.3);
}

[data-theme="light"] .woocommerce-checkout #payment ul.payment_methods li {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: #e2e8f0;
}

[data-theme="light"] .woocommerce-checkout #payment ul.payment_methods li label {
  color: #1e293b;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(14, 165, 233, 0.05);
  border-radius: 8px;
  font-size: 0.9rem;
  color: #94a3b8;
}

[data-theme="light"] .woocommerce-checkout #payment ul.payment_methods li .payment_box,
[data-theme="light"] .simplio-checkout-wrapper .payment_box,
[data-theme="light"] .payment_methods .payment_box,
[data-theme="light"] .payment_method_bacs .payment_box {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
}

[data-theme="light"] .woocommerce-checkout #payment ul.payment_methods li .payment_box p,
[data-theme="light"] .simplio-checkout-wrapper .payment_box p,
[data-theme="light"] .payment_methods .payment_box p,
[data-theme="light"] .payment_method_bacs .payment_box p {
  color: #1e293b !important;
}

/* Place Order Button */
.woocommerce-checkout #place_order {
  width: 100%;
  padding: 18px 24px;
  background: linear-gradient(135deg, var(--cloud-success, #22c55e) 0%, #16a34a 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.woocommerce-checkout #place_order:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

/* Privacy Policy */
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 16px;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--cloud-primary, #0ea5e9);
}

/* Checkout Responsive */
@media (max-width: 768px) {
  .woocommerce-checkout .woocommerce {
    padding: 20px 15px;
  }

  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2,
  .woocommerce-checkout #order_review {
    padding: 20px 16px;
  }

  .woocommerce-checkout h3 {
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   CLOUD DOMAIN SELECTION MODAL
   ========================================================================== */

.cloud-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.cloud-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.cloud-modal {
  background: var(--cloud-dark-lighter);
  border: 1px solid var(--cloud-border);
  border-radius: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(30px) scale(0.95);
  transition: all 0.3s ease;
}

.cloud-modal-overlay.is-open .cloud-modal {
  transform: translateY(0) scale(1);
}

.cloud-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--cloud-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.cloud-modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.cloud-modal-header {
  text-align: center;
  padding: 40px 30px 30px;
}

.cloud-modal-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-accent) 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
}

.cloud-modal-header h3 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.cloud-modal-header p {
  margin: 0;
  color: var(--cloud-text-muted);
  font-size: 1rem;
}

.cloud-modal-options {
  padding: 0 20px 30px;
}

.cloud-modal-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  margin-bottom: 12px;
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.cloud-modal-option:hover {
  border-color: var(--cloud-primary);
  background: rgba(14, 165, 233, 0.08);
}

.cloud-modal-option:last-child {
  margin-bottom: 0;
}

.cloud-modal-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cloud-primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.cloud-modal-option-content {
  flex: 1;
}

.cloud-modal-option-content h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.cloud-modal-option-content p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cloud-text-muted);
}

.cloud-modal-option > i.fa-chevron-right,
.cloud-modal-option > i.fa-arrow-right {
  color: var(--cloud-text-muted);
  transition: all 0.2s ease;
}

.cloud-modal-option:hover > i.fa-chevron-right,
.cloud-modal-option:hover > i.fa-arrow-right {
  color: var(--cloud-primary);
  transform: translateX(4px);
}

.cloud-modal-option-skip {
  background: transparent;
  border-color: transparent;
  padding: 14px 20px;
}

.cloud-modal-option-skip:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: transparent;
}

.cloud-modal-option-skip .cloud-modal-option-content h4 {
  color: var(--cloud-text-muted);
  font-weight: 500;
}

/* Modal Domain Step */
.cloud-modal-step {
  padding: 20px 24px 30px;
}

.cloud-modal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--cloud-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.cloud-modal-back:hover {
  color: var(--cloud-primary);
}

.cloud-modal-step h4 {
  margin: 0 0 20px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.cloud-modal-domain-input {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.cloud-modal-input-wrap {
  flex: 1;
  display: flex;
  background: var(--cloud-dark);
  border: 1px solid var(--cloud-border);
  border-radius: 12px;
  overflow: hidden;
}

.cloud-modal-input-wrap input {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  outline: none;
}

.cloud-modal-input-wrap input::placeholder {
  color: var(--cloud-text-muted);
}

.cloud-modal-input-wrap select {
  padding: 14px 12px;
  background: rgba(14, 165, 233, 0.1);
  border: none;
  border-left: 1px solid var(--cloud-border);
  color: var(--cloud-primary);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  outline: none;
}

.cloud-modal-domain-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--cloud-primary) 0%, var(--cloud-primary-dark) 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cloud-modal-domain-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

.cloud-modal-domain-result {
  text-align: center;
}

.cloud-modal-domain-result .cloud-domain-checking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  color: var(--cloud-text-muted);
}

.cloud-modal-domain-result .cloud-domain-available {
  padding: 24px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px;
}

.cloud-modal-domain-result .cloud-domain-available > i {
  font-size: 2rem;
  color: var(--cloud-success);
  margin-bottom: 12px;
}

.cloud-modal-domain-result .cloud-domain-available > span {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.cloud-modal-domain-result .cloud-domain-unavailable {
  padding: 24px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 16px;
}

.cloud-modal-domain-result .cloud-domain-unavailable > i {
  font-size: 2rem;
  color: #ef4444;
  margin-bottom: 12px;
}

.cloud-modal-domain-result .cloud-domain-unavailable > span {
  display: block;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.cloud-modal-domain-result .cloud-domain-unavailable > p {
  margin: 0;
  color: var(--cloud-text-muted);
  font-size: 0.9rem;
}

.cloud-modal-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--cloud-success) 0%, #16a34a 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.cloud-modal-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.cloud-modal-note {
  margin: 8px 0 12px;
  color: var(--cloud-text-muted);
  font-size: 0.9rem;
}

/* Modal Responsive */
@media (max-width: 576px) {
  .cloud-modal {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
  }

  .cloud-modal-overlay.is-open .cloud-modal {
    transform: translateY(0);
  }

  .cloud-modal-header {
    padding: 30px 20px 20px;
  }

  .cloud-modal-options {
    padding: 0 16px 24px;
  }

  .cloud-modal-option {
    padding: 14px 16px;
    gap: 12px;
  }

  .cloud-modal-option-icon {
    width: 42px;
    height: 42px;
  }

  .cloud-modal-domain-input {
    flex-direction: column;
  }

  .cloud-modal-domain-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Modal Landscape */
@media (max-height: 500px) and (orientation: landscape) {
  .cloud-modal {
    max-height: 95vh;
    border-radius: 16px;
  }

  .cloud-modal-header {
    padding: 16px 20px 12px;
  }

  .cloud-modal-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .cloud-modal-header h3 {
    font-size: 1.1rem;
  }

  .cloud-modal-header p {
    font-size: 0.85rem;
    margin-bottom: 0;
  }

  .cloud-modal-options {
    padding: 8px 16px 16px;
    gap: 8px;
  }

  .cloud-modal-option {
    padding: 10px 14px;
  }

  .cloud-modal-option-icon {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .cloud-modal-step {
    padding: 12px 16px 16px;
  }
}

/* Light Theme Modal */
[data-theme="light"] .cloud-modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .cloud-modal {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-modal-close {
  background: #f1f5f9;
  color: #64748b;
}

[data-theme="light"] .cloud-modal-header h3 {
  color: #0f172a;
}

[data-theme="light"] .cloud-modal-option {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-modal-option:hover {
  background: rgba(14, 165, 233, 0.05);
}

[data-theme="light"] .cloud-modal-option-content h4 {
  color: #0f172a;
}

[data-theme="light"] .cloud-modal-input-wrap {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .cloud-modal-input-wrap input {
  color: #0f172a;
}

[data-theme="light"] .cloud-modal-input-wrap select {
  background: rgba(14, 165, 233, 0.08);
  border-left-color: #e2e8f0;
}

[data-theme="light"] .cloud-modal-step h4 {
  color: #0f172a;
}

[data-theme="light"] .cloud-modal-domain-result .cloud-domain-available > span,
[data-theme="light"] .cloud-modal-domain-result .cloud-domain-unavailable > span {
  color: #0f172a;
}
.woocommerce-checkout #payment div.payment_box::before {
  display: none;
}
.woocommerce .av_tip_facturare_radio span.woocommerce-input-wrapper label {
    line-height: 1;
    margin-left: 10px;
}