/* ==========================================================================
   UI KIT - Modern Dark/Cyan Theme Design System
   
   Author: Florin Pinta (xttrust)
   Website: https://creativeigniter.com
   GitHub: https://github.com/xttrust
   Email: xttrust@creativeigniter.com
   
   Description: Complete design system with variables, components & utilities
   Dependencies: Bootstrap 5.3+, Font Awesome 6+, AOS
   License: MIT
   ========================================================================== */

/* Root Variables ---------------------------------------------------------- */
:root {
  --uk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  --uk-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  
  /* Performance optimizations */
  --uk-will-change: transform, opacity;
  --uk-contain: layout style paint;

  /* Color Scale */
  --uk-bg: #121418;
  --uk-bg-alt: #181B21;
  --uk-bg-elevate: #1F242C;
  --uk-surface: #222831;
  --uk-surface-alt: #2C343F;
  --uk-border: #363E49;
  --uk-border-accent: #00b8c1;
  --uk-accent: #00ADB5;
  --uk-accent-rgb: 0,173,181;
  --uk-accent-soft: rgba(0,173,181,.12);
  --uk-accent-grad: linear-gradient(135deg, #00ADB5, #38f9d7 65%, #00ADB5);
  --uk-accent-glow: 0 0 0 3px rgba(0,173,181,.35), 0 0 18px -4px rgba(0,173,181,.55);
  --uk-danger: #FF4D5D;
  --uk-warning: #FFB347;
  --uk-success: #29D197;
  --uk-info: #3FA9F5;
  --uk-text: #E6ECF1;
  --uk-text-alt: #B5BDC6;
  --uk-text-dim: #7D8A97;

  --uk-radius-xs: 4px;
  --uk-radius-sm: 6px;
  --uk-radius: 10px;
  --uk-radius-lg: 16px;
  --uk-radius-pill: 999px;

  --uk-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --uk-shadow-sm: 0 2px 4px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.02) inset;
  --uk-shadow: 0 4px 14px -4px rgba(0,0,0,.6), 0 2px 4px -2px rgba(0,0,0,.35);
  --uk-shadow-lg: 0 10px 32px -8px rgba(0,0,0,.65), 0 2px 6px -2px rgba(0,0,0,.4);
  --uk-shadow-glass: 0 4px 22px -6px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) inset;

  --uk-focus-ring: 0 0 0 3px rgba(0,173,181,.35);
  --uk-transition-fast: 120ms cubic-bezier(.4,0,.2,1);
  --uk-transition: 260ms cubic-bezier(.4,0,.2,1);
  --uk-transition-slow: 500ms cubic-bezier(.4,0,.2,1);
}

[data-theme="light"] {
  /* 🎨 Enhanced Premium Light Theme Palette */
  
  /* Backgrounds - Soft, airy whites with subtle warmth */
  --uk-bg: #FAFBFC;
  --uk-bg-alt: #F5F7FA;
  --uk-bg-elevate: #FFFFFF;
  --uk-surface: #FFFFFF;
  --uk-surface-alt: #F8FAFB;
  
  /* Borders - Crisp but not harsh */
  --uk-border: #E1E8ED;
  --uk-border-accent: #0ABAB5;
  
  /* Text - Rich, high contrast for readability */
  --uk-text: #0F172A;
  --uk-text-alt: #334155;
  --uk-text-dim: #64748B;
  
  /* Accent Colors - Vibrant teal palette with depth */
  --uk-accent: #0ABAB5;
  --uk-accent-rgb: 10,186,181;
  --uk-accent-soft: rgba(10,186,181,.12);
  
  /* Enhanced gradient - smooth color flow */
  --uk-accent-grad: linear-gradient(135deg, #0ABAB5 0%, #56DFCF 35%, #ADEED9 70%, #FFEDF3 100%);
  
  /* Glow effects optimized for light mode */
  --uk-accent-glow: 0 0 0 3px rgba(10,186,181,.25), 0 0 18px -4px rgba(10,186,181,.4);
  --uk-focus-ring: 0 0 0 3px rgba(10,186,181,.25);
  
  /* Shadows - Subtle depth with warm undertones */
  --uk-shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --uk-shadow-sm: 0 2px 4px rgba(15,23,42,.08);
  --uk-shadow: 0 4px 18px -2px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.05);
  --uk-shadow-lg: 0 10px 34px -6px rgba(15,23,42,.14), 0 4px 12px -2px rgba(15,23,42,.08);
  --uk-shadow-glass: 0 8px 32px -8px rgba(15,23,42,.12), 0 0 0 1px rgba(0,0,0,.03) inset;
}

/***************************** Base Reset ******************************/
html { scroll-behavior: smooth; }
body {
  font-family: var(--uk-font-sans);
  background: radial-gradient(circle at 25% 10%, #1b2027, var(--uk-bg));
  color: var(--uk-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  /* Ensure body can act as ScrollSpy root container */
  position: relative;
}

[data-theme="light"] body {
  background: radial-gradient(circle at 25% 10%, #FFFFFF, var(--uk-bg));
  /* Subtle color shift for depth */
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(173,238,217,.08), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(86,223,207,.05), transparent 50%),
    linear-gradient(to bottom, #FFFFFF, var(--uk-bg));
}

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 20% 15%, rgba(0,173,181,.12), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(56,249,215,.08), transparent 55%);
  opacity: .6; z-index: -1; filter: blur(40px) saturate(140%);
}

[data-theme="light"] body::before {
  background: radial-gradient(circle at 20% 15%, rgba(10,186,181,.12), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(86,223,207,.08), transparent 55%);
}

/* Side Navigation (Components Page) */
.uk-side-nav { position:sticky; top:90px; max-height:calc(100vh - 110px); overflow-y:auto; padding-right:.25rem; display:flex; flex-direction:column; gap:.15rem; }
.uk-side-nav a { position:relative; display:block; padding:.42rem .65rem; font-size:.72rem; letter-spacing:.35px; border-radius: var(--uk-radius-pill); color: var(--uk-text-dim); font-weight:500; line-height:1.3; transition: background var(--uk-transition-fast), color var(--uk-transition-fast); }
.uk-side-nav a:hover { background:rgba(0,173,181,.07); color: var(--uk-accent); }
.uk-side-nav a.active { background: var(--uk-accent-soft); color: var(--uk-accent); font-weight:600; }
.uk-side-nav a:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,173,181,.55); background:var(--uk-accent-soft); color:var(--uk-accent); }

[data-theme="light"] .uk-side-nav a:hover { background:rgba(10,186,181,.07); }
[data-theme="light"] .uk-side-nav a:focus-visible { box-shadow:0 0 0 2px rgba(10,186,181,.55); }

h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: .5px; }
.lead { color: var(--uk-text-alt); font-size: 1.1rem; }
small, .text-muted { color: var(--uk-text-dim) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--uk-bg-alt); }
::-webkit-scrollbar-thumb { 
  background: linear-gradient(var(--uk-bg-elevate), var(--uk-surface-alt)); 
  border-radius: 20px; 
  border: 2px solid var(--uk-bg-alt); 
}
::-webkit-scrollbar-thumb:hover { background: var(--uk-accent); }

/* Firefox scrollbar */
html { scrollbar-width: thin; scrollbar-color: var(--uk-accent) var(--uk-bg-alt); }

/* Fallback for older browsers */
@supports not (backdrop-filter: blur(10px)) {
  .uk-card-glass { background: var(--uk-surface-alt); }
  .uk-navbar { background: var(--uk-surface); }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .uk-card:hover,
  .btn:hover,
  .testimonial-card:hover {
    transform: none !important;
  }
  
  .testimonial-slider .testimonial-track {
    transition: none !important;
  }
}

