/* build:20260209232806-b52b119f11bd */
:root{
  /* Variables copied from src/index.css */
  --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"; }
*,::before,::after{ box-sizing:border-box; }

/* Design system components (converted from @apply) */
.glass-card{
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--glass-border));
  border-radius: 1rem; /* rounded-2xl */
  background: hsl(var(--glass-bg));
}

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

.cta-button{
  position:relative;
  padding: 1rem 2rem;
  font-weight:700;
  font-size:1.125rem;
  border-radius: 0.75rem;
  transition: all .3s;
  background: var(--gradient-cta);
  box-shadow: 0 0 30px hsl(var(--etoro-green) / 0.4);
  border: 0;
  text-decoration:none;
  display:inline-flex;
}
.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);} }

.pulse-glow{ animation: pulse-glow 2s ease-in-out infinite; }
@keyframes pulse-glow{ 0%,100%{ box-shadow: 0 0 20px hsl(var(--etoro-green)/.3);} 50%{ box-shadow: 0 0 40px hsl(var(--etoro-green)/.6);} }

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

.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;}

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

.shimmer{ position:relative; overflow:hidden; }
.shimmer::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.1), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }

/* safe-area bottom for iOS */
.safe-area-bottom{ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }

/* Minimal typography for article content (prose) */
.prose{ max-width: 65ch; }
.prose h2{ font-weight:700; color:hsl(var(--foreground)); font-size:1.5rem; margin-top:3rem; margin-bottom:1.5rem; }
.prose h3{ font-weight:700; color:hsl(var(--foreground)); font-size:1.25rem; margin-top:2rem; margin-bottom:1rem; }
.prose p{ color:hsl(var(--muted-foreground)); line-height:1.75; margin-bottom:1.5rem; }
.prose ul{ color:hsl(var(--muted-foreground)); margin-bottom:1.5rem; padding-left:1.25rem; }
.prose li{ margin-bottom:.5rem; }
.prose strong{ color:hsl(var(--foreground)); font-weight:700; }
.prose a{ color:hsl(var(--primary)); text-decoration:none; }
.prose a:hover{ text-decoration:underline; }

/* line clamp fallback */
.line-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =========================================================
   OFFLINE / NO-TAILWIND FALLBACK (pixel-like for Hero + Mockup)
   These rules only matter if Tailwind CDN is blocked/unavailable.
   They intentionally mirror the subset of utilities used above.
   ========================================================= */

/* Core layout */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}.left-0{left:0}.right-0{right:0}.bottom-0{bottom:0}
.-top-4{top:-1rem}.-left-4{left:-1rem}.-right-4{right:-1rem}.-bottom-4{bottom:-1rem}
.z-10{z-index:10}.z-50{z-index:50}
.overflow-hidden{overflow:hidden}
.min-h-screen{min-height:100vh}
.w-full{width:100%}.h-full{height:100%}
.h-48{height:12rem}
.w-10{width:2.5rem}.h-10{height:2.5rem}
.w-12{width:3rem}.h-12{height:3rem}
.w-96{width:24rem}.h-96{height:24rem}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}

.container{width:100%;margin-left:auto;margin-right:auto;max-width:1400px;padding-left:2rem;padding-right:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-5xl{max-width:64rem}

.flex{display:flex}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.justify-center{justify-content:center}
.gap-1{gap:.25rem}.gap-4{gap:1rem}
.space-y-4> :not([hidden])~ :not([hidden]){margin-top:1rem}
.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.pt-20{padding-top:5rem}
.mt-16{margin-top:4rem}
.text-center{text-align:center}
.text-right{text-align:right}

/* Typography */
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-white{color:#fff}
.text-foreground{color:hsl(var(--foreground))}
.text-muted-foreground{color:hsl(var(--muted-foreground))}
.text-etoro-green{color:hsl(var(--etoro-green))}

/* Backgrounds */
.bg-background{background:hsl(var(--background))}
.bg-background\/50{background:hsla(var(--background)/.5)}
.bg-background\/80{background:hsla(var(--background)/.8)}
.bg-hero-gradient{background:var(--gradient-hero)}
.bg-etoro-green{background:hsl(var(--etoro-green))}
.bg-etoro-green\/20{background:hsla(var(--etoro-green)/.2)}
.bg-etoro-green\/60{background:hsla(var(--etoro-green)/.6)}
.bg-etoro-blue\/10{background:hsla(var(--etoro-blue)/.1)}
.bg-etoro-purple\/20{background:hsla(var(--etoro-purple)/.2)}
.bg-destructive{background:hsl(var(--destructive))}

/* Gradients used in chart */
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.from-etoro-green\/10{--tw-gradient-from:hsla(var(--etoro-green)/.1);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.to-transparent{--tw-gradient-to:transparent}

/* Effects */
.blur-\[120px\]{filter:blur(120px)}
.blur-\[150px\]{filter:blur(150px)}
.backdrop-blur-xl{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.opacity-20{opacity:.2}

/* Hover */
.hover\:opacity-90:hover{opacity:.9}
.transition-opacity{transition:opacity .2s ease}

/* Ensure the BTC mockup stays pixel-like even without Tailwind */
.animated-border .glass-card .bg-background\/50{
  border-radius: .75rem;
}
.animated-border .glass-card .h-48{
  border-radius: .5rem;
  padding: 1rem;
  gap: .25rem;
}
.animated-border .glass-card button{
  display:block;
}


/* Stronger base blue feel (matches original look) */
body{
  background:
    radial-gradient(800px 600px at 50% 25%, hsla(var(--etoro-blue)/.18), transparent 60%),
    radial-gradient(700px 500px at 25% 35%, hsla(var(--etoro-green)/.14), transparent 60%),
    radial-gradient(700px 500px at 75% 35%, hsla(var(--etoro-purple)/.14), transparent 60%),
    hsl(var(--background));
}