/* css.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root {
    --primary-color: #f97316;
}

* {
    transition: all 0.3s ease;
}

.tailwind-ready {
    font-family: 'Inter', system_ui, sans-serif;
}

.logo-font {
    font-family: 'Space Grotesk', sans-serif;
}

/* Theme Backgrounds */
.hero-bg,
.theme-card {
    background: radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.45), transparent 50%),
                radial-gradient(circle at 80% 30%, rgba(251, 191, 36, 0.4), transparent 50%),
                linear-gradient(135deg, #f97316 0%, #fb923c 45%, #f59e0b 100%);
}

.hero-blue,
.theme-card-blue {
    background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.45), transparent 50%),
                radial-gradient(circle at 80% 30%, rgba(147, 197, 253, 0.4), transparent 50%),
                linear-gradient(135deg, #3b82f6 0%, #60a5fa 45%, #1e40af 100%);
}

.hero-green,
.theme-card-green {
    background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.45), transparent 50%),
                radial-gradient(circle at 80% 30%, rgba(134, 239, 172, 0.4), transparent 50%),
                linear-gradient(135deg, #10b981 0%, #34d399 45%, #059669 100%);
}

/* Accents */
.text-current-theme { color: var(--primary-color); }
.bg-current-theme { background-color: var(--primary-color); }

.section-header {
    position: relative;
}

/* Tech Tabs */
.tech-tab {
    transition: all 0.3s ease;
}

.tech-tab.active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.section-header::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background: var(--primary-color);
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.nav-blur {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.85);
}

.nav-link {
    position: relative;
    padding-bottom: 4px;
    color: #374151;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-color) !important;
}

.nav-link:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover:after,
.nav-link.active:after {
    width: 100%;
}

.nav-link-mobile:hover,
.nav-link-mobile.active {
    color: var(--primary-color);
    background-color: #fff7ed;
}

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

.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

html {
    scroll-behavior: smooth;
}

.mobile-menu {
    animation: slideDown 0.25s ease forwards;
}

/* TESTIMONIAL CARD */
.testimonial-card {
    transition: all 0.35s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px) scale(1.02);
}

/* Glow effect on hover */
.testimonial-card:hover .bg-white\/10 {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25),
                0 0 25px rgba(255, 255, 255, 0.1);
}

/* Smooth text */
.testimonial-card p {
    letter-spacing: 0.3px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}