body { font-family: inherit !important; }
.hero-gradient {
    background: linear-gradient(135deg, var(--bg-grad-start, #020617) 0%, var(--bg-grad-end, #0f172a) 100%);
}
.text-accent { color: var(--accent, #3b82f6); }
.bg-accent { background-color: var(--accent, #3b82f6); }
.hover-bg-accent:hover { background-color: var(--accent-hover, #2563eb); }

body { background-color: var(--body-bg); color: var(--body-text); transition: background .3s, color .3s; }
.bg-white { background-color: var(--body-bg) !important; }
.bg-slate-50, .bg-slate-900, .bg-slate-950 { background-color: var(--card-bg) !important; }
.text-slate-900 { color: var(--body-text) !important; }
.text-slate-500, .text-slate-400 { color: color-mix(in srgb, var(--body-text), transparent 40%) !important; }
.border-slate-100, .border-slate-800 { border-color: var(--border) !important; }
.shadow-sm, .shadow-md, .shadow-xl { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
html[data-mode="dark"] .shadow-sm, html[data-mode="dark"] .shadow-md, html[data-mode="dark"] .shadow-xl { box-shadow: none; border: 1px solid var(--border); }

/* Standard nav select styling */
.nav-select {
    appearance: none;
    background: rgba(255,255,255,0.05); color: white;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    padding: 5px 28px 5px 10px; font-size: .8rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    transition: all .2s;
}
.nav-select:focus { outline: none; border-color: var(--accent); }

html[data-mode="light"] .nav-select {
    background: rgba(0,0,0,0.05); color: var(--body-text);
    border: 1px solid rgba(0,0,0,0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000'/%3E%3C/svg%3E");
}

.group:hover .group-hover\:bg-accent {
    background-color: var(--accent) !important;
}

.group:hover .group-hover\:text-white {
    color: #ffffff !important;
}

/* ── PROJECT CARDS ENHANCEMENTS ────────────────────────────────────────── */
.projects-scroll {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding: 1rem 0 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    -webkit-overflow-scrolling: touch;
}

.projects-scroll::-webkit-scrollbar {
    height: 6px;
}

.projects-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.projects-scroll::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 10px;
}

.project-card {
    flex: 0 0 320px;
    min-width: 320px;
}

@media (max-width: 640px) {
    .project-card {
        flex: 0 0 280px;
        min-width: 280px;
    }
}

.group {
    perspective: 1000px;
}
.group:hover {
    z-index: 10;
}
.group img {
    transform: translateZ(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.group:hover img {
    transform: scale(1.08) rotate(1deg);
}

.project-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
}

/* ── CTA BUTTONS PULSE ─────────────────────────────────────────────────── */
@keyframes pulse-accent {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 57, 115, 165), 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb, 57, 115, 165), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 57, 115, 165), 0); }
}

.btn-primary {
    animation: pulse-accent 2s infinite;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

#feedback {
    position: relative;
}

.form-fold {
    animation: foldPaper 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    transform-origin: bottom right !important;
    pointer-events: none;
}

@keyframes foldPaper {
    0% { transform: scale(1) rotate(0deg) skew(0deg) !important; opacity: 1; }
    100% { transform: scale(0) rotate(45deg) skew(20deg) !important; opacity: 0; }
}

.big-airplane-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 50;
    overflow: visible;
}

.big-airplane {
    font-size: 7rem;
    color: var(--accent);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
    opacity: 0;
}

.big-airplane-fly {
    animation: bigFly 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bigFly {
    0% { transform: translate(-100px, 100px) rotate(0deg) scale(0.5); opacity: 0; }
    30% { transform: translate(0, 0) rotate(-15deg) scale(1.2); opacity: 1; }
    100% { transform: translate(400px, -400px) rotate(-45deg) scale(0.8); opacity: 0; }
}

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

.checkmark-pop {
    animation: checkPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes checkPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}