:root{
  --bg:#050508;
  --bg-2:#0a0b10;
  --fg:#f8fafc;
  --muted:#94a3b8;
  --primary:#818cf8;
  --primary-2:#6366f1;
  --accent:#a78bfa;
  --accent-2:#c084fc;
  --card:#0f1015;
  --card-hover:#14151c;
  --border:#1e1f2a;
  --gradient-1:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);
  --gradient-2:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a855f7 100%);
  --gradient-3:linear-gradient(135deg,#06b6d4 0%,#3b82f6 50%,#6366f1 100%);
  --gradient-text:linear-gradient(135deg,#c7d2fe 0%,#a5b4fc 25%,#818cf8 50%,#a78bfa 75%,#c4b5fd 100%);
  --shadow:0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow:0 0 60px rgba(99,102,241,0.2);
  --shadow-card:0 4px 20px rgba(0,0,0,0.3);
}

/* Base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.7 'Inter',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}

/* Animated Background */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%,rgba(99,102,241,0.15),transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%,rgba(139,92,246,0.1),transparent),
    radial-gradient(ellipse 60% 40% at 0% 100%,rgba(6,182,212,0.08),transparent);
  pointer-events:none;
  z-index:-1;
}

/* Links */
a{color:var(--fg);text-decoration:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
a:hover{color:var(--primary)}

/* Container */
.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* Header */
.site-header{
  position:sticky;top:0;
  background:rgba(5,5,8,0.7);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.05);
  z-index:100;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{
  font-weight:800;font-size:24px;
  background:var(--gradient-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 3s ease-in-out infinite;
  background-size:200% 100%;
}
@keyframes shimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.nav nav a{
  margin-left:28px;color:var(--muted);font-weight:500;font-size:15px;
  position:relative;padding:8px 0;
}
.nav nav a::after{
  content:'';position:absolute;bottom:0;left:50%;
  width:0;height:2px;
  background:var(--gradient-2);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  transform:translateX(-50%);
  border-radius:2px;
}
.nav nav a:hover{color:var(--fg)}
.nav nav a:hover::after{width:100%}

/* Hero */
.hero{
  padding:120px 0 100px;
  text-align:center;
  position:relative;
}
.hero::before{
  content:'';position:absolute;
  top:50%;left:50%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(99,102,241,0.15) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  animation:pulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.5}
  50%{transform:translate(-50%,-50%) scale(1.1);opacity:0.8}
}
.hero h1{
  font-size:64px;font-weight:900;
  margin:0 0 20px;
  background:var(--gradient-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-2px;
  position:relative;
  animation:fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.tag{
  color:var(--muted);margin:0 0 32px;font-size:20px;
  animation:fadeInUp 0.8s ease-out 0.1s both;
}
.cta{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  animation:fadeInUp 0.8s ease-out 0.2s both;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 32px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  font-weight:600;font-size:15px;
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(10px);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);
  opacity:0;transition:opacity 0.3s;
}
.btn:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.2);
  box-shadow:var(--shadow),0 0 30px rgba(99,102,241,0.2);
}
.btn:hover::before{opacity:1}
.btn.primary{
  background:var(--gradient-2);
  border:none;color:#fff;
  box-shadow:0 4px 20px rgba(99,102,241,0.3);
}
.btn.primary:hover{
  box-shadow:0 8px 40px rgba(99,102,241,0.4),var(--shadow-glow);
  transform:translateY(-3px) scale(1.02);
}
.btn.primary::after{
  content:'';position:absolute;inset:-2px;
  background:var(--gradient-2);
  border-radius:16px;
  z-index:-1;
  opacity:0;
  filter:blur(15px);
  transition:opacity 0.3s;
}
.btn.primary:hover::after{opacity:0.5}

/* Cards */
.highlights{padding:60px 0 40px}
.cards{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
.card{
  background:linear-gradient(135deg,rgba(15,16,21,0.8),rgba(20,21,28,0.6));
  border:1px solid rgba(255,255,255,0.05);
  border-radius:20px;
  padding:32px;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
}
.card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
}
.card::after{
  content:'';position:absolute;
  top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle,rgba(99,102,241,0.1) 0%,transparent 50%);
  opacity:0;transition:opacity 0.5s;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(99,102,241,0.3);
  box-shadow:var(--shadow-card),0 0 40px rgba(99,102,241,0.1);
}
.card:hover::after{opacity:1}
.card h3{
  margin:0 0 14px;font-size:20px;font-weight:700;
  display:flex;align-items:center;gap:10px;
}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}