/* Links */
a { color: var(--uk-accent); text-decoration: none; transition: color var(--uk-transition-fast); }
a:hover { color: #38f9d7; }

[data-theme="light"] a:hover { color: #56DFCF; }

/* Focus Ring */
:focus-visible { 
  outline: none; 
  box-shadow: var(--uk-focus-ring); 
  transition: box-shadow var(--uk-transition-fast);
}

/* Containers & Sections */
.section { padding: clamp(3rem, 7vw, 6rem) 0; position: relative; }
.section-narrow { padding: 3rem 0; }
.section .section-heading { margin-bottom: 2.5rem; }

/* Utility Flex/Grid Helpers */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.grid { display: grid; gap: 1.25rem; }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Card Base */
.uk-card { 
  background: linear-gradient(145deg, var(--uk-surface), var(--uk-surface-alt)); 
  border: 1px solid var(--uk-border); 
  border-radius: var(--uk-radius-lg); 
  padding: 1.5rem 1.4rem; 
  position: relative; 
  box-shadow: var(--uk-shadow); 
  transition: transform var(--uk-transition), box-shadow var(--uk-transition), border-color var(--uk-transition-fast);
  will-change: var(--uk-will-change);
  contain: var(--uk-contain);
}
.uk-card:hover { transform: translateY(-6px); box-shadow: var(--uk-shadow-lg), 0 0 0 1px rgba(0,173,181,.18); border-color: var(--uk-border-accent); }

[data-theme="light"] .uk-card:hover { box-shadow: var(--uk-shadow-lg), 0 0 0 1px rgba(10,186,181,.18); }
.uk-card[data-hover='scale'] { transition: transform var(--uk-transition); }
.uk-card[data-hover='scale']:hover { transform: scale(1.03); }

.uk-card-glass { backdrop-filter: blur(16px) saturate(160%); background: linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--uk-shadow-glass); }
.uk-card-outline { background: var(--uk-bg-elevate); border: 1px solid var(--uk-border); }

.uk-card-accent { background: linear-gradient(140deg, rgba(0,173,181,.18), rgba(56,249,215,.1)); border: 1px solid rgba(0,173,181,.4); box-shadow: 0 0 0 1px rgba(0,173,181,.25), 0 8px 28px -8px rgba(0,173,181,.35); }

[data-theme="light"] .uk-card-accent { background: linear-gradient(140deg, rgba(10,186,181,.18), rgba(86,223,207,.1)); border: 1px solid rgba(10,186,181,.4); box-shadow: 0 0 0 1px rgba(10,186,181,.25), 0 8px 28px -8px rgba(10,186,181,.35); }

/* Shadows / Depth */
.depth-1 { box-shadow: var(--uk-shadow-xs); }
.depth-2 { box-shadow: var(--uk-shadow-sm); }
.depth-3 { box-shadow: var(--uk-shadow); }
.depth-4 { box-shadow: var(--uk-shadow-lg); }

/* Buttons */
.btn-uk { --_bg: var(--uk-accent); --_bg-hover: #38f9d7; --_color: #042326; position: relative; background: var(--_bg); color: var(--_color); border: none; border-radius: var(--uk-radius-pill); padding: .75rem 1.25rem; font-weight: 600; letter-spacing: .5px; box-shadow: 0 4px 14px -4px rgba(0,173,181,.5); transition: background var(--uk-transition-fast), transform var(--uk-transition-fast), box-shadow var(--uk-transition-fast); }
.btn-uk:hover { background: var(--_bg-hover); transform: translateY(-2px); }
.btn-uk:active { transform: translateY(0); }
.btn-uk-gradient { background: var(--uk-accent-grad); color: #042326; }

[data-theme="light"] .btn-uk { --_bg-hover: #56DFCF; box-shadow: 0 4px 14px -4px rgba(10,186,181,.5); }
.btn-uk-outline { background: transparent; border: 1px solid var(--uk-accent); color: var(--uk-accent); }
.btn-uk-outline:hover { background: var(--uk-accent); color: #042326; }
.btn-uk-soft { background: var(--uk-accent-soft); color: var(--uk-accent); }
.btn-uk-soft:hover, .btn-uk-soft:active, .btn-uk-soft:focus, .btn-uk-soft:visited { background: rgba(0,173,181,.22); color: var(--uk-accent); }
.btn-uk-ghost { background: transparent; color: var(--uk-accent); }
.btn-uk-ghost:hover { background: rgba(0,173,181,.08); }

[data-theme="light"] .btn-uk-soft:hover, 
[data-theme="light"] .btn-uk-soft:active, 
[data-theme="light"] .btn-uk-soft:focus { background: rgba(10,186,181,.22); }
[data-theme="light"] .btn-uk-ghost:hover { background: rgba(10,186,181,.08); }

.btn-icon { display: inline-flex; align-items: center; gap: .55rem; }
.btn-icon i { font-size: 1.05rem; }

/* Badges */
.badge-uk { --_bg: var(--uk-accent-soft); display: inline-flex; align-items: center; gap: .4rem; background: var(--_bg); color: var(--uk-accent); font-weight: 500; padding: .35rem .7rem; border-radius: var(--uk-radius-pill); font-size: .75rem; letter-spacing: .5px; text-transform: uppercase; }
.badge-pill { border-radius: var(--uk-radius-pill); }
.badge-outline { background: transparent; border: 1px solid var(--uk-accent); }

/* Alerts */
.alert-uk { border: 1px solid var(--uk-border); background: linear-gradient(140deg, var(--uk-surface-alt), var(--uk-surface)); border-left: 4px solid var(--uk-accent); padding: 1.1rem 1.25rem; border-radius: var(--uk-radius); display: flex; gap: .9rem; align-items: flex-start; position: relative; }
.alert-uk i { color: var(--uk-accent); font-size: 1.15rem; margin-top: .2rem; }
.alert-uk.success { border-left-color: var(--uk-success); }
.alert-uk.danger { border-left-color: var(--uk-danger); }
.alert-uk.warning { border-left-color: var(--uk-warning); }
.alert-uk.info { border-left-color: var(--uk-info); }

/* Forms */
.form-control, .form-select { background: var(--uk-surface-alt); border: 1px solid var(--uk-border); color: var(--uk-text); border-radius: var(--uk-radius-sm); padding: .65rem .85rem; font-size: .95rem; transition: border-color var(--uk-transition-fast), background var(--uk-transition-fast); }
.form-control:focus, .form-select:focus { background: var(--uk-surface); border-color: var(--uk-accent); box-shadow: var(--uk-focus-ring); }
.form-control::placeholder { color: var(--uk-text-dim); }
.input-group-text { background: var(--uk-surface-alt); color: var(--uk-text-dim); border: 1px solid var(--uk-border); }

/* Form icon positioning */
.position-relative .password-toggle,
.position-relative .form-icon {
  position: absolute;
  right: 0.75rem;
  cursor: pointer;
  color: var(--uk-text-dim);
  transition: color var(--uk-transition-fast);
  z-index: 5;
  font-size: 0.9rem;
  pointer-events: auto;
}

/* Calculate position based on input location */
.position-relative .password-toggle {
  bottom: 0.75rem; /* Position from bottom of input field */
  top: auto;
  transform: none;
}

/* For forms with labels, position relative to the input */
.position-relative:has(.form-label) .password-toggle {
  bottom: 0.75rem;
  top: auto;
}

.position-relative .password-toggle:hover,
.position-relative .form-icon:hover {
  color: var(--uk-accent);
}

/* Adjust input padding when icon is present */
.position-relative .form-control.has-icon,
.position-relative .password-input {
  padding-right: 2.5rem;
}

.form-floating > label { color: var(--uk-text-dim); }
.form-floating > .form-control:focus ~ label { color: var(--uk-accent); }

.form-check-input { background: var(--uk-surface-alt); border: 1px solid var(--uk-border); }
.form-check-input:checked { background-color: var(--uk-accent); border-color: var(--uk-accent); }

/* Auth Panels */
.auth-panel { background: linear-gradient(140deg, var(--uk-surface), var(--uk-surface-alt)); border: 1px solid var(--uk-border); border-radius: var(--uk-radius-lg); padding: 2.25rem 2.1rem; box-shadow: var(--uk-shadow); position: relative; overflow: hidden; }
.auth-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(0,173,181,.24), transparent 60%); opacity: .6; pointer-events: none; }

[data-theme="light"] .auth-panel::before { background: radial-gradient(circle at 90% 10%, rgba(10,186,181,.24), transparent 60%); }
.auth-panel h1 { font-size: 1.8rem; margin-bottom: 1.25rem; }

.divider-text { display: flex; align-items: center; text-transform: uppercase; font-size: .7rem; letter-spacing: 1.5px; font-weight: 600; gap: .9rem; margin: 1.6rem 0; color: var(--uk-text-dim); }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--uk-border), transparent); }

