/* =========================================================
   ORACLE CONGO LOGISTIQUE — Corporate Design System (Navy & Red)
   ========================================================= */

:root {
    --navy-100: #c9d6f5;
    --navy-300: #6c8de0;
    --navy-400: #3860c9;
    --navy-500: #1a3a8f;
    --navy-600: #0f2463;
    --red-300: #ff8a8a;
    --red-400: #f6323b;
    --red-500: #e2151f;
    --red-600: #a80f17;
    --dark-950: #04060d;
    --dark-900: #080c18;
    --dark-800: #0d1324;
    --dark-700: #141c36;
}

* { scroll-behavior: smooth; }

html, body {
    background-color: var(--dark-950);
    color: #e5e8f0;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', serif;
}

::selection { background: var(--red-500); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--dark-950); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--navy-600), var(--navy-400)); border-radius: 10px; }

/* ---------- Preloader ---------- */
#preloader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--dark-950);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease, visibility .6s ease;
}
#preloader.loaded { opacity: 0; visibility: hidden; }
#preloader img { width: 90px; animation: pulseGlow 1.6s ease-in-out infinite; }
@keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(226,21,31,.4)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 24px rgba(226,21,31,.85)); transform: scale(1.06); }
}

/* ---------- Brand text / gradients ---------- */
.text-navy-300\/70 { color: rgba(108, 141, 224, .7); }
.text-gradient-brand {
    background: linear-gradient(100deg, #ff8a8a, #e2151f 35%, #a80f17 55%, #ff8a8a 80%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

.bg-brand-radial {
    background: radial-gradient(circle at 30% 20%, rgba(56,96,201,.22), transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(226,21,31,.12), transparent 50%);
}

/* ---------- Navbar ---------- */
#navbar { background: transparent; top: 2.5rem; transition: top .4s ease, background .3s ease; }
body.announce-closed #navbar { top: 0; }
#navbar.scrolled {
    background: rgba(4,6,13,.9);
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 30px rgba(0,0,0,.4);
    border-bottom: 1px solid rgba(56,96,201,.18);
}
.nav-link {
    position: relative; color: #d6dcee; transition: color .3s ease;
}
.nav-link::after {
    content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--red-500), var(--navy-300));
    transition: width .35s ease;
}
.nav-link:hover, .nav-link.active { color: var(--navy-300); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.mobile-menu {
    max-height: 0; overflow: hidden; background: rgba(4,6,13,.98);
    backdrop-filter: blur(16px); transition: max-height .5s ease;
    border-top: 1px solid rgba(56,96,201,.15);
}
.mobile-menu.open { max-height: 480px; }
.nav-link-mobile { color: #e5e8f0; transition: color .3s; }
.nav-link-mobile:hover { color: var(--navy-300); }

/* ---------- Announcement bar ---------- */
#announceBar { animation: announceIn .5s ease; }
@keyframes announceIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.announce-marquee {
    display: flex; width: max-content;
    animation: announceMarquee 12s linear infinite;
}
@keyframes announceMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Buttons ---------- */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .9rem 2.1rem; border-radius: 999px; font-weight: 600; letter-spacing: .02em;
    background: linear-gradient(120deg, var(--red-400), var(--red-600));
    color: #fff; position: relative; overflow: hidden; z-index: 1;
    box-shadow: 0 10px 30px -8px rgba(226,21,31,.55);
    transition: transform .35s ease, box-shadow .35s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(226,21,31,.75); }
.btn-primary::before {
    content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-120%); transition: transform .7s ease; z-index: -1;
}
.btn-primary:hover::before { transform: translateX(120%); }

.btn-outline {
    padding: .7rem 1.6rem; border-radius: 999px; border: 1px solid rgba(108,141,224,.5);
    color: #d6dcee; font-size: .85rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    transition: all .35s ease;
}
.btn-outline:hover { background: var(--navy-400); color: #fff; border-color: var(--navy-400); box-shadow: 0 8px 24px -6px rgba(56,96,201,.6); }

/* ---------- Section helpers ---------- */
.section-tag {
    display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .3em;
    text-transform: uppercase; color: var(--navy-300); font-weight: 600;
}
.section-tag::before { content: ''; width: 30px; height: 1px; background: var(--red-500); }

/* ---------- Hero ---------- */
.hero-bg {
    background: linear-gradient(180deg, rgba(4,6,13,.6) 0%, rgba(4,6,13,.8) 55%, var(--dark-950) 100%),
                url('../img/stade-isiro-2.jpeg');
    background-size: cover; background-position: center 65%;
}
.hero-particles span {
    position: absolute; border-radius: 50%; background: var(--navy-300); opacity: .35;
    animation: floatUp linear infinite;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: .5; }
    100% { transform: translateY(-120vh) scale(1.4); opacity: 0; }
}

