:root{
  --bg: #000000;
  --surface: #0a0a0a;
  --card: #111111;
  --muted: #888888;
  --text: #ffffff;
  --primary: #FFD700;
  --primary-2: #FFA500;
  --primary-3: #FFEB3B;
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --dur-fast: .2s;
  --dur-med: .4s;
  --dur-slow: .6s;
  --accent: #FFD700;
  --accent-2: #FFA500;
  --gradient: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, #B8860B 25%, #FFD700 50%, #FFA500 75%, #FFEB3B 100%);
  --gradient-2: linear-gradient(135deg, rgba(255,215,0,0.3) 0%, #FFD700 50%, #FFA500 100%);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --shadow-1: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,215,0,0.1);
  --shadow-2: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,215,0,0.15);
  --shadow-glow: 0 0 40px rgba(255,215,0,0.4);
  --container: 1280px;
  --glass: rgba(10,10,10,0.8);
  --glass-border: rgba(255,215,0,0.2);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:
    radial-gradient(80rem 80rem at 5% -5%, rgba(255,215,0,0.15), transparent 50%),
    radial-gradient(70rem 70rem at 95% 5%, rgba(255,165,0,0.15), transparent 50%),
    radial-gradient(60rem 60rem at 50% 100%, rgba(99,102,241,0.1), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  line-height:1.7;
  opacity:1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@keyframes bodyIn { from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-head{max-width:760px;margin:0 auto 36px;text-align:center}
.section h2{font-family:'Poppins',sans-serif;font-size:36px;line-height:1.2;margin:0 0 10px}
.section p{color:var(--muted);margin:0}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
  transition: all var(--dur-fast) var(--easing-smooth);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.site-header.scrolled{
  background:rgba(10,14,26,0.85);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.site-header.hide{transform: translateY(-100%)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  transition: transform var(--dur-fast) var(--easing-smooth);
}
.brand:hover{transform: scale(1.05)}
.brand-name{font-family:'Poppins',sans-serif;letter-spacing:.3px;font-size:20px}
.brand .accent{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}
.brand-logo{
  font-size:24px;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.5));
  animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(5deg); }
}

.site-nav{position:relative}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.1);color:var(--text)}
.nav-list{list-style:none;margin:0;padding:0;display:none;position:absolute;right:0;top:60px;background:var(--surface);border:1px solid rgba(255,255,255,0.08);border-radius:12px;box-shadow:var(--shadow-1)}
.nav-list li{display:block}
.nav-list a{display:block;padding:12px 16px;color:var(--text);text-decoration:none}
.nav-list a:hover{background:rgba(255,255,255,0.06)}
.nav-list a.active{background:rgba(255,255,255,0.1)}

/* Desktop nav */
@media(min-width:900px){
  .nav-toggle{display:none}
  .nav-list{
    display:flex;
    position:static;
    background:transparent;
    border:none;
    box-shadow:none;
    gap:8px;
    min-width:auto;
  }
  .nav-list a{
    padding:10px 16px;
    border-radius:10px;
    font-size:15px;
  }
  .nav-list a:hover{
    background:rgba(255,255,255,0.08);
    transform: translateY(-1px);
  }
  .nav-list a.active{
    background:rgba(255,215,0,0.15);
    color:var(--primary);
  }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  color:var(--text);
  transition:all var(--dur-fast) var(--easing-smooth);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  white-space:nowrap;
}
.btn-sm{padding:10px 18px;font-size:14px;border-radius:10px}
.btn-lg{padding:16px 32px;font-size:16px;border-radius:var(--radius-sm)}
.btn-primary{
  background:var(--gradient);
  box-shadow:0 8px 24px rgba(255,215,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 12px rgba(255,215,0,0.4);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
  text-stroke: 0.5px rgba(0,0,0,0.3);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 32px rgba(255,215,0,0.5), 0 0 0 1px rgba(255,255,255,0.15) inset, var(--shadow-glow);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 16px rgba(255,215,0,0.6);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.4);
  text-stroke: 0.5px rgba(0,0,0,0.4);
}
.btn-primary:active{transform: translateY(0)}
.btn-outline{
  background:transparent;
  border-color:var(--glass-border);
  backdrop-filter: blur(10px);
  text-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(255,215,0,0.3);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.2);
  text-stroke: 0.5px rgba(0,0,0,0.2);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.2);
  transform: translateY(-2px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 12px rgba(255,215,0,0.4);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
  text-stroke: 0.5px rgba(0,0,0,0.3);
}
.btn-ghost{
  background:transparent;
  border-color:transparent;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 8px rgba(255,215,0,0.3);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.2);
  text-stroke: 0.5px rgba(0,0,0,0.2);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.08);
  transform: translateY(-2px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 12px rgba(255,215,0,0.4);
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
  text-stroke: 0.5px rgba(0,0,0,0.3);
}
.btn .ripple{
  position:absolute;
  border-radius:50%;
  transform: translate(-50%, -50%);
  pointer-events:none;
  background:rgba(255,255,255,0.4);
  width:8px;
  height:8px;
  animation:ripple .7s ease-out forwards;
}
@keyframes ripple {
  from{
    opacity:.8;
    transform: translate(-50%, -50%) scale(1);
  }
  to{
    opacity:0;
    transform: translate(-50%, -50%) scale(25);
  }
}