/* Navbars */
.uk-navbar { backdrop-filter: blur(14px) saturate(150%); background: rgba(18,20,24,.78); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 2px 14px -4px rgba(0,0,0,.5); transition: background var(--uk-transition-fast), transform var(--uk-transition-fast); }
.uk-navbar .navbar-brand { font-weight: 600; letter-spacing: .5px; display: flex; align-items: center; gap: .55rem; color: var(--uk-text); }
.uk-navbar .navbar-brand:hover { color: var(--uk-accent); }
.uk-navbar .navbar-brand .logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--uk-accent-grad); box-shadow: 0 0 0 4px rgba(0,173,181,.25); display: inline-block; }

[data-theme="light"] .uk-navbar { background: rgba(255,255,255,.95); border-bottom: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 14px -4px rgba(0,0,0,.12); }
[data-theme="light"] .uk-navbar .navbar-brand .logo-dot { box-shadow: 0 0 0 4px rgba(10,186,181,.25); }
.uk-navbar .nav-link { position: relative; font-weight: 500; color: var(--uk-text-alt); padding: .65rem 1rem !important; border-radius: var(--uk-radius-pill); }
.uk-navbar .nav-link:hover, .uk-navbar .nav-link:focus { color: var(--uk-text); }
.uk-navbar .nav-link.active { color: var(--uk-accent); background: var(--uk-accent-soft); }

/* Navbar toggler (hamburger menu) */
.navbar-toggler { border-color: var(--uk-border); }
.navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(0,173,181,.25); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 236, 241, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

