/* ============================================================
   AIRSOFT SARL — FINAL POLISH LAYER
   Loaded last. Single source of truth for design corrections.
   Builds on the --af-* purple design system (design-fix.css).
   ============================================================ */

:root {
    --af-purple: #8A2BE2;
    --af-purple-light: #a855f7;
    --af-purple-dark: #6A1FB1;
    --af-bg-deep: #0b0418;
    --af-bg-body: #100627;
    --af-bg-section: #160a33;
    --af-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   1. HERO SLIDER — clean crossfade, zero ghosting
   Inactive slides fully hidden; only the active one shows.
   ============================================================ */
.hero-slider-1 .swiper-slide {
    opacity: 0 !important;
    transition: opacity 1.1s var(--af-ease) !important;
    pointer-events: none;
}
.hero-slider-1 .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    pointer-events: auto;
}

/* ============================================================
   2. HERO — legible, cinematic overlay over the screenshot bg
   ============================================================ */
.th-hero-wrapper.hero-1 .th-hero-bg::before,
.th-hero-wrapper.hero-1 .th-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Blur + dim the busy app-screenshot backgrounds into ambient texture */
.th-hero-wrapper.hero-1 .th-hero-bg {
    filter: blur(3px) brightness(0.9) saturate(1.05);
    transform: scale(1.08);
}
.th-hero-wrapper.hero-1 .th-hero-bg::after {
    background:
        radial-gradient(125% 125% at 12% 25%, rgba(138, 43, 226, 0.22) 0%, rgba(138, 43, 226, 0) 46%),
        linear-gradient(
            100deg,
            rgba(9, 3, 20, 0.97) 0%,
            rgba(12, 5, 28, 0.93) 50%,
            rgba(18, 8, 42, 0.90) 80%,
            rgba(24, 10, 54, 0.90) 100%
        );
}

/* ============================================================
   2b. HEADER — premium glass instead of flat bright purple
   ============================================================ */
/* The header element itself was a solid bright-purple block. Make the
   absolute (over-hero) header transparent; the sticky-wrapper provides glass. */
.th-header.header-absolute {
    background: transparent !important;
}
/* Decorative bright-purple panel behind the menu — clashes with glass header */
.th-header .menu-area::before,
.th-header .menu-area::after {
    display: none !important;
}
.th-header.header-absolute .header-top {
    background: rgba(9, 3, 20, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.th-header.header-absolute .sticky-wrapper {
    background: rgba(12, 5, 28, 0.30) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .35s var(--af-ease), box-shadow .35s var(--af-ease),
                backdrop-filter .35s var(--af-ease);
}
.sticky-wrapper.sticky {
    background: rgba(10, 4, 22, 0.86) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    border-bottom: 1px solid rgba(138, 43, 226, 0.28);
}
/* Nav links: crisp white with purple hover underline */
.th-header .main-menu ul li a {
    color: #fff !important;
    font-weight: 500;
    transition: color .25s ease;
}
.th-header .main-menu ul li a:hover,
.th-header .main-menu ul li.active > a {
    color: var(--af-purple-light) !important;
}
/* Header CTA button: on-brand purple gradient */
.th-header .header-button .th-btn,
.th-header .header-cta-btn {
    background: linear-gradient(135deg, var(--af-purple) 0%, var(--af-purple-dark) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 22px rgba(138, 43, 226, 0.40);
}
.th-header .header-button .th-btn:hover,
.th-header .header-cta-btn:hover {
    box-shadow: 0 10px 30px rgba(138, 43, 226, 0.55);
    transform: translateY(-2px);
}
/* subtle vignette top/bottom for depth */
.th-hero-wrapper.hero-1 .th-hero-bg::before {
    background: linear-gradient(
        180deg,
        rgba(11, 4, 24, 0.55) 0%,
        rgba(11, 4, 24, 0) 28%,
        rgba(11, 4, 24, 0) 62%,
        rgba(11, 4, 24, 0.85) 100%
    );
    z-index: 2;
}
.th-hero-wrapper.hero-1 .container {
    position: relative;
    z-index: 3;
}
.th-hero-wrapper.hero-1 .hero-style1 {
    position: relative;
    z-index: 3;
}

/* ============================================================
   4. CTA FINAL — was a broken flex row; make it a centered stack
   ============================================================ */
.cta-final .cta-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    gap: 1.4rem;
}
.cta-final .cta-content p {
    max-width: 640px;
    margin: 0 auto;
}

/* ============================================================
   5. STATS — refined depth + no number overflow
   ============================================================ */
.premium-stats .stat-counter {
    background: linear-gradient(150deg, rgba(138, 43, 226, 0.85) 0%, rgba(106, 31, 177, 0.92) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(74, 21, 128, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.premium-stats .counter-num,
.premium-stats .counter-suffix {
    font-size: clamp(2.1rem, 4vw, 3.2rem) !important;
    line-height: 1.05;
    white-space: nowrap;
}

/* ============================================================
   6. SECTION RHYTHM — consistent vertical spacing
   ============================================================ */
.premium-stats,
.products-grid,
.about-premium,
.services-premium,
.process-timeline,
.team-premium,
.testimonials-premium,
.faq-premium,
.contact-info-bar,
.cta-final {
    padding-top: clamp(70px, 8vw, 110px) !important;
    padding-bottom: clamp(70px, 8vw, 110px) !important;
}