/* Button animations */
.btn{transform: translateZ(0)}
.btn:hover{transform: translateY(-2px)}
.btn:active{transform: translateY(0)}
.btn:focus-visible{outline:2px solid transparent; box-shadow: 0 0 0 3px rgba(255,215,0,.5)}
.btn-primary{position:relative}
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0));opacity:0;transition:opacity .2s ease}
.btn-primary:hover::before{opacity:1}
.btn-primary::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg, rgba(255,215,0,.0), rgba(255,215,0,.35), rgba(255,165,0,.35), rgba(255,215,0,.0));filter:blur(10px);opacity:0;transition:opacity .2s ease}
.btn-primary:hover::after{opacity:.6}

.gradient-text{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}

/* Hero */
.hero{
  padding-top:100px;
  padding-bottom:100px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,215,0,0.1), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,165,0,0.1), transparent 50%);
  pointer-events:none;
  z-index:0;
}
.hero-grid{
  display:grid;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero-copy h1{
  font-size:48px;
  line-height:1.15;
  margin:0 0 20px;
  font-family:'Poppins',sans-serif;
  font-weight:800;
  letter-spacing:-0.8px;
}
.hero-metric{
  font-size:28px;
  font-weight:900;
  line-height:1.1;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin:0 0 16px;
  display:inline-block;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.3));
}
.hero-copy p{
  color:var(--muted);
  margin:0 0 28px;
  font-size:17px;
  line-height:1.75;
  max-width:580px;
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin-top:36px;
}
.stat{
  background:var(--glass);
  backdrop-filter: blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:22px 18px;
  text-align:center;
  min-height:110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition: all var(--dur-fast) var(--easing-smooth);
  position:relative;
  overflow:hidden;
}
.stat::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gradient);
  opacity:0;
  transition: opacity var(--dur-fast) var(--easing-smooth);
}
.stat:hover{
  transform: translateY(-4px);
  border-color:rgba(255,255,255,0.15);
  box-shadow: var(--shadow-2);
}
.stat:hover::before{opacity:0.05}
.stat-value{
  font-size:36px;
  font-weight:900;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
  z-index:1;
  line-height:1.1;
}
.stat-label{
  font-size:13px;
  color:var(--muted);
  margin-top:8px;
  position:relative;
  z-index:1;
  line-height:1.4;
}
.stat-rating .stat-value{font-size:24px}
.stat-rating .stat-label i{color:#FFD700;margin-right:4px;filter: drop-shadow(0 0 4px rgba(255,215,0,0.5))}

.hero-visual{
  position:relative;
  display:grid;
  place-items:center;
  z-index:1;
}
.phone{
  width:320px;
  height:640px;
  max-width:100%;
  background:linear-gradient(180deg, #1a2340, #0f1625);
  border:2px solid rgba(255,255,255,0.12);
  border-radius:40px;
  box-shadow:var(--shadow-2), 0 0 60px rgba(255,215,0,0.2);
  padding:18px;
  position:relative;
  animation: phoneFloat 6s ease-in-out infinite;
  transition: transform var(--dur-med) var(--easing-smooth);
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.phone::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:36px;
  background:var(--gradient);
  opacity:0.3;
  filter:blur(20px);
  z-index:-1;
  animation: phoneGlow 3s ease-in-out infinite;
}
@keyframes phoneGlow {
  0%, 100% { opacity:0.2; }
  50% { opacity:0.4; }
}
.phone .screen{
  width:100%;
  height:100%;
  border-radius:32px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,215,0,0.15), transparent),
    linear-gradient(180deg, #0a0a0a, #000000);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.05);
  padding:14px;
  gap:10px;
}

/* Global ASO Performance Dashboard */
.global-dashboard{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  width:100%;
  position:relative;
  z-index:1;
}

/* App Header Section */
.app-header-section{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 10px 10px 10px;
  background:rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.1);
  margin-top:8px;
  margin-bottom:4px;
}
.app-icon-large{
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(135deg, #4A90E2, #2ED8A3);
  flex-shrink:0;
  box-shadow:0 4px 16px rgba(255,215,0,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.app-icon-large::before{
  content:"🔒";
  font-size:28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.app-details{
  flex:1;
  min-width:0;
}
.app-name-large{
  font-size:14px;
  font-weight:700;
  color:#f0f4ff;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-description{
  font-size:10px;
  color:rgba(255,255,255,0.6);
  line-height:1.4;
}

/* Global Header */
.global-header{
  padding:18px 0 10px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
  margin-bottom:8px;
}
.global-header h3{
  font-size:13px;
  font-weight:700;
  color:#f0f4ff;
  margin:0;
  letter-spacing:0.2px;
  text-transform:uppercase;
}

/* Map Container */
.map-container{
  flex:1;
  position:relative;
  background:rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
}

/* World Map */
.world-map{
  width:100%;
  height:100%;
  opacity:0.4;
}
.continent{
  fill:rgba(255,255,255,0.05);
  stroke:rgba(255,255,255,0.15);
}

/* Data Points */
.data-point{
  animation: pulsePoint 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
}
@keyframes pulsePoint {
  0%, 100% { r: 2.5; opacity: 1; }
  50% { r: 3.5; opacity: 0.8; }
}

/* Country Cards */
.country-card{
  position:absolute;
  background:rgba(0,0,0,0.7);
  backdrop-filter: blur(14px);
  border-radius:12px;
  padding:14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.15), 0 0 20px rgba(255,215,0,0.2);
  border:1px solid rgba(255,255,255,0.2);
  min-width:120px;
  z-index:10;
  animation: floatCard 4s ease-in-out infinite;
}
.card-usa{
  top: 8%;
  left: 10%;
  animation-delay: 0s;
}
.card-uk{
  top: 12%;
  right: 8%;
  animation-delay: 0.8s;
}
.card-saudi{
  bottom: 18%;
  left: 15%;
  animation-delay: 1.6s;
}
.card-india{
  bottom: 12%;
  right: 12%;
  animation-delay: 2.4s;
}
@keyframes floatCard {
  0%, 100% { 
    transform: translateY(0) translateX(0) scale(1); 
    opacity: 1;
  }
  25% { 
    transform: translateY(-6px) translateX(3px) scale(1.02); 
  }
  50% { 
    transform: translateY(-8px) translateX(-2px) scale(1.02); 
  }
  75% { 
    transform: translateY(-4px) translateX(4px) scale(1.01); 
  }
}
.country-flag{
  font-size:20px;
  margin-bottom:4px;
  display:block;
}
.country-name{
  font-size:11px;
  font-weight:700;
  color:#f0f4ff;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.country-metrics{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.metric-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
}
.metric-label{
  color:rgba(255,255,255,0.6);
  font-weight:500;
}
.metric-value{
  color:#f0f4ff;
  font-weight:700;
}
.metric-row:has(.metric-value:contains("✓")) .metric-value,
.metric-value[data-check="true"]{
  color:#22c55e;
  font-size:12px;
}

/* App Header */
.app-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  background:rgba(0,0,0,0.2);
  border-radius:12px;
  margin-bottom:6px;
}
.app-icon-small{
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(135deg, #4A90E2, #2ED8A3);
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(255,215,0,0.3);
}
.app-info{
  flex:1;
  min-width:0;
}
.app-name{
  font-size:15px;
  font-weight:700;
  color:#fff;
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-developer{
  font-size:11px;
  color:rgba(255,255,255,0.6);
}
.app-rating{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
.stars-mini{
  color:#FFD700;
  font-size:11px;
  display:flex;
  gap:1px;
}
.rating-text{
  font-size:10px;
  color:rgba(255,255,255,0.7);
  font-weight:600;
}

/* Metrics Row */
.metrics-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:6px;
}
.metric-card{
  background:rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  padding:10px 8px;
  text-align:center;
}
.metric-value{
  font-size:16px;
  font-weight:800;
  background:linear-gradient(135deg, #4A90E2, #2ED8A3);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.2;
  margin-bottom:3px;
}
.metric-label{
  font-size:9px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Chart Containers */
.chart-container-top{
  background:rgba(0,0,0,0.2);
  border-radius:10px;
  padding:10px;
  margin-bottom:8px;
  position:relative;
}
.chart-container{
  background:rgba(0,0,0,0.2);
  border-radius:10px;
  padding:8px;
  margin-bottom:6px;
  position:relative;
}
.chart-title-small{
  font-size:10px;
  color:rgba(255,255,255,0.7);
  margin-bottom:6px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.growth-chart-top{
  height:80px;
  width:100%;
  min-height:80px;
}
.growth-chart{
  height:110px;
  width:100%;
}

/* Bottom Stats */
.bottom-stats{
  display:flex;
  justify-content:space-around;
  gap:8px;
  padding:10px;
  background:rgba(0,0,0,0.2);
  border-radius:10px;
  margin-top:auto;
}
.stat-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  color:rgba(255,255,255,0.8);
  font-weight:600;
}
.stat-item i{
  font-size:14px;
  color:#FFD700;
}
.search-ui{position:absolute;top:12px;left:12px;right:12px;display:grid;gap:8px}
.search-bar{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12);backdrop-filter: blur(6px);padding:6px 10px;border-radius:999px;color:var(--text)}
.search-bar .typed-text{font-weight:600;letter-spacing:.2px;color:#cfe6ff}
.search-result{display:grid;grid-template-columns:auto 40px 1fr auto;align-items:center;gap:8px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12);padding:8px 10px;border-radius:14px}
.search-result .rank{font-weight:800;color:#a3ffcf}
.search-result .app-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#9bd1ff,#a3ffcf)}
.search-result .name{font-weight:700}
.search-result .stars{color:#ffd18f}
.btn-download{padding:8px 10px}
.line-chart .chart-line-top{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity:1;
}
.line-chart.revealed .chart-line-top,
.line-chart .chart-line-top{
  animation: drawLine 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.line-chart .chart-point-top{
  opacity:1;
  transform: scale(1);
}
.line-chart.revealed .chart-point-top,
.line-chart .chart-point-top{
  animation: popPoint 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.line-chart.revealed .chart-point-top:nth-child(3){animation-delay:0.15s}
.line-chart.revealed .chart-point-top:nth-child(4){animation-delay:0.25s}
.line-chart.revealed .chart-point-top:nth-child(5){animation-delay:0.35s}
.line-chart.revealed .chart-point-top:nth-child(6){animation-delay:0.45s}
.line-chart.revealed .chart-point-top:nth-child(7){animation-delay:0.55s}
.line-chart.revealed .chart-point-top:nth-child(8){animation-delay:0.65s}
.line-chart.revealed .chart-point-top:nth-child(9){animation-delay:0.75s}
.line-chart.revealed .chart-point-top:nth-child(10){animation-delay:0.85s}
.line-chart.revealed .chart-point-top:nth-child(11){animation-delay:0.95s}
.line-chart.revealed .chart-point-top:nth-child(12){animation-delay:1.05s}
.line-chart .chart-line{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity:0;
}
.line-chart.revealed .chart-line{
  animation: drawLine 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.line-chart .chart-area{
  opacity:0;
  transform: scaleY(0);
  transform-origin:bottom;
}
.line-chart.revealed .chart-area{
  animation: fillArea 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay:0.3s;
}
.line-chart .chart-point{
  opacity:0;
  transform: scale(0);
}
.line-chart.revealed .chart-point{
  animation: popPoint 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.line-chart.revealed .chart-point:nth-child(5){animation-delay:0.2s}
.line-chart.revealed .chart-point:nth-child(6){animation-delay:0.3s}
.line-chart.revealed .chart-point:nth-child(7){animation-delay:0.4s}
.line-chart.revealed .chart-point:nth-child(8){animation-delay:0.5s}
.line-chart.revealed .chart-point:nth-child(9){animation-delay:0.6s}
.line-chart.revealed .chart-point:nth-child(10){animation-delay:0.7s}
.line-chart.revealed .chart-point:nth-child(11){animation-delay:0.8s}
.line-chart.revealed .chart-point:nth-child(12){animation-delay:0.9s}
.line-chart.revealed .chart-point:nth-child(13){animation-delay:1s}
.line-chart.revealed .chart-point:nth-child(14){animation-delay:1.1s}
.line-chart.revealed .chart-point:nth-child(15){animation-delay:1.2s}
@keyframes drawLine{
  to{
    stroke-dashoffset: 0;
    opacity:1;
  }
}
@keyframes fillArea{
  to{
    opacity:1;
    transform: scaleY(1);
  }
}
@keyframes popPoint{
  to{
    opacity:1;
    transform: scale(1);
  }
}
.icons-row{display:flex;gap:16px;color:#94c6ff;font-size:26px}
.floating-icons{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:10;
}
.floating-icons i{
  position:absolute;
  font-size:48px;
  opacity:0.9;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  transition: transform 0.3s ease;
}
.floating-icons i:nth-child(1){
  top:15%;
  left:5%;
  color:#007AFF;
  animation: floatIcon 4s ease-in-out infinite;
}
.floating-icons i:nth-child(2){
  top:25%;
  right:8%;
  color:#00D9FF;
  animation: floatIcon 5s ease-in-out infinite;
  animation-delay:0.5s;
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

/* Floating animation */
@keyframes float {
  0% { transform: translateY(0) }
  50% { transform: translateY(-8px) }
  100% { transform: translateY(0) }
}
.floating-icons i{animation: float 6s ease-in-out infinite}
.floating-icons i:nth-child(2){animation-duration:7.5s}
.floating-icons i:nth-child(3){animation-duration:5.5s}

@keyframes iconPop { 0%{transform:scale(.6);opacity:.4} 60%{transform:scale(1.15);opacity:1} 100%{transform:scale(1)} }
@keyframes iconIdle { 0%{transform: translateY(0)} 50%{transform: translateY(-3px)} 100%{transform: translateY(0)} }
@keyframes iconWiggle { 0%,100%{transform: rotate(0)} 25%{transform: rotate(8deg)} 75%{transform: rotate(-8deg)} }
.step-icon:hover i{animation: iconWiggle .5s ease}

@media(min-width:900px){
  .hero-grid{
    grid-template-columns:1.1fr 1fr;
    gap:80px;
  }
  .hero-copy h1{
    font-size:60px;
    line-height:1.1;
  }
  .hero-metric{
    font-size:32px;
  }
  .hero-copy p{
    font-size:18px;
  }
  .phone{
    width:360px;
    height:720px;
  }
  .section{padding:100px 0}
}

/* Mobile Responsiveness */
@media(max-width:768px){
  .hero{padding-top:80px;padding-bottom:60px}
  .hero-copy h1{font-size:32px}
  .hero-metric{font-size:24px}
  .hero-copy p{font-size:16px}
  .hero-stats{grid-template-columns:1fr;gap:12px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .section{padding:60px 0}
  .section h2{font-size:28px}
  .card-grid{grid-template-columns:1fr}
  .results-grid{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:16px}
  .contact-form-container{padding:24px}
  .container{padding:0 16px}
}

/* Cards */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.card{
  background:var(--glass);
  backdrop-filter: blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow-1);
  transition: all var(--dur-med) var(--easing-smooth);
  position:relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gradient);
  opacity:0;
  transition: opacity var(--dur-fast) var(--easing-smooth);
  pointer-events:none;
}
.card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-2), var(--shadow-glow);
  border-color:rgba(255,255,255,0.15);
}
.card:hover::after{opacity:0.05}
.card h3{
  margin:16px 0 10px;
  font-size:20px;
  font-weight:700;
  position:relative;
  z-index:1;
}
.card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  position:relative;
  z-index:1;
}
.card-icon{
  font-size:32px;
  color:#FFD700;
  transition: all var(--dur-fast) var(--easing-smooth);
  display:inline-block;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.3));
  position:relative;
  z-index:1;
}
.card:hover .card-icon{
  transform: translateZ(0) scale(1.15) rotate(8deg);
  color:#FFD700;
  filter: drop-shadow(0 0 12px rgba(46,216,163,0.5));
}

/* Results */
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.result-card{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:center;background:var(--surface);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:16px}
.result-card{transition: transform .25s ease, box-shadow .25s ease}
.result-card:hover{transform: translateY(-4px)}
.result-card{position:relative;overflow:hidden}
.result-graph{height:80px;background:linear-gradient(180deg, rgba(255,215,0,0.12), rgba(255,165,0,0.12));border-radius:12px;position:relative;overflow:hidden}
.result-graph .bar{position:absolute;bottom:0;width:18px;border-radius:6px;background:var(--gradient)}
.result-graph .bar-a{left:20px;height:30%}
.result-graph .bar-b{left:50px;height:80%}
.result-copy h3{margin:0 0 6px}
.result-copy p{margin:0;color:var(--muted)}

/* Process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;overflow:visible}
.step{background:var(--surface);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:16px;text-align:center;transition:transform .25s ease, box-shadow .25s ease}
.step:hover{transform: translateY(-4px)}
.step-icon{width:48px;height:48px;margin:0 auto 10px;border-radius:12px;background:rgba(255,215,0,0.15);display:grid;place-items:center;color:#FFD700;position:relative;overflow:hidden}
.step-icon i{font-size:24px;animation: iconIdle 4s ease-in-out infinite}
.step.revealed .step-icon i{animation: iconPop .6s ease-out, iconIdle 4s ease-in-out .6s infinite}
.step p{max-width:26ch;margin:0 auto}

/* Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.testimonial{background:var(--surface);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:18px;transition: transform .25s ease, box-shadow .25s ease}
.testimonial:hover{transform: translateY(-4px)}
.testimonial{position:relative;overflow:hidden}
.testimonial .avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#9bd1ff,#a3ffcf);margin-bottom:10px}
.testimonial .rating{color:#ffd18f;margin-bottom:8px}
.testimonial h4{margin:10px 0 0;font-size:14px;color:var(--muted)}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto;
}
.plan{
  background:var(--glass);
  backdrop-filter: blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
  transition: all var(--dur-med) var(--easing-smooth);
  overflow:hidden;
}
.plan::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gradient);
  opacity:0;
  transition: opacity var(--dur-fast) var(--easing-smooth);
}
.plan:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-2), var(--shadow-glow);
  border-color:rgba(255,255,255,0.2);
}
.plan:hover::before{opacity:0.08}
.plan.revealed{animation: planPop .6s var(--easing-bounce)}
@keyframes planPop {
  0%{transform: translateY(20px) scale(.95); opacity:0}
  100%{transform:none; opacity:1}
}
.plan-featured{
  background:linear-gradient(180deg, rgba(255,215,0,0.15), rgba(255,165,0,0.15));
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 24px 64px rgba(46,216,163,0.25), 0 0 0 1px rgba(255,255,255,0.1) inset;
  transform: scale(1.05);
}
.plan-featured:hover{transform: translateY(-8px) scale(1.07)}
.plan .badge{
  position:absolute;
  top:20px;
  right:20px;
  background:var(--gradient);
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  box-shadow:0 4px 12px rgba(255,215,0,0.4);
}
.plan-featured .badge{
  animation: badgePulse 2.5s var(--easing-smooth) infinite;
}
@keyframes badgePulse {
  0%,100%{transform: translateY(0) scale(1)}
  50%{transform: translateY(-3px) scale(1.08)}
}
.price{
  font-size:42px;
  font-weight:900;
  margin:16px 0;
  position:relative;
  z-index:1;
}
.price span{
  font-weight:800;
  font-size:38px; /* Larger $ symbol */
}
.price-per{
  font-size:16px;
  color:var(--muted);
  font-weight:500;
}
.features{
  list-style:none;
  margin:20px 0 24px;
  padding:0;
  display:grid;
  gap:12px;
  color:var(--muted);
  position:relative;
  z-index:1;
}
.features li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.5;
}
.features i{
  color:#FFD700;
  font-size:18px;
  margin-top:2px;
  flex-shrink:0;
}
.plan-featured .btn{
  animation: breathe 3s var(--easing-smooth) infinite;
  position:relative;
  z-index:1;
}
@keyframes breathe {
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-3px)}
}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.post{background:var(--surface);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:16px}
.post .thumb{height:120px;border-radius:12px;background:linear-gradient(135deg,#9bd1ff,#a3ffcf)}
.post h3{margin:10px 0 6px}
.post p{margin:0 0 8px;color:var(--muted)}
.post .link{color:#9bd1ff;text-decoration:none}

/* Contact Form */
.contact-wrapper{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  max-width:1000px;
  margin:0 auto;
}
.contact-form-container{
  background:var(--glass);
  backdrop-filter: blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-2);
}
.contact-form{
  display:grid;
  gap:20px;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-group label{
  font-weight:600;
  font-size:14px;
  color:var(--text);
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(0,0,0,0.2);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  transition: all var(--dur-fast) var(--easing-smooth);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,215,0,0.1), 0 0 20px rgba(255,215,0,0.2);
  background:rgba(0,0,0,0.3);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--muted);
  opacity:0.6;
}
.form-group textarea{
  resize:vertical;
  min-height:100px;
}
.contact-form button{
  margin-top:8px;
  width:100%;
}
.form-success{
  text-align:center;
  padding:40px 20px;
}
.form-success i{
  font-size:64px;
  color:#FFD700;
  margin-bottom:16px;
  display:block;
  animation: bounceIn 0.6s var(--easing-bounce);
}
.form-success h3{
  font-size:24px;
  margin:0 0 8px;
}
.form-success p{
  color:var(--muted);
  margin:0;
}
.contact-info{
  display:grid;
  gap:20px;
}
.info-card{
  background:var(--glass);
  backdrop-filter: blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:24px;
  text-align:center;
  transition: all var(--dur-fast) var(--easing-smooth);
}
.info-card:hover{
  transform: translateY(-4px);
  border-color:rgba(255,255,255,0.15);
  box-shadow:var(--shadow-2);
}
.info-card i{
  font-size:32px;
  color:var(--primary);
  margin-bottom:12px;
  display:block;
}
.info-card h3{
  font-size:18px;
  margin:0 0 8px;
}
.info-card a{
  color:var(--primary-2);
  text-decoration:none;
  font-weight:600;
  transition: color var(--dur-fast) var(--easing-smooth);
}
.info-card a:hover{
  color:var(--primary);
}
.info-card p{
  color:var(--muted);
  margin:0;
  font-size:14px;
}
@media(max-width:900px){
  .contact-wrapper{
    grid-template-columns:1fr;
  }
}

/* Footer */
.site-footer{
  border-top:1px solid var(--glass-border);
  padding:48px 0 24px;
  background:rgba(10,14,26,0.5);
  backdrop-filter: blur(20px);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:32px;
  margin-bottom:32px;
}
.footer-grid h4{
  font-size:16px;
  margin:0 0 16px;
  color:var(--text);
  font-weight:700;
}
.links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.links a{
  color:var(--muted);
  text-decoration:none;
  font-size:15px;
  transition: all var(--dur-fast) var(--easing-smooth);
  position:relative;
  display:inline-block;
}
.links a:hover{
  color:var(--primary);
  transform: translateX(4px);
}
.links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  height:2px;
  width:0;
  background:var(--gradient);
  transition:width var(--dur-fast) var(--easing-smooth);
}
.links a:hover::after{width:100%}
.social{
  display:flex;
  gap:12px;
  margin-top:16px;
}
.social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  color:var(--text);
  text-decoration:none;
  transition: all var(--dur-fast) var(--easing-smooth);
  font-size:20px;
}
.social a:hover{
  background:var(--gradient);
  transform: translateY(-3px) rotate(5deg);
  box-shadow:0 8px 20px rgba(255,215,0,0.3);
  border-color:transparent;
}
.footer-bottom{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--glass-border);
  color:var(--muted);
  text-align:center;
  font-size:14px;
}

/* Background animated overlay */
.bg-anim{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(30rem 30rem at 20% 10%, rgba(255,215,0,0.08), transparent 60%),
  radial-gradient(36rem 36rem at 80% 0%, rgba(255,165,0,0.08), transparent 60%)}
.bg-anim{animation: bgFloat 16s ease-in-out infinite}
@keyframes bgFloat { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }

/* Cursor trail (desktop only) */
.cursor-trail{position:fixed;inset:0;pointer-events:none;z-index:70}
.cursor-trail .dot{position:absolute;width:8px;height:8px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(47,128,237,.85), rgba(31,219,139,.55));
  box-shadow: 0 0 12px rgba(47,128,237,.55), 0 0 18px rgba(31,219,139,.35);
  opacity:.0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .35s var(--easing-smooth), transform .35s var(--easing-smooth)}