/* Gray Section */
.gray{
  background:linear-gradient(180deg,rgba(15,16,21,0.6) 0%,rgba(10,11,15,0.3) 100%);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  margin:60px 0;
  position:relative;
}
.gray::before{
  content:'';position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:200px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.5),transparent);
}
.split{
  display:grid;grid-template-columns:1.2fr 0.8fr;
  gap:60px;padding:80px 0;align-items:center;
}
.split h2{
  font-size:40px;margin:0 0 24px;font-weight:800;
  background:var(--gradient-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.split .list{padding-left:0;list-style:none;margin:0}
.split .list li{
  margin-bottom:16px;padding-left:36px;
  position:relative;color:var(--muted);font-size:16px;
  transition:all 0.3s ease;
  line-height:24px;
}
.split .list li:hover{color:var(--fg);transform:translateX(4px)}
.split .list li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:#fff;font-weight:bold;
  background:var(--gradient-2);
  width:24px;height:24px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;
  box-shadow:0 4px 15px rgba(99,102,241,0.3);
  line-height:1;
}

/* Stats */
.stats{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:24px !important;
  margin:48px 0 !important;
}
.stat{
  text-align:center !important;
  padding:32px 24px !important;
  background:linear-gradient(135deg,rgba(15,16,21,0.9),rgba(20,21,28,0.7)) !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1) !important;
  position:relative !important;
  overflow:hidden !important;
  backdrop-filter:blur(10px) !important;
}
.stat::before{
  content:'';position:absolute;inset:0;
  background:var(--gradient-2);opacity:0;
  transition:opacity 0.3s;
}
.stat:hover{
  transform:translateY(-5px);
  border-color:rgba(99,102,241,0.4) !important;
  box-shadow:0 10px 40px rgba(99,102,241,0.15);
}
.stat:hover::before{opacity:0.08}
.stat-value{
  font-size:48px !important;
  font-weight:900 !important;
  background:var(--gradient-text) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
  position:relative !important;
  line-height:1.2 !important;
}
.stat-label{
  color:var(--muted) !important;
  font-size:14px !important;
  margin-top:12px !important;
  position:relative !important;
  font-weight:500 !important;
}

/* Badge */
.badge-row{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:30px;
  font-size:13px;font-weight:600;
  background:rgba(99,102,241,0.1);
  color:var(--primary);
  border:1px solid rgba(99,102,241,0.2);
  backdrop-filter:blur(10px);
  transition:all 0.3s;
}
.badge:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(99,102,241,0.2)}
.badge.gold{
  background:rgba(234,179,8,0.1);color:#fbbf24;
  border-color:rgba(234,179,8,0.2);
}
.badge.green{
  background:rgba(34,197,94,0.1);color:#4ade80;
  border-color:rgba(34,197,94,0.2);
}

/* Info Box */
.info-box{
  background:linear-gradient(135deg,rgba(99,102,241,0.08) 0%,rgba(139,92,246,0.05) 100%);
  border:1px solid rgba(99,102,241,0.15);
  border-radius:20px;
  padding:28px 32px;
  margin:28px 0;
  position:relative;
  overflow:hidden;
}
.info-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.3),transparent);
}
.info-box h3{margin:0 0 14px;color:var(--fg);font-size:20px}
.info-box p{margin:0;color:var(--muted);line-height:1.8}

/* Timeline */
.timeline{position:relative;padding-left:40px;margin:40px 0}
.timeline::before{
  content:'';position:absolute;left:12px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--primary),var(--accent),transparent);
}
.timeline-item{position:relative;margin-bottom:32px;animation:fadeInUp 0.6s ease-out both}
.timeline-item:nth-child(1){animation-delay:0.1s}
.timeline-item:nth-child(2){animation-delay:0.2s}
.timeline-item:nth-child(3){animation-delay:0.3s}
.timeline-item:nth-child(4){animation-delay:0.4s}
.timeline-item::before{
  content:'';position:absolute;left:-34px;top:6px;
  width:16px;height:16px;border-radius:50%;
  background:var(--gradient-2);
  border:3px solid var(--bg);
  box-shadow:0 0 20px rgba(99,102,241,0.4);
}
.timeline-item h4{margin:0 0 6px;font-size:17px;color:var(--fg)}
.timeline-item p{margin:0;color:var(--muted);font-size:15px}

/* Screenshots */
.screenshots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;justify-items:center}
.screenshot-item{
  width:100%;max-width:320px;aspect-ratio:9/16;
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.05);
  background:var(--card);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}
