@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

/* Base Styles */
:root {
  --primary: #6366f1;
  --primary-light: #818cf8;
  --secondary: #10b981;
  --dark: #0f172a;
  --light: #f8fafc;
  --accent: #f59e0b;
}

body {
    scroll-behavior: smooth;
    background: linear-gradient(135deg, var(--dark) 0%, #1e293b 100%);
}
/* Noise Background */
.bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
}

/* Buttons */
.btn-primary {
    @apply bg-noir-50 text-noir-900 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:bg-noir-100 hover:shadow-lg hover:shadow-noir-900/20;
}

.btn-secondary {
    @apply border border-noir-400 text-noir-50 px-8 py-3 rounded-full font-medium transition-all duration-300 hover:bg-noir-400/10 hover:border-noir-300 hover:text-noir-100;
}
/* Service Cards */
.service-card {
    @apply bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 transition-all duration-500 hover:border-white/20 hover:-translate-y-2 hover:shadow-xl hover:shadow-primary/20;
}

.service-icon {
    @apply w-14 h-14 rounded-full bg-gradient-to-br from-primary to-primary-light flex items-center justify-center mb-6 text-white;
}
.service-icon svg {
    @apply w-6 h-6;
}
/* Project Cards */
.project-card {
    @apply group cursor-pointer;
}

.project-image {
    @apply aspect-[4/3] w-full relative rounded-xl overflow-hidden mb-4;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.3);
}

.project-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/30 to-transparent flex items-end justify-start opacity-0 group-hover:opacity-100 transition-opacity duration-500 p-6;
}

.project-overlay span {
    @apply text-white font-medium text-xl;
}

.project-info h3 {
    @apply text-2xl font-bold transition-colors duration-300 group-hover:text-primary-light;
}
/* Process Steps */
.process-steps {
    @apply relative;
}

.process-step {
    @apply flex items-start mb-12;
}

.process-step:last-child {
    @apply mb-0;
}

.step-number {
    @apply text-noir-400 font-serif italic text-2xl mr-6 pt-1;
}

.step-content {
    @apply pb-12 relative flex-1;
}

.step-content::after {
    content: '';
    @apply absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-noir-700 via-noir-500 to-noir-700;
}

.process-step:last-child .step-content::after {
    @apply hidden;
}
/* Form Elements */
.form-input {
    @apply w-full bg-white/5 border border-white/10 rounded-xl px-6 py-4 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300 placeholder-white/30 shadow-lg;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Contact Section Styles */
#contact {
    position: relative;
    overflow: hidden;
}

#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
    z-index: -1;
}

#contact h2 {
    @apply text-4xl md:text-5xl font-serif italic mb-6;
    background: linear-gradient(to right, #ffffff, #d1d5db);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#contact p {
    @apply text-lg text-noir-300 max-w-2xl mx-auto leading-relaxed;
    position: relative;
}

#contact p::after {
    content: '';
    @apply block w-16 h-px bg-gradient-to-r from-noir-700 via-noir-400 to-noir-700 mt-8 mx-auto;
}

form {
    @apply bg-noir-800/30 backdrop-blur-sm border border-white/10 rounded-2xl p-8 shadow-xl;
    transition: all 0.4s ease;
}

form:hover {
    @apply border-white/20 shadow-2xl shadow-primary/10;
}
/* Marquee */
.marquee {
    @apply whitespace-nowrap overflow-hidden;
}

.marquee-content {
    @apply inline-block whitespace-nowrap;
    animation: marquee 20s linear infinite;
}

.marquee-item {
    @apply inline-block px-10 text-noir-400 uppercase tracking-widest text-sm font-medium;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Animations */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translateY(20px);
    transition-property: transform, opacity;
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .process-step {
        @apply flex-col;
    }
    .step-number {
        @apply mr-0 mb-4;
    }
    .step-content {
        @apply pb-8;
    }
}