@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Inter:wght@300;400;600;800&display=swap');

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

:root {
    --diesel-orange: #FF4500;
    --asphalt: #0F1012;
    --steel: #2A2C30;
}

body {
    background-color: var(--asphalt);
    color: #e5e5e5;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .display-font {
    font-family: 'Chakra Petch', sans-serif;
}

/* Texture Overlays */
.bg-grid-pattern {
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

.bg-noise {
    position: relative;
}
.bg-noise::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    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.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Animations */
.clip-path-slant {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

.clip-path-slant-reverse {
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}

.text-stroke-1 {
    -webkit-text-stroke: 1px rgba(255,255,255,0.1);
    color: transparent;
}

.service-card {
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--diesel-orange);
}

.btn-primary {
    @apply bg-orange-600 hover:bg-orange-700 text-white font-bold uppercase tracking-wider px-8 py-4 rounded transition-all flex items-center justify-center gap-2 shadow-[0_0_20px_rgba(234,88,12,0.3)] hover:shadow-[0_0_30px_rgba(234,88,12,0.5)];
}

.btn-outline {
    @apply border border-white/20 hover:border-white/50 bg-white/5 hover:bg-white/10 text-white font-bold uppercase tracking-wider px-8 py-4 rounded transition-all flex items-center justify-center gap-2 backdrop-blur-sm;
}