/* ================================
   DispareZap - Estilos Customizados
   ================================ */

* {
    border-color: hsl(160, 20%, 18%);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: hsl(160, 30%, 6%);
    color: hsl(150, 20%, 95%);
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================
   Gradientes de Background
   ================================ */

.bg-hero-gradient {
    background: linear-gradient(
        135deg,
        hsl(160, 30%, 6%) 0%,
        hsl(160, 28%, 8%) 50%,
        hsl(160, 25%, 10%) 100%
    );
}

.bg-gradient-brand {
    background: linear-gradient(
        135deg,
        hsl(142, 70%, 40%) 0%,
        hsl(180, 60%, 35%) 50%,
        hsl(260, 50%, 45%) 100%
    );
}

.bg-gradient-card {
    background: linear-gradient(
        145deg,
        hsl(160, 25%, 12%) 0%,
        hsl(160, 25%, 9%) 100%
    );
}

.text-gradient-brand {
    background: linear-gradient(
        135deg,
        hsl(142, 60%, 55%) 0%,
        hsl(175, 60%, 35%) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================
   Efeitos de Glow
   ================================ */

.glow-green {
    box-shadow: 0 0 40px hsla(142, 70%, 45%, 0.3);
}

.glow-green-sm {
    box-shadow: 0 0 20px hsla(142, 70%, 45%, 0.2);
}

/* ================================
   Efeito Glass
   ================================ */

.glass {
    background: hsla(160, 30%, 6%, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ================================
   Card Hover Effect
   ================================ */

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 40px hsla(0, 0%, 0%, 0.35);
}

/* ================================
   Status Badges
   ================================ */

.badge-success {
    background-color: hsla(142, 70%, 45%, 0.2);
    color: hsl(142, 70%, 45%);
    border: 1px solid hsla(142, 70%, 45%, 0.3);
}

.badge-warning {
    background-color: hsla(45, 93%, 47%, 0.2);
    color: hsl(45, 93%, 58%);
    border: 1px solid hsla(45, 93%, 47%, 0.3);
}

.badge-info {
    background-color: hsla(217, 91%, 60%, 0.2);
    color: hsl(217, 91%, 65%);
    border: 1px solid hsla(217, 91%, 60%, 0.3);
}

.badge-purple {
    background-color: hsla(270, 60%, 50%, 0.2);
    color: hsl(270, 60%, 65%);
    border: 1px solid hsla(270, 60%, 50%, 0.3);
}

/* ================================
   Animation Delays
   ================================ */

.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }

/* ================================
   Botões Hero
   ================================ */

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, hsl(142, 70%, 40%) 0%, hsl(180, 60%, 35%) 50%, hsl(260, 50%, 45%) 100%);
    color: hsl(150, 20%, 95%);
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s;
    box-shadow: 0 0 20px hsla(142, 70%, 45%, 0.2);
}

.btn-hero-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px hsla(142, 70%, 45%, 0.3);
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    background: transparent;
    border: 2px solid hsla(142, 70%, 45%, 0.5);
    color: hsl(142, 70%, 45%);
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s;
}

.btn-hero-secondary:hover {
    background: hsla(142, 70%, 45%, 0.1);
    border-color: hsl(142, 70%, 45%);
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, hsl(142, 70%, 40%) 0%, hsl(180, 60%, 35%) 50%, hsl(260, 50%, 45%) 100%);
    color: hsl(150, 20%, 95%);
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s;
}

.btn-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px hsla(142, 70%, 45%, 0.3);
}

/* ================================
   Section Styling
   ================================ */

.section-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .section-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .section-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: hsl(150, 20%, 95%);
}

@media (min-width: 640px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.section-subtitle {
    font-size: 1.125rem;
    color: hsl(160, 15%, 60%);
    max-width: 48rem;
}

@media (min-width: 640px) {
    .section-subtitle {
        font-size: 1.25rem;
    }
}

/* ================================
   Feature Cards
   ================================ */

.feature-card {
    background: linear-gradient(145deg, hsl(160, 25%, 12%) 0%, hsl(160, 25%, 9%) 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid hsla(160, 20%, 18%, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
    .feature-card {
        padding: 2rem;
    }
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 40px hsla(0, 0%, 0%, 0.35);
}

/* ================================
   Metric Cards
   ================================ */

.metric-card {
    background: hsla(160, 25%, 10%, 0.5);
    backdrop-filter: blur(4px);
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid hsla(160, 20%, 18%, 0.3);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ================================
   Browser Mockup
   ================================ */

.browser-mockup {
    background: hsl(160, 25%, 10%);
    border-radius: 1rem;
    border: 1px solid hsla(160, 20%, 18%, 0.5);
    overflow: hidden;
    box-shadow: 0 8px 40px hsla(0, 0%, 0%, 0.35);
}

.browser-mockup-bar {
    background: hsla(160, 20%, 15%, 0.5);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid hsla(160, 20%, 18%, 0.3);
}

.browser-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
}

/* ================================
   Icon Styling
   ================================ */

.lucide-icon {
    width: 1.25rem;
    height: 1.25rem;
}