.screenshot-item::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.5));
  opacity:0;transition:opacity 0.3s;z-index:1;
}
.screenshot-item:hover{
  transform:scale(1.03) translateY(-5px);
  box-shadow:var(--shadow),0 0 40px rgba(99,102,241,0.15);
}
.screenshot-item:hover::before{opacity:1}
.screenshot-item img{width:100%;height:100%;object-fit:cover;object-position:top}
.screenshot-box{
  width:100%;height:320px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.05);
  background:linear-gradient(135deg,var(--card),var(--card-hover));
  position:relative;display:flex;align-items:center;justify-content:center;
}
.screenshot-box img{width:100%;height:100%;object-fit:contain}
.screenshot-box .placeholder-text{display:none;color:var(--muted)}
.screenshot-box.no-img .placeholder-text{display:block}

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,0.05);
  margin-top:80px;
  background:linear-gradient(180deg,var(--card) 0%,var(--bg) 100%);
}
.foot{
  display:flex;align-items:center;justify-content:space-between;
  min-height:100px;padding:32px 0;flex-wrap:wrap;gap:20px;
}
.foot strong{
  background:var(--gradient-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;font-size:18px;
}
.foot nav a{margin-left:24px;color:var(--muted);font-size:14px}
.foot nav a:hover{color:var(--fg)}
.icp{font-size:12px;margin-top:8px}
.icp a{color:var(--muted)}

/* Page Title */
.section{padding:60px 0}
.page-title{
  font-size:44px;margin:28px 0;font-weight:800;
  background:var(--gradient-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Tables */
.list{padding-left:24px}
.list li{margin-bottom:10px;color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:14px 12px;text-align:left;color:var(--muted);font-size:14px;
}
.table th{color:var(--fg);font-weight:600}

/* Policy Pages */
.update-date{color:var(--muted);font-size:14px;margin-bottom:24px}
.policy-page h2{font-size:22px;margin:36px 0 18px;color:var(--fg);font-weight:700}
.policy-page ol{padding-left:28px}
.policy-page ol li{margin-bottom:10px;color:var(--muted)}
.policy-page p{color:var(--muted);line-height:1.9}

/* Scroll animations */
.fade-in{opacity:0;transform:translateY(30px);transition:all 0.8s cubic-bezier(0.4,0,0.2,1)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Floating particles effect */
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-20px) rotate(180deg)}
}

/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:44px}
  .stats{grid-template-columns:repeat(2,1fr) !important}
  .screenshots{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .hero{padding:80px 0 60px}
  .hero h1{font-size:36px;letter-spacing:-1px}
  .tag{font-size:16px}
  .stats{grid-template-columns:repeat(2,1fr) !important}
  .screenshots{grid-template-columns:1fr}
  .screenshot-item{max-width:260px}
  .foot{flex-direction:column;text-align:center}
  .foot nav{margin-top:16px}
  .foot nav a{margin:0 12px}
  .nav nav a{margin-left:16px;font-size:14px}
  .page-title{font-size:32px}
  .split h2{font-size:28px}
}


/* Glow effects */
.glow-text{
  text-shadow:0 0 40px rgba(99,102,241,0.5);
}

/* Animated gradient border */
.gradient-border{
  position:relative;
  background:var(--card);
  border-radius:20px;
}
.gradient-border::before{
  content:'';position:absolute;inset:-2px;
  background:var(--gradient-2);
  border-radius:22px;
  z-index:-1;
  opacity:0.5;
  filter:blur(8px);
  animation:borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow{
  0%,100%{opacity:0.3}
  50%{opacity:0.6}
}

/* Floating animation */
.float{
  animation:floating 3s ease-in-out infinite;
}
@keyframes floating{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* Shine effect on cards */
.card-shine{
  position:relative;
  overflow:hidden;
}
.card-shine::after{
  content:'';position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.03) 50%,
    transparent 100%
  );
  transform:rotate(30deg);
  animation:shine 6s ease-in-out infinite;
}
@keyframes shine{
  0%{transform:translateX(-100%) rotate(30deg)}
  100%{transform:translateX(100%) rotate(30deg)}
}

/* Better section titles */
.section-title{
  text-align:center;
  margin-bottom:16px;
  font-size:36px;
  font-weight:800;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-subtitle{
  text-align:center;
  color:var(--muted);
  margin-bottom:48px;
  font-size:18px;
}

/* Icon circles */
.icon-circle{
  width:56px;height:56px;
  border-radius:16px;
  background:var(--gradient-2);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(99,102,241,0.25);
}

/* Feature grid */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.feature-item{
  padding:32px;
  background:linear-gradient(135deg,rgba(15,16,21,0.9),rgba(20,21,28,0.7));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:24px;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.feature-item:hover{
  transform:translateY(-8px);
  border-color:rgba(99,102,241,0.3);
  box-shadow:0 20px 40px rgba(0,0,0,0.3),0 0 40px rgba(99,102,241,0.1);
}
.feature-item h3{
  font-size:20px;margin:0 0 12px;font-weight:700;
}
.feature-item p{
  color:var(--muted);font-size:15px;line-height:1.7;margin:0;
}

/* Glowing orbs background */
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.4;
  pointer-events:none;
}
.orb-1{
  width:400px;height:400px;
  background:rgba(99,102,241,0.3);
  top:-100px;right:-100px;
  animation:orbFloat 8s ease-in-out infinite;
}
.orb-2{
  width:300px;height:300px;
  background:rgba(139,92,246,0.25);
  bottom:-50px;left:-50px;
  animation:orbFloat 10s ease-in-out infinite reverse;
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(30px,30px)}
}

