@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --brand-dark: #0D1117;
    --brand-dark-blue: #161B22;
    --brand-light: #C9D1D9;
    --brand-gray: #8B949E;
    --brand-accent: #58A6FF;
    --brand-accent-glow: rgba(88, 166, 255, 0.2);
}

body {
    background-color: var(--brand-dark);
    color: var(--brand-light);
    font-family: 'Inter', sans-serif;
}

.gradient-text {
    @apply bg-gradient-to-r from-blue-400 to-purple-500 text-transparent bg-clip-text;
}

.radial-gradient-hero {
    background-image: radial-gradient(circle at 50% 0%, var(--brand-accent-glow) 0%, transparent 40%);
}

.radial-gradient-cta {
    background-image: radial-gradient(circle, var(--brand-accent) 0%, transparent 50%);
}

.glass-card {
    background-color: rgba(22, 27, 34, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-link {
    @apply text-brand-light font-medium transition-colors duration-300 hover:text-white;
}

.btn {
    @apply px-5 py-2.5 rounded-lg font-semibold transition-all duration-300 focus:outline-none focus:ring-4;
}

.btn-primary {
    @apply bg-brand-accent text-brand-dark hover:bg-blue-300 focus:ring-brand-accent-glow;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

.form-input {
    @apply w-full px-5 py-3.5 bg-brand-dark border border-brand-gray/40 rounded-lg text-white placeholder-brand-gray focus:ring-2 focus:ring-brand-accent focus:border-brand-accent focus:outline-none transition-all duration-300;
}

.feature-card {
    @apply bg-brand-dark-blue/50 border border-brand-gray/20 rounded-2xl p-8 text-center flex flex-col items-center space-y-4 transition-all duration-300 hover:border-brand-accent/50 hover:-translate-y-2 hover:shadow-2xl hover:shadow-brand-accent-glow;
}

.feature-icon {
    @apply w-10 h-10 text-brand-accent mb-2;
}

.feature-title {
    @apply text-xl font-bold text-white;
}

.feature-description {
    @apply text-brand-light;
}

.product-glow {
    @apply absolute w-full h-full max-w-md bg-brand-accent rounded-full blur-3xl opacity-10;
    transform: translateZ(0); /* Promotes to its own layer */
}

.animated-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.animated-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}