.cursor-trail .dot.show{opacity:.8; transform: translate(-50%, -50%) scale(1)}
@media (hover:none){ .cursor-trail{display:none} }

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.06);z-index:60}
.scroll-progress span{display:block;height:100%;width:0;background:var(--gradient)}

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

/* Reveal animations */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
[data-reveal].revealed{opacity:1;transform:none}

/* Stagger helpers */
.stagger-1{transition-delay:.05s}
.stagger-2{transition-delay:.1s}
.stagger-3{transition-delay:.15s}
.stagger-4{transition-delay:.2s}
.stagger-5{transition-delay:.25s}

/* Utilities */
.accent{color:#FFD700}
.text-gradient{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Loading States */
.btn:disabled{
  opacity:0.7;
  cursor:not-allowed;
  transform:none !important;
}

/* Focus States for Accessibility */
*:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}

/* Print Styles */
@media print{
  .site-header,
  .cursor-trail,
  .scroll-progress,
  .bg-anim,
  .btn,
  .social{
    display:none !important;
  }
  body{
    background:#fff;
    color:#000;
  }
}


/* Animation system: enable motion */
/* Animation system keyframes */
@keyframes float6 {
  0% { transform: translate3d(0,0,0) rotate(0) }
  25% { transform: translate3d(4px,-6px,0) rotate(2deg) }
  50% { transform: translate3d(-3px,-2px,0) rotate(-2deg) }
  75% { transform: translate3d(3px,4px,0) rotate(1deg) }
  100% { transform: translate3d(0,0,0) rotate(0) }
}
@keyframes lineDraw { from { stroke-dashoffset: var(--line-length, 600) } to { stroke-dashoffset: 0 } }
@keyframes bounceIn { 0%{transform:scale(.6);opacity:.2} 60%{transform:scale(1.15);opacity:1} 100%{transform:scale(1)} }
@keyframes pulse2 { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes shimmerSweep { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* Reveal system */
.reveal{opacity:0; transform:translateY(30px); transition: opacity var(--dur-slow) var(--easing-smooth), transform var(--dur-slow) var(--easing-smooth)}
.reveal.is-visible{opacity:1; transform:none}
.fade-left{transform:translateX(-30px)}
.fade-right{transform:translateX(30px)}
.slide-down{transform:translateY(-20px)}
.scale{transform:scale(.9); opacity:0}
.scale.is-visible{transform:scale(1); opacity:1}

/* Floating icons refined */
.floating-icons i{animation: float6 6s var(--easing-smooth) infinite}

/* Buttons shimmer + elevation */
.btn{transform: translateZ(0); transition: transform var(--dur-fast) var(--easing-smooth), box-shadow var(--dur-fast) var(--easing-smooth)}
.btn:hover{transform: translateY(-2px)}
.btn-primary{position:relative; overflow:hidden}
.btn-primary::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,0));opacity:0;transition:opacity var(--dur-fast) var(--easing-smooth)}
.btn-primary:hover::before{opacity:1}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:50px;left:-60px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);filter:blur(6px);animation: shimmerSweep 1.6s linear infinite}

