/*
Theme Name: Number King - Jalwa Game
Theme URI: https://sunshine-landing-builder.lovable.app
Author: Number King
Author URI: https://sunshine-landing-builder.lovable.app
Description: A stylish landing page theme for Number King (Jalwa Game) — colour trading signals, live sessions, and risk control.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: number-king
*/

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a1a2e;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Animated Gradient Background */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-gradient-bg {
  background: linear-gradient(-45deg, #fff, hsl(160,60%,95%), hsl(270,60%,95%), hsl(30,100%,96%), hsl(200,80%,95%), hsl(330,60%,96%), #fff);
  background-size: 600% 600%;
  animation: gradient-shift 12s ease infinite;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

/* Decorative Blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.blob-1 { top: -10%; right: -10%; width: 500px; height: 500px; background: linear-gradient(to bottom right, rgba(192,132,252,0.3), rgba(249,168,212,0.2)); }
.blob-2 { bottom: -10%; left: -10%; width: 500px; height: 500px; background: linear-gradient(to top right, rgba(103,232,249,0.25), rgba(147,197,253,0.2)); }
.blob-3 { top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 400px; background: linear-gradient(to right, rgba(253,230,138,0.2), rgba(253,186,116,0.15)); filter: blur(80px); }

/* Hero Section */
.hero { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 42rem; margin: 0 auto; padding: 4rem 0 3rem; }

/* Logo */
.logo-wrapper { position: relative; margin-bottom: 2rem; }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.logo-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(to right, #34d399, #22d3ee, #a78bfa);
  filter: blur(12px); opacity: 0.4;
  animation: spin-slow 6s linear infinite;
}
.logo-img {
  position: relative; width: 9rem; height: 9rem; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 50px rgba(16,185,129,0.2);
  object-fit: cover;
}
.logo-badge {
  position: absolute; top: -0.5rem; right: -0.5rem;
  background: linear-gradient(to right, #facc15, #f59e0b);
  border-radius: 50%; padding: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
}
.logo-badge svg { width: 16px; height: 16px; fill: #fff; }

/* Subtitle badge */
.premium-badge {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  background: linear-gradient(to right, #10b981, #06b6d4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.premium-badge .sparkle { color: #facc15; -webkit-text-fill-color: #facc15; font-size: 1.1rem; }

/* Title */
.title {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1rem;
  background: linear-gradient(to right, #34d399, #4ade80, #2dd4bf);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.title .subtitle {
  display: block; font-size: 1.6rem; margin-top: 0.25rem;
  background: linear-gradient(to right, #a78bfa, #e879f9, #f472b6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
@media (min-width: 768px) { .title { font-size: 3rem; } .title .subtitle { font-size: 1.9rem; } }

.description { color: #64748b; font-size: 1.1rem; max-width: 28rem; margin-bottom: 2rem; line-height: 1.6; }

/* CTA Button */
.cta-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.5rem; border-radius: 50px; font-weight: 700; font-size: 1.1rem;
  color: #fff; text-decoration: none; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cta-btn:hover { transform: scale(1.05); box-shadow: 0 8px 40px rgba(16,185,129,0.4); }
.cta-bg { position: absolute; inset: 0; background: linear-gradient(to right, #10b981, #22c55e, #14b8a6); transition: all 0.3s; }
.cta-btn:hover .cta-bg { background: linear-gradient(to right, #34d399, #4ade80, #2dd4bf); }
.cta-glow { position: absolute; inset: 0; background: linear-gradient(to right, #10b981, #22c55e, #14b8a6); filter: blur(20px); opacity: 0.5; }
.cta-btn span { position: relative; z-index: 1; }

/* Features */
.features { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 56rem; width: 100%; margin: 0 auto; padding-bottom: 4rem; }
@media (min-width: 768px) { .features { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  position: relative; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.4); backdrop-filter: blur(12px);
  padding: 1.5rem; text-align: center;
  transition: all 0.3s;
}
.feature-card:hover { background: rgba(255,255,255,0.6); box-shadow: 0 20px 40px rgba(0,0,0,0.08); transform: translateY(-4px); }

.feature-bar { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4rem; height: 4px; border-radius: 0 0 4px 4px; }
.feature-bar.emerald { background: linear-gradient(to right, #34d399, #22d3ee); }
.feature-bar.violet { background: linear-gradient(to right, #a78bfa, #e879f9); }
.feature-bar.amber { background: linear-gradient(to right, #fbbf24, #fb923c); }

.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 0.75rem;
  margin-bottom: 1rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.feature-icon.emerald { background: linear-gradient(to bottom right, #34d399, #22d3ee); }
.feature-icon.violet { background: linear-gradient(to bottom right, #a78bfa, #e879f9); }
.feature-icon.amber { background: linear-gradient(to bottom right, #fbbf24, #fb923c); }
.feature-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.feature-card h3 { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.25rem; color: #1a1a2e; }
.feature-card p { color: #64748b; font-size: 0.875rem; line-height: 1.5; }

/* Footer */
.site-footer { position: relative; z-index: 10; padding-bottom: 1.5rem; color: #94a3b8; font-size: 0.75rem; }