[data-theme="light"] .navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(10,186,181,.25); }
[data-theme="light"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2827, 36, 48, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.navbar-scrolled { background: rgba(18,20,24,.92); }

[data-theme="light"] .navbar-scrolled { background: rgba(255,255,255,.98); box-shadow: 0 2px 18px -4px rgba(0,0,0,.15); }

/* Hero Sections */
.hero { 
  padding: clamp(5rem, 9vw, 8rem) 0 4rem; 
  position: relative; 
  margin-top: 70px; /* Offset for fixed navbar */
}
.hero-gradient { background: linear-gradient(140deg, #0c1014, #142026 55%, #0c1014); }
.hero h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); background: linear-gradient(90deg, #E6ECF1, #8CEEF2); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: 1px; }
.hero .lead { font-size: 1.15rem; max-width: 640px; }
.hero-cta-group { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

[data-theme="light"] .hero-gradient { background: linear-gradient(140deg, #FFFFFF, #EEF2F5 55%, #F4F7F9); }
[data-theme="light"] .hero h1 { background: linear-gradient(90deg, #1B2430, #0ABAB5); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Pricing */
.pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
.pricing-card { position: relative; overflow: hidden; }
.pricing-card.featured { border: 1px solid var(--uk-accent); box-shadow: var(--uk-accent-glow); }
.pricing-card .badge-featured { position: absolute; top: 14px; right: 14px; background: var(--uk-accent-grad); color: #042326; padding: .4rem .7rem; border-radius: var(--uk-radius-pill); font-size: .65rem; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; }
.price { font-size: 2.2rem; font-weight: 600; letter-spacing: 1px; }
.price small { font-size: .9rem; font-weight: 400; color: var(--uk-text-dim); }

/* Tables */
.table-uk { --bs-table-bg: var(--uk-surface); --bs-table-color: var(--uk-text); --bs-table-border-color: var(--uk-border); }
.table-uk thead { background: var(--uk-surface-alt); }
.table-uk-hover tbody tr:hover { background: var(--uk-surface-alt); }

/* Timeline */
.timeline { position: relative; margin: 2rem 0; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; top: 0; left: 8px; width: 2px; height: 100%; background: linear-gradient(var(--uk-accent), transparent); }
.timeline-item { position: relative; padding: 1rem 1rem 1rem 2rem; margin-bottom: .85rem; border-radius: var(--uk-radius); background: var(--uk-surface-alt); border: 1px solid var(--uk-border); }
.timeline-item::before { content: ""; position: absolute; top: 1.2rem; left: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--uk-accent-grad); box-shadow: 0 0 0 4px rgba(0,173,181,.25); }

[data-theme="light"] .timeline-item::before { box-shadow: 0 0 0 4px rgba(10,186,181,.25); }

/* Steps - Enhanced Multi-Step Design */
.steps { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 1.25rem; 
  counter-reset: step; 
}

.step { 
  flex: 1 1 180px; 
  background: var(--uk-surface-alt); 
  border: 1px solid var(--uk-border); 
  padding: 2.75rem 1rem 1.1rem; /* Extra top padding for the number badge */
  border-radius: var(--uk-radius); 
  position: relative;
  transition: all var(--uk-transition);
}

.step::before { 
  counter-increment: step; 
  content: counter(step); 
  position: absolute; 
  top: 0.85rem; 
  left: 50%; 
  transform: translateX(-50%);
  background: var(--uk-accent-grad); 
  color: #042326; 
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem; 
  font-weight: 700; 
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,173,181,.25);
}

/* Active step styling */
.step.active {
  border-color: var(--uk-accent);
  background: var(--uk-accent-soft);
  box-shadow: 0 4px 12px rgba(0,173,181,.15);
}

.step.active::before {
  box-shadow: 0 2px 12px rgba(0,173,181,.4);
  animation: pulse 2s ease-in-out infinite;
}

/* Completed step styling */
.step.completed {
  border-color: var(--uk-success);
  opacity: 0.8;
}

.step.completed::before {
  content: "✓";
  background: linear-gradient(135deg, var(--uk-success), #10B981);
}

/* Step title styling */
.step h6,
.step .step-title {
  margin: 0;
  font-weight: 600;
  text-align: center;
  font-size: 0.95rem;
  color: var(--uk-text);
}

.step p,
.step .step-desc {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--uk-text-dim);
  text-align: center;
  line-height: 1.4;
}

/* Pulse animation for active step */
@keyframes pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

/* Light theme adjustments */
[data-theme="light"] .step::before {
  box-shadow: 0 2px 8px rgba(10,186,181,.25);
}

[data-theme="light"] .step.active {
  box-shadow: 0 4px 12px rgba(10,186,181,.15);
}

[data-theme="light"] .step.active::before {
  box-shadow: 0 2px 12px rgba(10,186,181,.4);
}

/* Footer */
.footer { background: linear-gradient(140deg, #0d1115, #141a20); padding: 3.5rem 0 2.5rem; position: relative; border-top: 1px solid var(--uk-border); }
.footer a { color: var(--uk-text-alt); }
.footer a:hover { color: var(--uk-text); }
.footer .footer-brand { font-weight: 600; letter-spacing: .5px; font-size: 1.05rem; }
.footer-bottom { border-top: 1px solid var(--uk-border); margin-top: 2.5rem; padding-top: 1.2rem; font-size: .85rem; color: var(--uk-text-dim); }

[data-theme="light"] .footer { background: linear-gradient(140deg, #FFFFFF, #F5F8FA); }

/* Back To Top */
#backToTop { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--uk-accent-grad); color: #042326; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; box-shadow: var(--uk-shadow-lg); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: all var(--uk-transition-fast); z-index: 999; }
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { box-shadow: var(--uk-accent-glow); }

/* Theme Toggle */
.theme-toggle { background: var(--uk-surface-alt); border: 1px solid var(--uk-border); color: var(--uk-text-alt); width: 42px; height: 42px; border-radius: var(--uk-radius-pill); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--uk-transition-fast), color var(--uk-transition-fast); position: relative; }
.theme-toggle:hover { color: var(--uk-accent); }
.theme-toggle.active { color: var(--uk-accent); box-shadow: 0 0 0 1px var(--uk-accent), 0 0 0 6px rgba(0,173,181,.25); }

[data-theme="light"] .theme-toggle.active { box-shadow: 0 0 0 1px var(--uk-accent), 0 0 0 6px rgba(10,186,181,.25); }

/* Animations & Motion */
.fade-in-up { animation: fadeInUp .8s var(--uk-transition) both; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(24px); } to { opacity:1; transform: translateY(0); } }

/* Glow Hover */
.hover-glow { position: relative; }
.hover-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 20%, rgba(56,249,215,.25), transparent 65%); opacity: 0; transition: opacity var(--uk-transition-slow); }
.hover-glow:hover::after { opacity: 1; }

/* Glass / Frosted */
.glass { background: linear-gradient(130deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,.1); box-shadow: var(--uk-shadow-glass); }

/* Gradient Text */
.gradient-text { background: linear-gradient(90deg, #E6ECF1, #8CEEF2); -webkit-background-clip: text; background-clip: text; color: transparent; }

[data-theme="light"] .gradient-text { background: linear-gradient(90deg, #1B2430, #0ABAB5); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Code Blocks */
.code-block { position: relative; background: #11161a; border: 1px solid var(--uk-border); padding: 1rem 1rem .75rem; border-radius: var(--uk-radius); font-family: var(--uk-font-mono); font-size: .8rem; line-height: 1.4; overflow-x: auto; }
.code-block .copy-btn { position: absolute; top: 8px; right: 8px; background: var(--uk-surface-alt); border: 1px solid var(--uk-border); font-size: .65rem; padding: .35rem .55rem; border-radius: var(--uk-radius-pill); cursor: pointer; color: var(--uk-text-dim); transition: all var(--uk-transition-fast); }
.code-block .copy-btn:hover { color: var(--uk-accent); }

[data-theme="light"] .code-block { background: #F5F8FA; border-color: var(--uk-border); color: var(--uk-text); }

/* Accordions */
.accordion-uk .accordion-item { background: var(--uk-surface); border: 1px solid var(--uk-border); border-radius: var(--uk-radius) !important; overflow: hidden; }
.accordion-uk .accordion-button { background: var(--uk-surface-alt); color: var(--uk-text); font-weight: 500; }
.accordion-uk .accordion-button:not(.collapsed) { background: var(--uk-accent-soft); color: var(--uk-accent); }
.accordion-uk .accordion-body { background: var(--uk-surface); }
.accordion-uk { --_acc-radius: var(--uk-radius-lg); }
.accordion-uk .accordion-item { background: linear-gradient(135deg,var(--uk-surface),var(--uk-surface-alt)); border: 1px solid var(--uk-border); border-radius: var(--_acc-radius)!important; overflow: hidden; position: relative; transition: box-shadow var(--uk-transition), border-color var(--uk-transition-fast); }
.accordion-uk .accordion-item + .accordion-item { margin-top: .65rem; }
.accordion-uk .accordion-item::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 95% 10%, rgba(0,173,181,.18), transparent 60%); opacity:0; transition: opacity var(--uk-transition-slow); }

[data-theme="light"] .accordion-uk .accordion-item::before { background: radial-gradient(circle at 95% 10%, rgba(10,186,181,.18), transparent 60%); }
.accordion-uk .accordion-button { background: transparent; color: var(--uk-text); font-weight:500; padding: 1rem 1.15rem; box-shadow: none; position: relative; }
.accordion-uk .accordion-button::after { transform: scale(.9); }
.accordion-uk .accordion-button:not(.collapsed) { color: var(--uk-accent); }
.accordion-uk .accordion-button:focus { box-shadow: none; }
.accordion-uk .accordion-button:not(.collapsed) + .accordion-collapse { animation: accExpand .4s cubic-bezier(.4,0,.2,1); }
.accordion-uk .accordion-collapse { border-top: 1px solid var(--uk-border); }
.accordion-uk .accordion-body { background: linear-gradient(140deg,var(--uk-surface-alt),var(--uk-surface)); padding: .95rem 1.15rem 1.2rem; font-size: .875rem; color: var(--uk-text-alt); }
.accordion-uk .accordion-item.active,
.accordion-uk .accordion-button:not(.collapsed) { --_shadow: var(--uk-shadow-lg); }
.accordion-uk .accordion-item.active { border-color: var(--uk-border-accent); box-shadow: var(--uk-shadow-lg), 0 0 0 1px rgba(0,173,181,.25); }

[data-theme="light"] .accordion-uk .accordion-item.active { box-shadow: var(--uk-shadow-lg), 0 0 0 1px rgba(10,186,181,.25); }
.accordion-uk .accordion-item.active::before { opacity:1; }
@keyframes accExpand { from { opacity:.4; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } }


/* Tabs (simplified - duplicate rules removed, decorative underline removed) */
.nav-tabs.uk-tabs { border-bottom:1px solid var(--uk-border); position:relative; margin-bottom:1rem; }
.nav-tabs.uk-tabs .nav-link { 
    background:transparent; 
    color:var(--uk-text-alt); 
    border:1px solid transparent; 
    border-radius:var(--uk-radius-pill); 
    padding:.55rem 1rem .6rem; 
    font-weight:500; 
    position:relative; 
    transition: all var(--uk-transition-fast); 
    opacity: 0.7;
}
.nav-tabs.uk-tabs .nav-link:hover { 
    color:var(--uk-text); 
    opacity: 1;
    background: rgba(0,173,181,.05);
}
.nav-tabs.uk-tabs .nav-link.active { 
    background:var(--uk-accent-grad); 
    color:#fff; 
    border-color:transparent; 
    box-shadow:0 4px 12px -2px rgba(0,173,181,.45); 
    opacity: 1;
    font-weight: 600;
    transform: translateY(-2px);
}
[data-theme="light"] .nav-tabs.uk-tabs .nav-link.active {
    background:var(--uk-accent-grad);
    color:#042326;
    box-shadow:0 4px 12px -2px rgba(0,173,181,.35);
}
/* Tab content spacing */
.uk-tab-content-spaced { margin-top:.35rem; }

/* Animated elevation utility applied broadly */
.uk-elevate-hover { transition: transform var(--uk-transition), box-shadow var(--uk-transition), border-color var(--uk-transition-fast); }
.uk-elevate-hover:hover { transform: translateY(-6px); box-shadow: var(--uk-shadow-lg), 0 0 0 1px rgba(0,173,181,.25); border-color: var(--uk-border-accent)!important; }

/* Fade-in scale utility */
.fade-scale-in { animation: fadeScaleIn .55s cubic-bezier(.4,0,.2,1); }
@keyframes fadeScaleIn { from { opacity:0; transform: translateY(14px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }

/* Apply enhancements to existing components generically */
.uk-card, .pricing-card, .team-card, .testimonial-card, .stat-block, .cta-banner, .faq-item { transition: transform var(--uk-transition), box-shadow var(--uk-transition), border-color var(--uk-transition-fast); }
.uk-card.uk-elevated, .testimonial-card.active { animation: fadeScaleIn .6s cubic-bezier(.4,0,.2,1); }

/* Progress / Meters */
.progress-uk { height: 10px; background: var(--uk-surface-alt); border-radius: var(--uk-radius-pill); overflow: hidden; border: 1px solid var(--uk-border); }
.progress-uk .bar { height: 100%; background: var(--uk-accent-grad); position: relative; animation: progressSlide 1.8s ease-in-out infinite alternate; }
@keyframes progressSlide { from { filter: brightness(.95); } to { filter: brightness(1.15); } }

/* Shadows Outline Hover */
.outline-hover { position: relative; }
.outline-hover::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(120deg, rgba(0,173,181,.6), rgba(56,249,215,.1)); border-radius: inherit; opacity: 0; transition: opacity var(--uk-transition); }
.outline-hover:hover::after { opacity: 1; }

/* Lists */
.list-check li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; }
.list-check li::before { content: "\f00c"; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .15rem; color: var(--uk-accent); font-size: .8rem; }

/* Grids Showcase */
.demo-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); }
.demo-grid .cell { background: var(--uk-surface-alt); padding: .75rem .65rem; border-radius: var(--uk-radius-sm); font-size: .75rem; letter-spacing: .5px; text-transform: uppercase; color: var(--uk-text-dim); border: 1px solid var(--uk-border); }

/* Modal Custom */
.modal-content { background: linear-gradient(150deg, var(--uk-surface), var(--uk-surface-alt)); border: 1px solid var(--uk-border); box-shadow: var(--uk-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--uk-border); }
.modal-footer { border-top: 1px solid var(--uk-border); }

/* Offcanvas (Enhanced) */
.offcanvas { background: linear-gradient(160deg, var(--uk-surface), var(--uk-surface-alt)); }
.offcanvas-header { border-bottom: 1px solid var(--uk-border); }

/* Premium variant */
.offcanvas-uk { 
  background: radial-gradient(circle at 90% 10%, rgba(0,173,181,.18), transparent 65%),
              linear-gradient(150deg, var(--uk-surface), var(--uk-surface-alt));
  backdrop-filter: blur(18px) saturate(160%);
  border-left: 1px solid var(--uk-border);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 34px -8px rgba(0,0,0,.65);
  animation: offcanvasReveal .55s cubic-bezier(.4,0,.2,1);
  position: relative;
  min-height:100vh; /* ensure full vertical stretch */
  display:flex; flex-direction:column;
}
.offcanvas-uk::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,173,181,.12), transparent 55%); opacity:.65; pointer-events:none; }

[data-theme="light"] .offcanvas-uk::before { background:linear-gradient(120deg, rgba(10,186,181,.12), transparent 55%); }
.offcanvas-uk .offcanvas-header { border-bottom:1px solid var(--uk-border); background:linear-gradient(140deg,var(--uk-surface-alt),var(--uk-surface)); }
.offcanvas-uk h5 { font-weight:600; letter-spacing:.6px; background:linear-gradient(90deg,#E6ECF1,#8CEEF2); -webkit-background-clip:text; background-clip:text; color:transparent; }

[data-theme="light"] .offcanvas-uk h5 { background:linear-gradient(90deg,#1B2430,#0ABAB5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.offcanvas-uk p { color: var(--uk-text-alt); }
.offcanvas-uk nav { margin-top:.35rem; }
.offcanvas-uk .offcanvas-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.offcanvas-uk .offcanvas-links a { 
  display:flex; align-items:center; gap:.6rem; font-size:.8rem; letter-spacing:.35px; font-weight:500; padding:.55rem .8rem .55rem .7rem; 
  color: var(--uk-text-dim); border:none; border-radius: var(--uk-radius-pill); position:relative; text-decoration:none; background:rgba(255,255,255,.03); transition: background var(--uk-transition-fast), color var(--uk-transition-fast), transform var(--uk-transition-fast); 
}
.offcanvas-uk .offcanvas-links a .icon { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:linear-gradient(140deg,var(--uk-surface-alt),var(--uk-surface)); color:var(--uk-accent); font-size:.85rem; box-shadow:0 2px 6px -2px rgba(0,0,0,.5); flex-shrink:0; }
.offcanvas-uk .offcanvas-links a:hover { background:var(--uk-accent-soft); color:var(--uk-accent); transform:translateX(4px); }
.offcanvas-uk .offcanvas-links a:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,173,181,.55); background:var(--uk-accent-soft); color:var(--uk-accent); }

[data-theme="light"] .offcanvas-uk .offcanvas-links a:focus-visible { box-shadow:0 0 0 2px rgba(10,186,181,.55); }
.offcanvas-uk .offcanvas-links a span.label { flex:1; }
.offcanvas-uk .mini-heading { font-size:.65rem; text-transform:uppercase; letter-spacing:1.4px; font-weight:600; color:var(--uk-text-dim); margin:.75rem 0 .35rem; }
.offcanvas-uk .close-btn.btn-close { filter: invert(1) grayscale(.4); opacity:.75; }
.offcanvas-uk .close-btn.btn-close:hover { opacity:1; }
@media (max-width: 576px){ .offcanvas-uk .offcanvas-links a { font-size:.78rem; padding:.5rem .65rem; } }

/* Offcanvas body flex scroll */
.offcanvas-uk .offcanvas-body { flex:1 1 auto; overflow-y:auto; }
@keyframes offcanvasReveal { from { opacity:0; transform: translateX(40px); } to { opacity:1; transform: translateX(0); } }

/* Toasts */
.toast-container { z-index: 1080; }
.toast-uk { background: var(--uk-surface); border: 1px solid var(--uk-border); color: var(--uk-text-alt); box-shadow: var(--uk-shadow); }
.toast-uk .toast-header { background: var(--uk-surface-alt); color: var(--uk-text-dim); border-bottom: 1px solid var(--uk-border); }

/* Depth / Elevations Utilities */
.elevate-1 { box-shadow: var(--uk-shadow-xs); }
.elevate-2 { box-shadow: var(--uk-shadow-sm); }
.elevate-3 { box-shadow: var(--uk-shadow); }
.elevate-4 { box-shadow: var(--uk-shadow-lg); }

/* Spacing Utilities (sample subset) */
.mt-6 { margin-top: 4rem !important; }
.mb-6 { margin-bottom: 4rem !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.px-gutter { padding-left: clamp(1rem,4vw,3rem); padding-right: clamp(1rem,4vw,3rem); }

/* Width Helpers */
.max-w-xs { max-width: 420px; }
.max-w-sm { max-width: 560px; }
.max-w-md { max-width: 720px; }
.max-w-lg { max-width: 960px; }
.max-w-xl { max-width: 1200px; }

/* Hide Scroll (x) */
.no-scroll-x { overflow-x: hidden; }

/* Demo placeholders */
.placeholder-box { background: repeating-linear-gradient(45deg, var(--uk-surface-alt), var(--uk-surface-alt) 10px, var(--uk-surface) 10px, var(--uk-surface) 20px); border: 1px solid var(--uk-border); border-radius: var(--uk-radius); height: 140px; position: relative; display: flex; align-items: center; justify-content: center; font-size: .75rem; letter-spacing: 1px; color: var(--uk-text-dim); }

/* --- New Component Enhancements --------------------------------------- */
/* Carousel */
.uk-carousel-demo { max-width: 900px; border: 1px solid var(--uk-border); border-radius: var(--uk-radius-lg); box-shadow: var(--uk-shadow); background: var(--uk-surface-alt); position: relative; }
.uk-carousel-demo .carousel-inner { position: relative; }
.uk-carousel-image { height: 420px; background: #0c1014; background-image: var(--img); background-size: cover; background-position: center; position: relative; }
.uk-carousel-image::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); }
.uk-carousel-demo .carousel-caption { bottom: 1.75rem; left: 1.75rem; right: 1.75rem; text-shadow: 0 4px 18px rgba(0,0,0,.6); }
.uk-carousel-demo .carousel-caption h5 { font-weight:600; letter-spacing:.5px; }
.uk-carousel-demo .carousel-indicators [data-bs-target] { width:10px; height:10px; border-radius:50%; background: var(--uk-text-dim); border:none; opacity:.4; transition:opacity var(--uk-transition-fast), background var(--uk-transition-fast); }
.uk-carousel-demo .carousel-indicators .active { background: var(--uk-accent); opacity:1; }

/* Mega Menu */
.mega-menu { background: linear-gradient(140deg, var(--uk-surface), var(--uk-surface-alt)); border: 1px solid var(--uk-border); border-radius: var(--uk-radius-lg); }
.mega-menu .mega-link { display:block; padding:.35rem 0; color: var(--uk-text-alt); transition: color var(--uk-transition-fast); }
.mega-menu .mega-link:hover { color: var(--uk-accent); }

/* Pagination */
.pagination-uk .page-link { background: var(--uk-surface-alt); border: 1px solid var(--uk-border); color: var(--uk-text-alt); font-size: .8rem; padding: .55rem .9rem; border-radius: var(--uk-radius-sm); margin-right:.4rem; transition: all var(--uk-transition-fast); }
.pagination-uk .page-item.active .page-link { background: var(--uk-accent); color: #042326; border-color: var(--uk-accent); }
.pagination-uk .page-link:hover { background: var(--uk-accent-soft); color: var(--uk-accent); }
.pagination-uk .page-item.disabled .page-link { opacity:.4; }

/* Breadcrumbs */
.breadcrumb-uk { --bs-breadcrumb-divider: '›'; font-size: .8rem; }
.breadcrumb-uk .breadcrumb-item a { color: var(--uk-text-alt); }
.breadcrumb-uk .breadcrumb-item a:hover { color: var(--uk-accent); }
.breadcrumb-uk .breadcrumb-item.active { color: var(--uk-accent); font-weight:500; }

/* Tooltips */
.tooltip { font-family: var(--uk-font-sans); }
.tooltip .tooltip-inner { background: linear-gradient(140deg,var(--uk-surface-alt),var(--uk-surface)); color: var(--uk-text); border:1px solid var(--uk-border); font-size:.7rem; letter-spacing:.5px; padding:.4rem .55rem; border-radius: var(--uk-radius-sm); box-shadow: var(--uk-shadow); }
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-end .tooltip-arrow::before { background: linear-gradient(140deg,var(--uk-surface-alt),var(--uk-surface)); border:1px solid var(--uk-border); }

/* Popovers */
.popover {
  background: linear-gradient(145deg,var(--uk-surface),var(--uk-surface-alt));
  border:1px solid var(--uk-border);
  box-shadow: var(--uk-shadow-lg);
  color: var(--uk-text);
  border-radius: var(--uk-radius);
  /* Bootstrap vars to ensure arrow/header/body colors match theme */
  --bs-popover-bg: var(--uk-surface);
  --bs-popover-border-color: var(--uk-border);
  --bs-popover-header-bg: var(--uk-surface-alt);
  --bs-popover-header-color: var(--uk-text);
  --bs-popover-body-color: var(--uk-text);
}
.popover-header { background: var(--uk-surface-alt); border-bottom:1px solid var(--uk-border); font-weight:600; font-size:.8rem; letter-spacing:.5px; color: var(--uk-text); }
.popover-body { font-size:.8rem; line-height:1.5; color: var(--uk-text); }

/* Spinners */
.spinner-uk { color: var(--uk-accent); }
.spinner-uk.spinner-border { border-width:.2em; }

/* Range Input */
.form-range-uk { width:100%; height:1.2rem; padding:0; background:transparent; }
.form-range-uk:focus { outline:none; }
.form-range-uk::-webkit-slider-runnable-track { height:6px; background:linear-gradient(90deg,var(--uk-accent-soft),rgba(0,173,181,.05)); border-radius:3px; border:1px solid var(--uk-border); }
.form-range-uk::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--uk-accent-grad); border:1px solid rgba(0,173,181,.55); margin-top:-7px; box-shadow:0 0 0 3px rgba(0,173,181,.25); transition: transform var(--uk-transition-fast); }
.form-range-uk::-webkit-slider-thumb:active { transform:scale(.9); }
.form-range-uk::-moz-range-track { height:6px; background:linear-gradient(90deg,var(--uk-accent-soft),rgba(0,173,181,.05)); border-radius:3px; border:1px solid var(--uk-border); }
.form-range-uk::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--uk-accent-grad); border:1px solid rgba(0,173,181,.55); box-shadow:0 0 0 3px rgba(0,173,181,.25); transition: transform var(--uk-transition-fast); }
.form-range-uk::-moz-range-thumb:active { transform:scale(.9); }

/* File Upload */
.file-upload-uk { position:relative; border:1px dashed var(--uk-border); background:linear-gradient(140deg,var(--uk-surface-alt),var(--uk-surface)); border-radius: var(--uk-radius-lg); padding:2rem 1.5rem; text-align:center; cursor:pointer; transition: border-color var(--uk-transition-fast), background var(--uk-transition-fast); max-width:520px; }
.file-upload-uk:hover { border-color: var(--uk-border-accent); }
.file-upload-uk.dragover { border-color: var(--uk-accent); background:linear-gradient(140deg, rgba(0,173,181,.15), var(--uk-surface)); }
.file-upload-uk .file-input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-upload-uk .file-label { display:flex; align-items:center; justify-content:center; flex-direction:row; flex-wrap:wrap; gap:.35rem; font-size:.8rem; letter-spacing:.5px; font-weight:500; color:var(--uk-text-alt); }
.file-upload-uk .file-label-text { color: var(--uk-accent); }

/* Stats */
.stat-block { background: var(--uk-surface-alt); border: 1px solid var(--uk-border); border-radius: var(--uk-radius); padding: 1.1rem 1rem; position: relative; overflow:hidden; }
.stat-block::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 15%, rgba(0,173,181,.18), transparent 60%); opacity:.35; }
.stat-value { font-size: 1.8rem; font-weight:600; letter-spacing:1px; background: linear-gradient(90deg,#E6ECF1,#8CEEF2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label { position: relative; }

/* Testimonials */
.testimonial-slider { position: relative; max-width: 780px; overflow:hidden; }
.testimonial-track { display:flex; position:relative; }
.testimonial-track > .testimonial-card { flex:0 0 100%; min-width:100%; }
.testimonial-card { background: linear-gradient(140deg, var(--uk-surface), var(--uk-surface-alt)); border:1px solid var(--uk-border); border-radius: var(--uk-radius-lg); padding: 1.75rem 1.5rem 1.6rem; box-shadow: var(--uk-shadow); opacity:.35; transform: scale(.98); transition: opacity var(--uk-transition), transform var(--uk-transition); }
.testimonial-card.active { opacity:1; transform: scale(1); border-color: var(--uk-border-accent); box-shadow: var(--uk-shadow-lg); }
.testimonial-card p { font-size:.95rem; line-height:1.5; }
.avatar-sm { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.avatar-sm img { width:100%; height:100%; object-fit:cover; display:block; }

/* Team */
.team-card { position: relative; }
.team-avatar { width:84px; height:84px; border-radius:50%; margin:0 auto; position:relative; overflow:hidden; box-shadow:0 0 0 3px rgba(0,173,181,.25), 0 8px 20px -6px rgba(0,0,0,.6); }
.team-avatar img { width:100%; height:100%; object-fit:cover; }

/* Gallery */
.gallery-mosaic { display:grid; gap:.75rem; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); grid-auto-rows: 160px; }
.gallery-mosaic .g-item { position:relative; border-radius: var(--uk-radius); background: #0c1014; background-image: var(--img); background-size:cover; background-position:center; overflow:hidden; border:1px solid var(--uk-border); cursor:pointer; }
.gallery-mosaic .g-item::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(0,0,0,.4), rgba(0,0,0,.15)); opacity:0; transition: opacity var(--uk-transition-fast); }
.gallery-mosaic .g-item:hover::after { opacity:1; }
.gallery-mosaic .g-item.tall { grid-row: span 2; }
.gallery-mosaic .g-item.wide { grid-column: span 2; }

/* CTA Banners */
.cta-banner { background: linear-gradient(135deg, var(--uk-surface), var(--uk-surface-alt)); border:1px solid var(--uk-border); border-radius: var(--uk-radius-lg); position:relative; overflow:hidden; box-shadow: var(--uk-shadow); }
.cta-banner.gradient-1 { background: linear-gradient(145deg, rgba(0,173,181,.22), rgba(0,173,181,.08)); border:1px solid rgba(0,173,181,.4); }
.cta-banner.gradient-2 { background: linear-gradient(145deg, var(--uk-surface), var(--uk-surface-alt)); }
.cta-banner::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 90% 10%, rgba(56,249,215,.35), transparent 60%); opacity:.35; }

/* Newsletter */
.newsletter-box { max-width: 560px; }

/* FAQ Mini */
.faq-item { background: var(--uk-surface-alt); border:1px solid var(--uk-border); border-radius: var(--uk-radius); padding: 1rem .9rem .85rem; position:relative; transition: border-color var(--uk-transition-fast), transform var(--uk-transition-fast); }
.faq-item:hover { border-color: var(--uk-border-accent); transform: translateY(-4px); }
.faq-item h6 { font-size:.85rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:.45rem; }

/* Utilities for slider nav buttons inside testimonials */
.testimonial-slider .btn { backdrop-filter: blur(6px); }


/* Media Queries */
@media (max-width: 1200px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 992px) {
  .hero { padding-top: 5rem; }
  .uk-navbar .nav-link { padding: .55rem .75rem !important; }
  .pricing-grid { grid-template-columns: 1fr; }
  .showcase-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 2.4rem; }
  .section { padding: 2rem 0; }
  .uk-card { padding: 1rem; }
  .auth-panel { padding: 1.5rem; }
  .testimonial-slider .testimonial-track { transition: transform .4s ease; }
}

@media (max-width: 576px) {
  .hero h1 { font-size: 2.2rem; }
  .auth-panel { padding: 1.25rem; }
  #backToTop { width: 40px; height: 40px; }
  .btn { padding: .5rem 1rem; font-size: .9rem; }
  .uk-navbar .navbar-brand { font-size: 1.1rem; }
}

/* ========================== Marketing Section Utilities ========================== */
.section-tight { padding: clamp(2.5rem,5vw,4rem) 0; }
.section-divider { position: relative; }
.section-divider::after { content:""; position:absolute; left:50%; top:100%; width:70%; height:1px; background:linear-gradient(90deg,transparent,var(--uk-border),transparent); transform:translateX(-50%); opacity:.65; }
.hero-split { display:flex; align-items:center; min-height: clamp(540px, 75vh, 720px); position:relative; }
.hero-split::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(0,173,181,.18), transparent 60%), radial-gradient(circle at 85% 75%, rgba(56,249,215,.12), transparent 55%); pointer-events:none; }
.hero-split .media-pane { position:relative; }
.hero-split .code-demo { background: #0f1317; border:1px solid var(--uk-border); border-radius: var(--uk-radius-lg); font-family: var(--uk-font-mono); font-size:.75rem; padding:1rem 1.1rem; line-height:1.4; box-shadow: var(--uk-shadow); }
.hero-centered { text-align:center; padding: clamp(5rem,10vw,7rem) 0 4rem; position:relative; }
.hero-centered .supporting { max-width: 680px; margin: 0 auto 2rem; }
.hero-centered .cta-group { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.hero-minimal { padding: clamp(4rem,8vw,6rem) 0 2.5rem; }
.feature-grid { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.feature-card { position:relative; padding:1.2rem 1.15rem 1.3rem; border:1px solid var(--uk-border); background:linear-gradient(150deg,var(--uk-bg-elevate),var(--uk-surface-alt)); border-radius: var(--uk-radius-lg); box-shadow: var(--uk-shadow-xs); transition: box-shadow .35s var(--uk-transition), transform .45s var(--uk-transition); }
.feature-card:hover { box-shadow: var(--uk-shadow); transform:translateY(-4px); }
.feature-icon { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(140deg,var(--uk-accent-soft),rgba(56,249,215,.12)); color:var(--uk-accent); margin-bottom:.85rem; backdrop-filter:blur(6px); }
.feature-alt-grid { display:grid; gap:2.2rem 2rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:start; }
.feature-alt-grid .item { display:flex; gap:1rem; }
.feature-alt-grid .item-icon { width:54px; height:54px; flex:0 0 54px; border-radius:16px; background:linear-gradient(160deg,var(--uk-bg-elevate),var(--uk-surface-alt)); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--uk-accent); box-shadow: var(--uk-shadow-xs); }
.logo-grid { display:grid; gap:1.3rem 2rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); align-items:center; }
.logo-tile { padding:.9rem 1rem; background:linear-gradient(145deg,var(--uk-bg-elevate),var(--uk-surface-alt)); border:1px solid var(--uk-border); border-radius: var(--uk-radius-md); display:flex; align-items:center; justify-content:center; opacity:.75; transition:opacity .3s ease, transform .4s ease; font-size:.85rem; font-weight:600; letter-spacing:.5px; }
.logo-tile:hover { opacity:1; transform:translateY(-4px); }
.overlap-row { position:relative; margin-top:-4rem; display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.overlap-row .uk-card { backdrop-filter: blur(4px); }
.accent-bar { width:60px; height:4px; background: linear-gradient(90deg,var(--uk-accent),#38f9d7); border-radius: 4px; margin:0 0 1.2rem; }

[data-theme="light"] .accent-bar { background: linear-gradient(90deg,#0ABAB5,#56DFCF); }
.section-heading-center { text-align:center; max-width:760px; margin:0 auto 2.8rem; }
.pricing-teaser { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pricing-teaser .teaser { background:linear-gradient(150deg,var(--uk-bg-elevate),var(--uk-surface-alt)); border:1px solid var(--uk-border); padding:1.4rem 1.4rem 1.5rem; border-radius:var(--uk-radius-lg); position:relative; overflow:hidden; }
.pricing-teaser .teaser.featured { border-color: var(--uk-accent); box-shadow:0 0 0 1px rgba(0,173,181,.15), var(--uk-shadow); }
.pricing-teaser .price { font-size:1.45rem; font-weight:600; background:linear-gradient(90deg,#E6ECF1,#8CEEF2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.faq-alt .accordion-button { font-size:.9rem; }
.newsletter-slim { max-width:620px; margin:0 auto; background:linear-gradient(150deg,var(--uk-bg-elevate),var(--uk-surface-alt)); border:1px solid var(--uk-border); padding:1.8rem 2rem 2rem; border-radius:var(--uk-radius-xl); }
.newsletter-slim form { display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:640px){ .newsletter-slim form { flex-direction:row; align-items:stretch; } .newsletter-slim form input { flex:1; } }
.cta-wide { position:relative; overflow:hidden; border-radius: var(--uk-radius-xl); padding: clamp(2.8rem,5vw,4rem) clamp(2rem,5vw,3.5rem); background: radial-gradient(circle at 15% 25%, rgba(0,173,181,.24), rgba(0,173,181,.04) 60%), linear-gradient(140deg,var(--uk-bg-elevate), var(--uk-surface-alt)); }
.cta-wide::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(0,173,181,.15), transparent 60%); mix-blend-mode: overlay; pointer-events:none; }
.contact-grid { display:grid; gap:2rem; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.contact-card { background:linear-gradient(150deg,var(--uk-bg-elevate),var(--uk-surface-alt)); border:1px solid var(--uk-border); border-radius:var(--uk-radius-lg); padding:1.5rem 1.5rem 1.6rem; box-shadow: var(--uk-shadow-xs); transition: box-shadow .3s var(--uk-transition), transform .45s var(--uk-transition); }
.contact-card:hover { box-shadow: var(--uk-shadow); transform: translateY(-4px); }
.footer-alt { background: linear-gradient(140deg,var(--uk-bg-elevate), #151a1f); padding:3.5rem 0 2.5rem; }
.footer-alt .divider { height:1px; background:linear-gradient(90deg,transparent,var(--uk-border),transparent); margin:2.2rem 0 1.8rem; }
.footer-alt .mini { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; color:var(--uk-text-dim); }
@media (prefers-reduced-motion: reduce){ .feature-card, .logo-tile, .contact-card, .pricing-teaser .teaser, .overlap-row .uk-card { transition:none !important; animation:none !important; }}

/* ================= Additional Component Batch ================= */
/* Product Cards */
.product-card { background:linear-gradient(140deg,var(--uk-surface),var(--uk-surface-alt)); border:1px solid var(--uk-border); border-radius:var(--uk-radius-lg); overflow:hidden; position:relative; display:flex; flex-direction:column; box-shadow: var(--uk-shadow-xs); transition: transform var(--uk-transition), box-shadow var(--uk-transition), border-color var(--uk-transition-fast); }
.product-card:hover { transform:translateY(-5px); box-shadow: var(--uk-shadow-lg); border-color: var(--uk-border-accent); }
.product-card .product-media { position:relative; width:100%; aspect-ratio:1/1; background:#0c1014; background-image:var(--img); background-size:cover; background-position:center; }
.product-card .rating { position:relative; font-family: 'Font Awesome 6 Free'; font-weight:900; letter-spacing:2px; display:inline-block; color: var(--uk-text-dim); }
.product-card .rating span { position:absolute; inset:0; background:linear-gradient(90deg,var(--uk-accent), #38f9d7); -webkit-background-clip:text; background-clip:text; color:transparent; overflow:hidden; display:block; }

[data-theme="light"] .product-card .rating span { background:linear-gradient(90deg,#0ABAB5, #56DFCF); }
.product-card .price-tag { font-weight:600; letter-spacing:.5px; }

/* Comparison Table */
.comparison-wrapper { position:relative; }
.comparison-table thead th { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; background:var(--uk-surface-alt); }
.comparison-table tbody tr td { vertical-align:middle; }
.comparison-table .featured { background: linear-gradient(145deg, rgba(0,173,181,.15), rgba(0,173,181,.05)); position:relative; }
.comparison-table .featured::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 15%, rgba(56,249,215,.25), transparent 70%); opacity:.35; pointer-events:none; }

/* Blog Cards */
.blog-card { background:linear-gradient(150deg,var(--uk-surface),var(--uk-surface-alt)); border:1px solid var(--uk-border); border-radius:var(--uk-radius-lg); overflow:hidden; display:flex; flex-direction:column; height:100%; position:relative; box-shadow: var(--uk-shadow-xs); transition: transform var(--uk-transition), box-shadow var(--uk-transition), border-color var(--uk-transition-fast); }
.blog-card:hover { transform:translateY(-5px); box-shadow: var(--uk-shadow-lg); border-color: var(--uk-border-accent); }
.blog-card .blog-media { position:relative; aspect-ratio: 3 / 2; background:#0c1014; background-image:var(--img); background-size:cover; background-position:center; }

/* FAB */
.uk-fab { position:fixed; bottom:90px; right:26px; width:56px; height:56px; border-radius:50%; background:var(--uk-accent-grad); color:#042326; display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; border:none; box-shadow: var(--uk-shadow-lg); cursor:pointer; transition: transform var(--uk-transition-fast), box-shadow var(--uk-transition-fast); z-index:998; }
.uk-fab:hover { transform:translateY(-4px); box-shadow: var(--uk-accent-glow); }
.uk-fab.hidden { opacity:0; visibility:hidden; transform:translateY(12px) scale(.9); }

/* Share Icons */
.share-icons { display:flex; gap:.65rem; }
.share-icons a { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--uk-surface-alt); border:1px solid var(--uk-border); color:var(--uk-text-alt); font-size:.9rem; box-shadow: var(--uk-shadow-xs); transition: background var(--uk-transition-fast), color var(--uk-transition-fast), transform var(--uk-transition-fast), border-color var(--uk-transition-fast); }
.share-icons a:hover { color:var(--uk-accent); transform:translateY(-3px); border-color: var(--uk-border-accent); }
.share-icons a.x:hover { color:#fff; background:#000; }
.share-icons a.linkedin:hover { background:#0A66C2; color:#fff; }
.share-icons a.github:hover { background:#161b22; color:#fff; }
.share-icons a.mail:hover { background:var(--uk-accent); color:#042326; }

/* Cookie Banner */
.cookie-banner { position:fixed; left:50%; bottom:0; transform:translate(-50%, 0); width:100%; max-width:860px; padding:1rem 1.25rem 1rem; background:linear-gradient(150deg,var(--uk-surface),var(--uk-surface-alt)); border:1px solid var(--uk-border); border-bottom:none; border-radius: var(--uk-radius) var(--uk-radius) 0 0; box-shadow:0 -4px 18px -6px rgba(0,0,0,.55); z-index:1090; display:flex; flex-wrap:wrap; gap:.9rem 1.25rem; align-items:center; font-size:.8rem; line-height:1.45; }
.cookie-banner p { flex:1 1 auto; margin:0; }
.cookie-banner .actions { display:flex; gap:.55rem; }
.cookie-banner.hide { animation: cookieHide .5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes cookieHide { to { transform:translate(-50%, 30px); opacity:0; visibility:hidden; } }

/* ============================================================
   ✨ Enhanced Light Theme Utility Classes
   ============================================================ */

/* Accent color variations for light theme */
[data-theme="light"] .accent-teal { color: #0ABAB5 !important; }
[data-theme="light"] .accent-mint { color: #56DFCF !important; }
[data-theme="light"] .accent-aqua { color: #ADEED9 !important; }
[data-theme="light"] .accent-blush { color: #FFEDF3 !important; }

/* Background accent variations */
[data-theme="light"] .bg-accent-teal { background-color: rgba(10,186,181,.1) !important; }
[data-theme="light"] .bg-accent-mint { background-color: rgba(86,223,207,.1) !important; }
[data-theme="light"] .bg-accent-aqua { background-color: rgba(173,238,217,.1) !important; }
[data-theme="light"] .bg-accent-blush { background-color: rgba(255,237,243,.5) !important; }

/* Gradient borders for light theme */
[data-theme="light"] .border-gradient {
  border: 2px solid transparent;
  background-image: linear-gradient(var(--uk-surface), var(--uk-surface)), 
                    linear-gradient(135deg, #0ABAB5, #56DFCF, #ADEED9);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Enhanced card hover effects for light theme */
[data-theme="light"] .uk-card-premium {
  background: linear-gradient(145deg, #FFFFFF, #F8FAFB);
  box-shadow: 0 4px 20px -4px rgba(10,186,181,.15);
  border: 1px solid rgba(10,186,181,.2);
}

[data-theme="light"] .uk-card-premium:hover {
  box-shadow: 0 12px 40px -8px rgba(10,186,181,.25);
  transform: translateY(-6px);
}

/* Frosted glass effect for light theme */
[data-theme="light"] .glass-light {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(10,186,181,.15);
  box-shadow: 0 8px 32px -8px rgba(10,186,181,.2);
}

/* Text shimmer effect for light theme */
@keyframes shimmerLight {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

[data-theme="light"] .text-shimmer {
  background: linear-gradient(90deg, #0ABAB5, #56DFCF, #ADEED9, #56DFCF, #0ABAB5);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerLight 3s ease-in-out infinite;
}

/* Premium button variant for light theme */
[data-theme="light"] .btn-premium {
  background: linear-gradient(135deg, #0ABAB5, #56DFCF);
  color: #FFFFFF;
  box-shadow: 0 4px 20px -4px rgba(10,186,181,.4);
  border: none;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .btn-premium:hover {
  box-shadow: 0 8px 30px -6px rgba(10,186,181,.5);
  transform: translateY(-2px);
}

[data-theme="light"] .btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition: left 0.5s ease;
}

[data-theme="light"] .btn-premium:hover::before {
  left: 100%;
}