/* Cards hover + glow */
.card,.result-card,.testimonial,.plan{position:relative;overflow:hidden}
.card::before,.result-card::before,.testimonial::before,.plan::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:radial-gradient(40% 40% at 50% 10%, rgba(255,215,0,.25), transparent 60%), radial-gradient(40% 40% at 80% 90%, rgba(255,165,0,.22), transparent 60%); filter: blur(18px); opacity:0; transition: opacity var(--dur-fast) var(--easing-smooth)}
.card:hover::before,.result-card:hover::before,.testimonial:hover::before,.plan:hover::before{opacity:1}
.card:hover{transform: translateY(-8px) scale(1.02)}

/* Service card icon rotation on parent hover */
.card:hover .card-icon{transform: translateZ(0) scale(1.1) rotate(5deg)}
.features li:hover i{transform: scale(1.15); transition: transform var(--dur-fast) var(--easing-smooth)}

/* Social micro-animations */
.social a{transition: transform var(--dur-fast) var(--easing-smooth)}
.social a:hover{transform: translateY(-2px)}

/* Pricing badge pulse */
.plan-featured .badge{animation: pulse2 2s var(--easing-smooth) infinite}

/* Process icons bounce-in */
.step .step-icon i{animation: none}
.step.is-visible .step-icon i{animation: bounceIn .8s var(--easing-smooth)}

