/* --- Base & Background --- */
body {
    margin: 0;
    padding: 0;
    background: #0a0a0b url('fond.png') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(10, 10, 11, 0.2) 0%, rgba(10, 10, 11, 0.9) 100%);
    z-index: -1;
}

/* --- Navigation --- */
.nav-custom {
    background-color: rgba(45, 52, 54, 0.85);
    backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tapor-red { color: #D9241E !important; }
.tapor-blue { color: #2e5bff !important; }
.tapor-orange { color: #F2A800 !important; }

.nav-pill {
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}
.nav-pill:hover { background: white; color: black !important; transform: translateY(-2px); }

/* --- Animations --- */
@keyframes rocketSpin {
    0% { transform: translate(-80px, -80px) rotate(-540deg) scale(0); opacity: 0; }
    100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}
.logo-intro { animation: rocketSpin 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes slideInLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* --- Cyber Cards (Design image_5c4e22) --- */
.cyber-card {
    background: rgba(13, 17, 23, 0.9);
    border: 1px solid rgba(0, 242, 255, 0.4);
    border-radius: 1.5rem;
    padding: 3.5rem 2rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
}

.cyber-card:hover {
    border-color: #00f2ff;
    box-shadow: 0 0 40px rgba(0, 242, 255, 0.3);
    transform: translateY(-10px);
}

.card-title {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.card-subtitle {
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
}

.card-left { animation: slideInLeft 1s forwards; }
.card-right { animation: slideInRight 1s forwards; animation-delay: 0.1s; }

/* --- SEO & Utils --- */
strong { color: #00f2ff; font-weight: 600; }

.mini-link {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}
.mini-link:hover { border-color: #00f2ff; background: rgba(255, 255, 255, 0.06); }

@media (max-width: 768px) {
    .cyber-card { animation: none; transform: none !important; }
}