
:root{
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --border: 214 32% 91%;
  --primary: 152 68% 34%;
  --primary-foreground: 0 0% 100%;
  --secondary: 221 83% 53%;
  --secondary-foreground: 0 0% 100%;
  --accent: 262 83% 58%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --etoro-green: 152 68% 34%;
  --etoro-green-light: 152 70% 44%;
  --etoro-blue: 207 90% 54%;
  --etoro-blue-dark: 215 85% 45%;
  --etoro-purple: 262 83% 58%;
  --etoro-gold: 45 93% 47%;
  --gradient-cta: linear-gradient(135deg, hsl(var(--etoro-green)) 0%, hsl(var(--etoro-green-light)) 100%);
}
html,body{height:100%}
.gradient-text{
  background: linear-gradient(135deg, hsl(var(--etoro-green)) 0%, hsl(var(--etoro-blue)) 50%, hsl(var(--etoro-purple)) 100%);
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
}
.glass-card{
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1.25rem;
}
.cta-button{
  background: var(--gradient-cta);
  border-radius: 0.9rem;
  padding: 1rem 2rem;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(16,185,129,.25);
  transition: transform .2s ease, opacity .2s ease;
}
.cta-button:hover{opacity:.95; transform: translateY(-1px);}
.hover-lift{transition: transform .25s ease, box-shadow .25s ease;}
.hover-lift:hover{transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.12);}
.animated-border{
  position: relative;
  border-radius: 1.5rem;
  padding: 2px;
  background: linear-gradient(135deg, rgba(16,185,129,.55), rgba(59,130,246,.4), rgba(168,85,247,.4));
}
.animated-border > *{border-radius: 1.45rem;}
.float-animation{animation: floaty 6s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform: translateY(0)}50%{transform: translateY(-10px)}}
.animate-glow-pulse{animation: glow 4s ease-in-out infinite;}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:.85}}
.animate-fade-in{animation: fadeIn .6s ease forwards; opacity:0;}
@keyframes fadeIn{to{opacity:1}}
.stagger-children > *{animation: fadeIn .6s ease forwards; opacity:0;}
.stagger-children > *:nth-child(1){animation-delay:.05s}
.stagger-children > *:nth-child(2){animation-delay:.12s}
.stagger-children > *:nth-child(3){animation-delay:.19s}
.stagger-children > *:nth-child(4){animation-delay:.26s}
.safe-area-bottom{padding-bottom: calc(1rem + env(safe-area-inset-bottom));}