/* SVG line drawing utility */
.line-draw{stroke-dasharray: var(--line-length, 600); stroke-dashoffset: var(--line-length, 600)}
.line-draw.is-visible{animation: lineDraw 2.2s var(--easing-smooth) forwards}

/* KPI Gallery Section */
.kpi-gallery {
  background: rgba(15, 22, 37, 0.3);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
}

.featured-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.kpi-image-card {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 12px;
  overflow: hidden;
  transition: transform var(--dur-med) var(--easing-smooth), box-shadow var(--dur-med) var(--easing-smooth);
  position: relative;
}

.kpi-image-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2);
}

.kpi-image-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(40% 40% at 50% 10%, rgba(74, 144, 226, 0.25), transparent 60%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--easing-smooth);
  z-index: -1;
}

.kpi-image-card:hover::before {
  opacity: 1;
}

.kpi-image-card img {
  width: 100%;
  height: auto;
  min-height: 200px;
  display: block;
  border-radius: calc(var(--radius) - 4px);
  transition: transform var(--dur-med) var(--easing-smooth);
  background: var(--card);
  object-fit: cover;
}

.kpi-image-card img:not([src]),
.kpi-image-card img[src=""],
.kpi-image-card img[src*="undefined"] {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
}

.kpi-image-card:hover img {
  transform: scale(1.02);
}