.scroll-indicator {
    width: 26px; height: 42px; border: 2px solid rgba(108,141,224,.5); border-radius: 20px;
}
.scroll-indicator::before {
    content: ''; display: block; width: 4px; height: 8px; margin: 6px auto 0; border-radius: 4px;
    background: var(--red-500); animation: scrollDot 1.8s ease infinite;
}
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 0; } 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- Cards ---------- */
.glass-card {
    background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border: 1px solid rgba(56,96,201,.18);
    backdrop-filter: blur(6px);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease;
}
.glass-card:hover {
    transform: translateY(-10px);
    border-color: rgba(56,96,201,.55);
    box-shadow: 0 25px 60px -20px rgba(56,96,201,.35);
}

.service-icon {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, rgba(56,96,201,.2), rgba(56,96,201,.04));
    border: 1px solid rgba(56,96,201,.35);
    font-size: 1.6rem; color: var(--navy-300);
    transition: transform .4s ease, background .4s ease;
}
.glass-card:hover .service-icon { transform: rotate(-8deg) scale(1.08); background: var(--navy-400); color: #fff; }

.value-card i { transition: transform .4s ease; }
.value-card:hover i { transform: scale(1.2) rotate(6deg); color: var(--navy-300); }

/* accordion */
.acc-item { border-bottom: 1px solid rgba(255,255,255,.08); }
.acc-header { cursor: pointer; }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.acc-icon { transition: transform .35s ease; }
.acc-item.open .acc-panel { max-height: 400px; }
.acc-item.open .acc-icon { transform: rotate(45deg); color: var(--red-500); }

/* ---------- Counters ---------- */
.counter-value { font-family: 'Playfair Display', serif; }

/* ---------- Gallery / Swiper ---------- */
.swiper-slide img { border-radius: 18px; }
.swiper-button-next, .swiper-button-prev { color: var(--navy-300) !important; }
.swiper-pagination-bullet { background: var(--navy-300) !important; opacity: .5; }
.swiper-pagination-bullet-active { opacity: 1; background: var(--red-500) !important; }

/* ---------- Timeline (partners) ---------- */
.partner-card { position: relative; }
.partner-card .avatar-ring {
    width: 84px; height: 84px; border-radius: 50%;
    background: conic-gradient(var(--red-500), var(--navy-400) 70%);
    padding: 3px;
}
.partner-card .avatar-inner {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--dark-800); display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--navy-300);
}

/* ---------- Footer ---------- */
.social-icon {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(56,96,201,.35);
    display: flex; align-items: center; justify-content: center; color: var(--navy-300);
    transition: all .35s ease;
}
.social-icon:hover { background: var(--red-500); border-color: var(--red-500); color: #fff; transform: translateY(-4px); }
.footer-link { transition: color .3s ease, padding-left .3s ease; }
.footer-link:hover { color: var(--navy-300); padding-left: 6px; }

/* ---------- Back to top ---------- */
#backToTop {
    position: fixed; right: 26px; bottom: 26px; z-index: 60;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(145deg, var(--red-400), var(--red-600));
    color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px -8px rgba(226,21,31,.6);
    opacity: 0; visibility: hidden; transform: translateY(15px);
    transition: all .4s ease;
}
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { transform: translateY(-4px) scale(1.05); }

/* ---------- CTA band ---------- */
.cta-band {
    background: linear-gradient(115deg, #080c18 0%, #0f1730 50%, #080c18 100%);
    border-top: 1px solid rgba(56,96,201,.25);
    border-bottom: 1px solid rgba(56,96,201,.25);
    position: relative; overflow: hidden;
}
.cta-band::before {
    content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(226,21,31,.16), transparent 70%);
    top: -220px; right: -150px;
}

/* Marquee for domains */
.marquee-track {
    display: flex; width: max-content;
    animation: marquee 28s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Utility reveal fallback (in case AOS JS delayed) */
[data-aos] { will-change: transform, opacity; }