/* eToro Landing Page - static build (no React) */

/* CSS variables from original design system */
:root {
  --etoro-green: 145 100% 39%;
  --etoro-green-light: 145 85% 50%;
  --etoro-blue: 220 90% 45%;
  --etoro-blue-dark: 230 85% 25%;
  --etoro-purple: 270 70% 50%;
  --etoro-gold: 45 100% 50%;

  --gradient-hero: linear-gradient(135deg, hsl(var(--etoro-green)) 0%, hsl(var(--etoro-blue)) 50%, hsl(var(--etoro-purple)) 100%);
  --gradient-cta: linear-gradient(135deg, hsl(var(--etoro-green)) 0%, hsl(var(--etoro-green-light)) 100%);
  --gradient-card: linear-gradient(180deg, hsl(230 85% 15%) 0%, hsl(230 85% 8%) 100%);
  --gradient-text: linear-gradient(135deg, hsl(var(--etoro-green)) 0%, hsl(var(--etoro-gold)) 100%);

  --glass-bg: 230 30% 15% / 0.6;
  --glass-border: 0 0% 100% / 0.1;

  --background: 230 85% 5%;
  --foreground: 0 0% 98%;

  --card: 230 50% 10%;
  --card-foreground: 0 0% 98%;

  --popover: 230 50% 10%;
  --popover-foreground: 0 0% 98%;

  --primary: 145 100% 39%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 90% 45%;
  --secondary-foreground: 0 0% 100%;

  --muted: 230 30% 20%;
  --muted-foreground: 230 20% 60%;

  --accent: 270 70% 50%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  --border: 230 30% 20%;
  --input: 230 30% 15%;
  --ring: 145 100% 39%;

  --radius: 0.75rem;
}

html { scroll-behavior: smooth; }
body { margin:0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }

/* Custom component classes that existed in Tailwind @layer components */
.glass-card{
  background: hsl(var(--glass-bg));
  border: 1px solid hsl(var(--glass-border));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 1rem;
}
.gradient-text{
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cta-button{
  position: relative;
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 0.75rem;
  transition: all .3s ease;
  background: var(--gradient-cta);
  box-shadow: 0 0 30px hsl(var(--etoro-green) / 0.4);
  text-decoration: none;
}
.cta-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 50px hsl(var(--etoro-green) / 0.6);
}
.animated-border{
  position: relative;
  border-radius: 1rem;
  padding: 2px;
  background: var(--gradient-hero);
}
.animated-border::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 1rem;
  background: var(--gradient-hero);
  filter: blur(10px);
  opacity: .5;
  z-index:-1;
}
.float-animation{ animation: float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }

.hover-lift{ transition: all .3s ease; }
.hover-lift:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px hsl(0 0% 0% / 0.3); }

.stagger-children > *{ opacity:0; animation: fadeInUp .5s ease-out forwards; }
.stagger-children > *:nth-child(1){animation-delay:.1s}
.stagger-children > *:nth-child(2){animation-delay:.2s}
.stagger-children > *:nth-child(3){animation-delay:.3s}
.stagger-children > *:nth-child(4){animation-delay:.4s}
.stagger-children > *:nth-child(5){animation-delay:.5s}
.stagger-children > *:nth-child(6){animation-delay:.6s}

.fade-in-up{ opacity:0; animation: fadeInUp .6s ease-out forwards; }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:translateY(0)} }

@keyframes glowPulse{ 0%,100%{opacity:.4} 50%{opacity:.8} }
.animate-glow-pulse{ animation: glowPulse 3s ease-in-out infinite; }

/* "line-clamp-2" fallback (used for excerpts) */
.line-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Safe-area helper for iOS */
.safe-area-bottom{ padding-bottom: env(safe-area-inset-bottom); }

/* Article typography (replacement for Tailwind Typography plugin used by prose classes) */
.article-prose h2{ font-size: 1.5rem; margin: 3rem 0 1.5rem; font-weight: 800; color: hsl(var(--foreground)); }
.article-prose h3{ font-size: 1.25rem; margin: 2rem 0 1rem; font-weight: 800; color: hsl(var(--foreground)); }
.article-prose p{ color: hsl(var(--muted-foreground)); line-height: 1.75; margin: 0 0 1.5rem; }
.article-prose li{ color: hsl(var(--muted-foreground)); margin: .4rem 0; }
.article-prose ul{ padding-left: 1.25rem; margin: 0 0 1.5rem; }
.article-prose strong{ color: hsl(var(--foreground)); font-weight: 700; }
.article-prose a{ color: hsl(var(--primary)); text-decoration: none; }
.article-prose a:hover{ text-decoration: underline; }

/* Consent modal (centered) */
#consentOverlay{ display:none; }