/* KPI Carousel */
.kpi-carousel-wrapper {
  position: relative;
  margin-top: 32px;
}

.kpi-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
}

.kpi-carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 16px;
}

.kpi-carousel-slide {
  flex: 0 0 calc(33.333% - 11px);
  min-width: 0;
}

.kpi-carousel-slide img {
  width: 100%;
  height: auto;
  min-height: 180px;
  display: block;
  border-radius: calc(var(--radius) - 4px);
  background: var(--card);
  transition: transform var(--dur-med) var(--easing-smooth);
  object-fit: cover;
}

.kpi-carousel-slide img:not([src]),
.kpi-carousel-slide img[src=""],
.kpi-carousel-slide img[src*="undefined"] {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
}

.kpi-carousel-slide:hover img {
  transform: scale(1.05);
}

/* Carousel Navigation Buttons */
.kpi-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--easing-smooth);
  z-index: 10;
  font-size: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.kpi-carousel-btn:hover {
  background: var(--primary);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 32px rgba(74, 144, 226, 0.4);
}

.kpi-carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.kpi-carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.kpi-carousel-prev {
  left: -24px;
}

.kpi-carousel-next {
  right: -24px;
}

/* Carousel Dots */
.kpi-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.kpi-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: all var(--dur-fast) var(--easing-smooth);
  padding: 0;
}

.kpi-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.2);
}

.kpi-carousel-dot.active {
  background: var(--primary);
  width: 32px;
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(74, 144, 226, 0.5);
}

/* Responsive Design for KPI Gallery */
@media (max-width: 768px) {
  .featured-images-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }

  .kpi-carousel-slide {
    flex: 0 0 calc(50% - 8px);
  }

  .kpi-carousel-prev {
    left: 8px;
  }

  .kpi-carousel-next {
    right: 8px;
  }

  .kpi-carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .kpi-gallery {
    padding: 32px 16px;
  }

  .kpi-carousel-slide {
    flex: 0 0 100%;
  }

  .kpi-carousel-prev,
  .kpi-carousel-next {
    display: none;
  }
}