/* 🌈 QuickStart-Inspired Styling for WallDrop */

/* === Color Variables (Neon Greens, Bright Pinks, Deep Purples) === */
:root {
    --color-primary: #7C3AED;      /* Deep Purple */
    --color-secondary: #EC4899;     /* Bright Pink */
    --color-accent: #10B981;        /* Neon Green */
    --color-dark: #1E1B4B;          /* Dark Purple */
    --color-light: #F9FAFB;
}

/* === Typography (Poppins Primary, Roboto Body) === */
.font-poppins {
    font-family: 'Poppins', sans-serif;
}

/* === Hero Section Styling === */
#hero {
    position: relative;
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #1E1B4B 100%);
    padding: 120px 0 60px;
}

/* === Feature Boxes === */
.features-section {
    background-color: var(--color-light);
}

.icon-box {
    text-align: center;
    padding: 3rem 2rem;
    transition: all 0.3s ease;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.icon-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.2);
}

/* === Button Styling (Gradient like QuickStart) === */
.btn-get-started, 
.btn-primary {
    background: linear-gradient(45deg, #7C3AED 0%, #EC4899 100%);
    border: none;
    transition: all 0.3s ease;
}

.btn-get-started:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
}

/* === Game Cards === */
.game-card {
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
}

.game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.2);
}

/* === Page Headers (Floating design) === */
.page-header {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 40px) 100%, 0 100%);
}

/* === Testimonials === */
.testimonial-item {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* === Footer (Neon accent) === */
#footer {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-top: -50px;
}

/* === Animations === */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* === Responsive Tweaks === */
@media (max-width: 768px) {
    #hero h1 {
        font-size: 1.8rem !important;
    }
    
    .page-header {
        padding: 100px 0 40px;
    }
}

/* === Utility Classes === */
.shadow-sm-custom {
    box-shadow: 0 4px 6px rgba(124, 58, 237, 0.15) !important;
}

.rounded-custom {
    border-radius: 15px !important;
}