/* Improved screenshot box */
.screenshot-box{
  width:100%;height:320px;border-radius:24px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(135deg,rgba(15,16,21,0.9),rgba(20,21,28,0.7));
  position:relative;display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.screenshot-box::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(99,102,241,0.1));
  pointer-events:none;
}

/* Particle background */
.particles{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:-1;overflow:hidden;
}
.particle{
  position:absolute;
  width:4px;height:4px;
  background:rgba(99,102,241,0.5);
  border-radius:50%;
  animation:particleFloat 15s infinite linear;
}
@keyframes particleFloat{
  0%{transform:translateY(100vh) rotate(0deg);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-100vh) rotate(720deg);opacity:0}
}

/* Glowing text */
.glow-text-strong{
  text-shadow:
    0 0 10px rgba(99,102,241,0.5),
    0 0 20px rgba(99,102,241,0.3),
    0 0 40px rgba(99,102,241,0.2);
}

/* Hover lift effect */
.hover-lift{
  transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.hover-lift:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

/* Gradient text animation */
.gradient-text-animated{
  background:linear-gradient(90deg,#c7d2fe,#818cf8,#a78bfa,#c7d2fe);
  background-size:300% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradientMove 4s ease infinite;
}
@keyframes gradientMove{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Neon border */
.neon-border{
  position:relative;
}
.neon-border::before{
  content:'';position:absolute;inset:-3px;
  background:linear-gradient(45deg,#6366f1,#8b5cf6,#a855f7,#6366f1);
  background-size:400% 400%;
  border-radius:inherit;
  z-index:-1;
  animation:neonGlow 3s ease infinite;
  filter:blur(10px);
  opacity:0.5;
}
@keyframes neonGlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Typing cursor effect */
.typing-cursor::after{
  content:'|';
  animation:blink 1s step-end infinite;
  color:var(--primary);
}
@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

/* Smooth scroll indicator */
.scroll-indicator{
  position:absolute;bottom:40px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:8px;color:var(--muted);font-size:14px;
  animation:bounce 2s ease-in-out infinite;
}
.scroll-indicator::after{
  content:'↓';font-size:20px;
}
@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(10px)}
}

/* Glass morphism card */
.glass-card{
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
}

/* Animated underline */
.animated-underline{
  position:relative;
  display:inline-block;
}
.animated-underline::after{
  content:'';position:absolute;
  bottom:-4px;left:0;width:0;height:2px;
  background:var(--gradient-2);
  transition:width 0.3s ease;
}
.animated-underline:hover::after{
  width:100%;
}

/* Pulse ring effect */
.pulse-ring{
  position:relative;
}
.pulse-ring::before{
  content:'';position:absolute;
  top:50%;left:50%;
  width:100%;height:100%;
  border:2px solid var(--primary);
  border-radius:inherit;
  transform:translate(-50%,-50%);
  animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}
}

/* Stagger animation for lists */
.stagger-item{
  opacity:0;transform:translateY(20px);
  animation:staggerIn 0.5s ease forwards;
}
.stagger-item:nth-child(1){animation-delay:0.1s}
.stagger-item:nth-child(2){animation-delay:0.2s}
.stagger-item:nth-child(3){animation-delay:0.3s}
.stagger-item:nth-child(4){animation-delay:0.4s}
.stagger-item:nth-child(5){animation-delay:0.5s}
.stagger-item:nth-child(6){animation-delay:0.6s}
@keyframes staggerIn{
  to{opacity:1;transform:translateY(0)}
}

/* Morphing background */
.morph-bg{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:-2;overflow:hidden;
}
.morph-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:0.3;
  animation:morphMove 20s ease-in-out infinite;
}
.morph-blob:nth-child(1){
  width:600px;height:600px;
  background:rgba(99,102,241,0.4);
  top:-200px;left:-200px;
}
.morph-blob:nth-child(2){
  width:500px;height:500px;
  background:rgba(139,92,246,0.3);
  bottom:-150px;right:-150px;
  animation-delay:-7s;
}
.morph-blob:nth-child(3){
  width:400px;height:400px;
  background:rgba(6,182,212,0.25);
  top:50%;left:50%;
  animation-delay:-14s;
}
@keyframes morphMove{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(50px,50px) scale(1.1)}
  50%{transform:translate(0,100px) scale(0.9)}
  75%{transform:translate(-50px,50px) scale(1.05)}
}