/* ============================================
   ZYDEV SPACE THEME - Futuristic Digital Agency
   Brand Colors: #2c73a9, #07edfd, #4bb6be
   Logo BG: #18264c | Text: White
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Exo+2:wght@300;400;500;600;700&display=swap');

:root {
    /* Static brand colors (don't change with theme) */
    --zy-primary: #2c73a9;
    --zy-cyan: #07edfd;
    --zy-teal: #4bb6be;
    --zy-dark: #18264c;
    --zy-gradient: linear-gradient(135deg, #07edfd 0%, #2c73a9 50%, #4bb6be 100%);
    --zy-gradient-reverse: linear-gradient(135deg, #4bb6be 0%, #2c73a9 50%, #07edfd 100%);
    --zy-font-heading: 'Orbitron', sans-serif;
    --zy-font-body: 'Exo 2', sans-serif;
}

/* ===== DARK THEME (default) ===== */
[data-theme="dark"] {
    --zy-bg-body: #060d1f;
    --zy-bg-section: #060d1f;
    --zy-bg-section-alt: #0a1128;
    --zy-bg-card: rgba(24, 38, 76, 0.5);
    --zy-bg-header: rgba(24, 38, 76, 0.85);
    --zy-bg-header-sticky: rgba(10, 17, 40, 0.95);
    --zy-bg-topbar: rgba(10, 17, 40, 0.9);
    --zy-bg-input: rgba(24, 38, 76, 0.5);
    --zy-bg-footer: #060d1f;
    --zy-text-primary: #ffffff;
    --zy-text-secondary: #c8d6e5;
    --zy-text-muted: #636e72;
    --zy-border: rgba(7, 237, 253, 0.15);
    --zy-border-hover: rgba(7, 237, 253, 0.3);
    --zy-shadow: rgba(0, 0, 0, 0.3);
    --zy-card-shadow: rgba(7, 237, 253, 0.1);
    --zy-overlay: rgba(10, 15, 36, 0.6);
    --zy-glow: 0 0 20px rgba(7, 237, 253, 0.3);
    --zy-section-gradient: linear-gradient(180deg, #060d1f 0%, #0a1128 50%, #060d1f 100%);
    --zy-cyan-accent: #07edfd;
    --zy-btn-text: #18264c;

    /* ProzenHTML Variable Overrides */
    --ht-body: #060d1f;
    --ht-black: #060d1f;
    --ht-white: #fff;
    --ht-heading-color: #ffffff;
    --ht-text-color: #c8d6e5;
    --ht-theme-color: #18264c;
    --ht-theme-color-2: #07edfd;
    --ht-theme-color-3: #2c73a9;
    --ht-theme-color-4: #0a1128;
    --ht-theme-color-5: #060d1f;
    --ht-theme-color-6: #4bb6be;
    --ht-border-color: rgba(7, 237, 253, 0.15);
    --ht-border-color-2: rgba(7, 237, 253, 0.1);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    --zy-bg-body: #f0f4f8;
    --zy-bg-section: #ffffff;
    --zy-bg-section-alt: #f0f4f8;
    --zy-bg-card: rgba(255, 255, 255, 0.9);
    --zy-bg-header: rgba(255, 255, 255, 0.95);
    --zy-bg-header-sticky: rgba(255, 255, 255, 0.98);
    --zy-bg-topbar: rgba(240, 244, 248, 0.95);
    --zy-bg-input: rgba(255, 255, 255, 0.9);
    --zy-bg-footer: #1a2744;
    --zy-text-primary: #2d3436;
    --zy-text-secondary: #636e72;
    --zy-text-muted: #95a5a6;
    --zy-border: rgba(44, 115, 169, 0.15);
    --zy-border-hover: rgba(44, 115, 169, 0.3);
    --zy-shadow: rgba(0, 0, 0, 0.08);
    --zy-card-shadow: rgba(44, 115, 169, 0.1);
    --zy-overlay: rgba(255, 255, 255, 0.6);
    --zy-glow: 0 0 20px rgba(44, 115, 169, 0.15);
    --zy-section-gradient: linear-gradient(180deg, #ffffff 0%, #f0f4f8 50%, #ffffff 100%);
    --zy-cyan-accent: #2c73a9;
    --zy-btn-text: #ffffff;

    /* ProzenHTML Variable Overrides for Light */
    --ht-body: #f0f4f8;
    --ht-black: #2d3436;
    --ht-white: #fff;
    --ht-heading-color: #2d3436;
    --ht-text-color: #636e72;
    --ht-theme-color: #2c73a9;
    --ht-theme-color-2: #2c73a9;
    --ht-theme-color-3: #2c73a9;
    --ht-theme-color-4: #f0f4f8;
    --ht-theme-color-5: #ffffff;
    --ht-theme-color-6: #4bb6be;
    --ht-border-color: rgba(44, 115, 169, 0.15);
    --ht-border-color-2: rgba(44, 115, 169, 0.1);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Override ProzenHTML body */
body.body-color {
    font-family: var(--zy-font-body);
    color: var(--zy-text-primary);
    background: var(--zy-bg-body) !important;
    overflow-x: hidden;
}

/* ============ PROZENHTML HEADER SPACE OVERRIDES ============ */
.ht-header-area .ht-top-header {
    background: var(--zy-bg-topbar);
    border-bottom: 1px solid var(--zy-border);
}
.ht-header-area .ht-top-header .left p,
.ht-header-area .ht-top-header .right li,
.ht-header-area .ht-top-header .right li a {
    color: var(--zy-text-secondary);
    font-family: var(--zy-font-body);
    font-size: 13px;
}
.ht-header-area .ht-top-header .right li a:hover {
    color: var(--zy-cyan);
}

.ht-header-area .ht-main-header.header-1 {
    /* background: var(--zy-bg-header); */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.4s ease;
}
.ht-header-area .ht-main-header.header-1 .ht-menu-wrapper {
    background: transparent;
    border-radius: 0;
    margin-top: 0;
}
.ht-header-area .ht-main-header.header-1.sticky {
    background: var(--zy-bg-header-sticky);
    box-shadow: 0 5px 30px var(--zy-shadow);
}
.ht-header-area .ht-main-header .ht-menu-main ul li > a {
    color: var(--zy-text-primary);
    font-family: var(--zy-font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    transition: all 0.3s ease;
}
.ht-header-area .ht-main-header .ht-menu-main ul li > a:hover,
.ht-header-area .ht-main-header .ht-menu-main ul li.active > a {
    color: var(--zy-cyan);
}
/* The "▼" dropdown caret is a ::after pseudo-element with text content, so it
   must NOT get a background — that paints a gradient chip behind the arrow. */
.ht-header-area .ht-main-header .ht-menu-main ul li.has-dropdown > a::after {
    background: none;
    opacity: 0.7;
    transition: transform 0.35s ease, opacity 0.3s ease;
}
.ht-header-area .ht-main-header .ht-menu-main ul li.has-dropdown:hover > a::after {
    opacity: 1;
}

/* ---- Desktop dropdown (.sub-menu) ----
   Same geometry/animation as the Prozen theme, repainted with the space palette. */
.ht-header-area .ht-main-header .ht-menu-main ul li > .sub-menu {
    /* Opaque: the header's own backdrop-filter creates a backdrop root, so a
       translucent panel here would just show the hero straight through. */
    background: var(--zy-bg-section-alt);
    border: 1px solid var(--zy-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    z-index: 999;
}
.ht-header-area .ht-main-header .ht-menu-main ul li > .sub-menu li a {
    padding: 8px 22px;
    font-family: var(--zy-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--zy-text-secondary);
    white-space: nowrap;
}
.ht-header-area .ht-main-header .ht-menu-main ul li > .sub-menu li a:hover {
    color: var(--zy-cyan);
    background: rgba(7, 237, 253, 0.08);
    border-left-color: var(--zy-cyan);
}

/* Separator between the overview links and the individual service pages */
.ht-header-area .ht-main-header .ht-menu-main ul li > .sub-menu li.submenu-divider {
    height: 0;
    margin: 6px 0;
    border-top: 1px solid var(--zy-border);
}

/* ---- Offcanvas dropdown (cloned by prozen-main.js) ---- */
.ht-offcanvas-menu ul li .sub-menu li.submenu-divider,
.ht-offcanvas-menu ul li .ht-menu-close {
    display: none;
}
.ht-offcanvas-menu ul li .sub-menu li > a {
    color: var(--zy-text-secondary);
    font-size: 14px;
    text-transform: none;
}
.ht-offcanvas-menu ul li .sub-menu li > a:hover {
    color: var(--zy-cyan);
}
.ht-offcanvas-menu ul li.has-dropdown > a {
    cursor: pointer;
}
.ht-offcanvas-menu ul li.has-dropdown > a::after {
    content: "\f107"; /* fa-angle-down */
    font-family: "Font Awesome 7 Free", "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    font-size: 13px;
    transition: transform 0.3s ease;
}
.ht-offcanvas-menu ul li.has-dropdown.active > a::after {
    transform: rotate(180deg);
}

/* Header CTA Button */
.ht-header-area .ht-btn {
    background: var(--zy-gradient);
    color: var(--zy-dark);
    font-family: var(--zy-font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    border-radius: 50px;
    padding: 12px 24px;
}
.ht-header-area .ht-btn:hover {
    box-shadow: 0 0 30px rgba(7, 237, 253, 0.4);
    color: var(--zy-dark);
}
.ht-header-area .ht-btn::before {
    display: none;
}

/* Mobile menu toggle */
.ht-header-area .ht-menu-btn {
    color: var(--zy-cyan);
    font-size: 24px;
}

/* ============ PROZENHTML OFFCANVAS SPACE OVERRIDES ============ */
.ht-offcanvas {
    background: var(--zy-bg-section-alt);
    border-left: 1px solid var(--zy-border);
}
.ht-offcanvas-header button i {
    color: var(--zy-cyan);
}
.ht-offcanvas-menu ul li > a {
    color: var(--zy-text-primary);
    border-bottom-color: var(--zy-border);
    font-family: var(--zy-font-body);
}
.ht-offcanvas-menu ul li > a:hover,
.ht-offcanvas-menu ul li.active > a {
    color: var(--zy-cyan);
}
.ht-offcanvas-content__title {
    color: var(--zy-text-primary);
    font-family: var(--zy-font-heading);
}
.ht-offcanvas-content p {
    color: var(--zy-text-secondary);
}
.ht-offcanvas__title {
    color: var(--zy-cyan);
    font-family: var(--zy-font-heading);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.ht-offcanvas-info span,
.ht-offcanvas-info span a {
    color: var(--zy-text-secondary);
}
.ht-offcanvas-info span a:hover {
    color: var(--zy-cyan);
}
.ht-offcanvas-social a {
    color: var(--zy-text-secondary);
    width: 40px;
    height: 40px;
    border: 1px solid rgba(7, 237, 253, 0.2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.ht-offcanvas-social a:hover {
    background: var(--zy-cyan);
    color: var(--zy-dark);
    border-color: var(--zy-cyan);
}
.ht-offcanvas-overlay {
    background: var(--zy-overlay);
}

/* ============ PROZENHTML FOOTER SPACE OVERRIDES ============ */
.ht-footer-area {
    background: var(--zy-bg-footer) !important;
    border-top: 1px solid var(--zy-border);
}
.ht-footer-top-left p.desc {
    color: var(--zy-text-secondary);
    font-family: var(--zy-font-body);
    font-size: 15px;
}
.ht-footer-top-right .footer-social li {
    background: rgba(7, 237, 253, 0.08);
    border: 1px solid var(--zy-border);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.ht-footer-top-right .footer-social li:hover {
    background: var(--zy-cyan) !important;
    border-color: var(--zy-cyan);
}
.ht-footer-top-right .footer-social li:hover a {
    color: var(--zy-dark);
}
.ht-footer-widget-wrapper {
    border-top-color: var(--zy-border);
}
.ht-footer-widget-items .head {
    color: var(--zy-text-primary);
    font-family: var(--zy-font-heading);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ht-footer-widget-items .link-list li > a {
    color: var(--zy-text-secondary);
    font-family: var(--zy-font-body);
    font-size: 14px;
}
.ht-footer-widget-items .link-list li > a:hover {
    color: var(--zy-cyan);
    padding-left: 5px;
}
.ht-footer-copyright {
    border-top-color: var(--zy-border);
}
.ht-footer-copyright p {
    color: var(--zy-text-secondary);
    font-family: var(--zy-font-body);
}
.ht-footer-copyright p span {
    color: var(--zy-cyan);
}

/* ============ FOOTER TOP ACCENT ============ */
.ht-footer-area {
    position: relative;
}
/* Gradient accent line at the very top of the footer */
.ht-footer-area::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--zy-cyan), transparent);
    opacity: 0.6;
}

/* ============ PROZENHTML PRELOADER SPACE OVERRIDE ============ */
#preloader {
    background: var(--zy-bg-body) !important;
}
#preloader .loader {
    color: var(--zy-cyan) !important;
}

/* ============ BACK TO TOP SPACE OVERRIDE ============ */
.back-to-top {
    background: rgba(24, 38, 76, 0.8) !important;
    border: 2px solid var(--zy-cyan) !important;
    color: var(--zy-cyan) !important;
    backdrop-filter: blur(10px);
}
.back-to-top:hover {
    background: var(--zy-cyan) !important;
    color: var(--zy-dark) !important;
    box-shadow: var(--zy-glow);
}

/* ============ MOUSE CURSOR SPACE OVERRIDE ============ */
.mouse-cursor.cursor-outer {
    border-color: var(--zy-cyan);
}
.mouse-cursor.cursor-inner {
    background: var(--zy-cyan);
}
.mouse-cursor.cursor-hover.cursor-outer {
    border-color: var(--zy-teal);
    background: rgba(7, 237, 253, 0.1);
}

/* Restore cursor on touch devices */
@media (hover: none) {
    body.body-color { cursor: auto; }
    .mouse-cursor, #cursorParticles { display: none !important; }
}

::selection {
    background: var(--zy-cyan);
    color: var(--zy-dark);
}

/* ============ STAR CANVAS BACKGROUND ============ */
#starsCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ============ CURSOR PARTICLES CANVAS ============ */
#cursorParticles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 99996;
}

/* ============ BUTTONS ============ */
.zy-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-family: var(--zy-font-body);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    border: none;
    cursor: none;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.zy-btn-primary {
    background: var(--zy-gradient);
    color: var(--zy-dark);
}
.zy-btn-primary:hover {
    box-shadow: 0 0 30px rgba(7, 237, 253, 0.4);
    transform: translateY(-2px);
    color: var(--zy-dark);
}

.zy-btn-outline {
    background: transparent;
    border: 2px solid var(--zy-cyan);
    color: var(--zy-cyan);
}
.zy-btn-outline:hover {
    background: var(--zy-cyan);
    color: var(--zy-dark);
    box-shadow: var(--zy-glow);
}

.zy-btn-dark {
    background: var(--zy-dark);
    color: #ffffff;
}
.zy-btn-dark:hover {
    background: var(--zy-primary);
    box-shadow: 0 0 20px rgba(44, 115, 169, 0.4);
    color: #ffffff;
}

.zy-btn-glow {
    background: var(--zy-gradient);
    color: var(--zy-dark);
    animation: btn-glow-pulse 2s ease-in-out infinite;
}

.zy-btn-lg { padding: 16px 36px; font-size: 15px; }

@keyframes btn-glow-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(7, 237, 253, 0.3); }
    50% { box-shadow: 0 0 25px rgba(7, 237, 253, 0.5); }
}

/* ============ HERO SECTION ============ */
.zy-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 160px;
}

.zy-hero-video-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.zy-hero-video {
    width: 100%; height: 100%;
    object-fit: cover;
}

.zy-hero-video-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(
        180deg,
        rgba(6, 13, 31, 0.7) 0%,
        rgba(24, 38, 76, 0.6) 50%,
        rgba(6, 13, 31, 0.9) 100%
    );
}

/* Floating Planets */
.zy-hero-planets {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
}

.zy-planet {
    position: absolute;
    border-radius: 50%;
    filter: brightness(0.8);
    animation: float-planet 8s ease-in-out infinite;
    /* Les <img> portent width/height en attributs (reservation d'espace, evite
       le decalage de mise en page). Sans height:auto, cet attribut ecrase la
       hauteur et etire la planete. */
    height: auto;
}

.zy-planet-1 {
    width: 120px;
    top: 15%; right: 10%;
    animation-delay: 0s;
    animation-duration: 10s;
}

.zy-planet-2 {
    width: 80px;
    bottom: 20%; left: 5%;
    animation-delay: -3s;
    animation-duration: 12s;
}

.zy-planet-3 {
    width: 60px;
    top: 40%; right: 25%;
    animation-delay: -5s;
    animation-duration: 9s;
}

@keyframes float-planet {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(-10px) rotate(-3deg); }
    75% { transform: translateY(-25px) rotate(2deg); }
}

.zy-hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
}

.zy-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 237, 253, 0.1);
    border: 1px solid rgba(7, 237, 253, 0.3);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: var(--zy-cyan);
    margin-bottom: 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.zy-hero-title {
    font-family: var(--zy-font-heading);
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--zy-text-primary);
}

.zy-typed-wrap {
    /* display: inline-block; */
    min-width: 300px;
}

#zyTyped { color: var(--zy-cyan); }

.typed-cursor {
    color: var(--zy-cyan) !important;
    font-size: 60px;
    animation: blink 0.7s infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.zy-gradient-text {
    background: var(--zy-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.zy-hero-desc {
    font-size: 18px;
    line-height: 1.8;
    color: var(--zy-text-secondary);
    margin-bottom: 30px;
    font-weight: 300;
}

.zy-hero-btns {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.zy-hero-stats {
    display: flex;
    gap: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--zy-border);
}

.zy-hero-stat h3 {
    font-family: var(--zy-font-heading);
    font-size: 28px;
    color: var(--zy-cyan);
    margin-bottom: 5px;
}

.zy-hero-stat p {
    font-size: 13px;
    color: var(--zy-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Scroll Indicator */
.zy-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    text-align: center;
    animation: bounce 2s ease-in-out infinite;
}

.zy-scroll-mouse {
    width: 26px; height: 40px;
    border: 2px solid rgba(7, 237, 253, 0.5);
    border-radius: 15px;
    margin: 0 auto 10px;
    position: relative;
}

.zy-scroll-wheel {
    width: 4px; height: 8px;
    background: var(--zy-cyan);
    border-radius: 2px;
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 1.5s ease-in-out infinite;
}

.zy-scroll-indicator span {
    font-size: 11px;
    color: rgba(7, 237, 253, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes scroll-wheel {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(15px); }
}

/* ============ SECTIONS ============ */
.zy-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    z-index: 1;
    background: var(--zy-section-gradient);
}

.zy-section-alt {
    background: var(--zy-bg-section-alt);
}

.zy-section-badge {
    display: inline-block;
    background: rgba(7, 237, 253, 0.1);
    border: 1px solid rgba(7, 237, 253, 0.3);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: var(--zy-cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.zy-section-title {
    font-family: var(--zy-font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zy-text-primary);
    margin-bottom: 20px;
}

.zy-section-desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--zy-text-secondary);
    font-weight: 300;
}

/* Section Planet Decorations */
.zy-section-planet-decor {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

.zy-floating-planet {
    position: absolute;
    border-radius: 50%;
    opacity: 0.4;
    animation: float-planet 15s ease-in-out infinite;
    /* Voir .zy-planet : la hauteur doit rester proportionnelle a la largeur CSS. */
    height: auto;
}

.fp-right { width: 150px; top: 10%; right: -30px; animation-delay: -2s; }
.fp-left { width: 120px; top: 20%; left: -30px; animation-delay: -5s; }
.fp-right-sm { width: 80px; bottom: 15%; right: 5%; animation-delay: -8s; }
.fp-left-lg { width: 200px; top: 5%; left: -60px; animation-delay: -3s; }
.fp-right-lg { width: 180px; bottom: 5%; right: -50px; animation-delay: -7s; }

/* ============ ABOUT SECTION ============ */
.zy-about-img-wrap {
    position: relative;
    display: inline-block;
}

.zy-about-img {
    border-radius: 20px;
    max-width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.zy-about-experience {
    position: absolute;
    bottom: -20px;
     right: -2px;
    background: var(--zy-gradient);
    padding: 20px 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(7, 237, 253, 0.3);
}

.zy-about-experience h3 {
    font-family: var(--zy-font-heading);
    font-size: 32px;
    color: var(--zy-dark);
    margin-bottom: 0;
}

.zy-about-experience p {
    font-size: 12px;
    color: var(--zy-dark);
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
}

.zy-about-features { margin: 30px 0; }

.zy-about-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.zy-about-feature-icon {
    width: 50px; height: 50px;
    background: rgba(44, 115, 169, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zy-primary);
    font-size: 20px;
    flex-shrink: 0;
}

.zy-about-feature h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--zy-dark);
    margin-bottom: 3px;
}

.zy-about-feature p {
    font-size: 13px;
    color: var(--zy-text-muted);
    margin: 0;
}

/* ============ SERVICE CARDS ============ */
.zy-service-card {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    backdrop-filter: blur(10px);
}

.zy-service-card:hover {
    border-color: var(--zy-border-hover);
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(7, 237, 253, 0.1);
}

.zy-service-card .zy-service-glow {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(7, 237, 253, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.zy-service-card:hover .zy-service-glow { opacity: 1; }

.zy-service-icon {
    width: 70px; height: 70px;
    background: var(--zy-gradient);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--zy-dark);
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.zy-service-card:hover .zy-service-icon {
    box-shadow: 0 0 30px rgba(7, 237, 253, 0.4);
    transform: scale(1.1);
}

.zy-service-card h4 {
    font-family: var(--zy-font-heading);
    font-size: 18px;
    color: var(--zy-text-primary);
    margin-bottom: 15px;
    font-weight: 600;
}

.zy-service-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--zy-text-secondary);
    margin: 0;
}

/* ============ STATS ============ */
.zy-stats-section { padding: 80px 0; }

.zy-stats-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.zy-stat-item {
    text-align: center;
    padding: 30px 20px;
    border-radius: 20px;
    background: var(--zy-bg-card);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.zy-stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(44, 115, 169, 0.15);
}

.zy-stat-icon {
    font-size: 30px;
    color: var(--zy-primary);
    margin-bottom: 15px;
}

.zy-stat-item h2 {
    font-family: var(--zy-font-heading);
    font-size: 36px;
    color: var(--zy-dark);
    margin-bottom: 5px;
}

.zy-stat-item p {
    font-size: 14px;
    color: var(--zy-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* ============ PORTFOLIO ============ */
.zy-portfolio-card {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    /* La carte est passee de <div> a <a> pour rendre le lien client cliquable :
       sans display:block un <a> reste inline et la grille s'effondre. */
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.zy-portfolio-card:focus-visible {
    outline: 2px solid var(--zy-cyan);
    outline-offset: 3px;
}

/* Affordance visible : le survol ne doit pas etre le seul indice qu'on peut cliquer. */
.zy-portfolio-visit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--zy-cyan);
    opacity: .75;
    transition: opacity .3s ease, gap .3s ease;
}
.zy-portfolio-card:hover .zy-portfolio-visit,
.zy-portfolio-card:focus-visible .zy-portfolio-visit {
    opacity: 1;
    gap: 11px;
}

.zy-portfolio-card:hover {
    border-color: var(--zy-border-hover);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px var(--zy-card-shadow);
}

.zy-portfolio-img {
    height: 220px;
    overflow: hidden;
}

.zy-portfolio-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.zy-portfolio-card:hover .zy-portfolio-img img { transform: scale(1.05); }

.zy-portfolio-info { padding: 25px; }

.zy-portfolio-tag {
    display: inline-block;
    background: rgba(7, 237, 253, 0.1);
    color: var(--zy-cyan);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.zy-portfolio-info h4 {
    font-family: var(--zy-font-heading);
    font-size: 16px;
    color: var(--zy-text-primary);
    margin-bottom: 8px;
}

.zy-portfolio-info p {
    font-size: 13px;
    color: var(--zy-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.zy-portfolio-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.zy-portfolio-prev, .zy-portfolio-next {
    width: 50px; height: 50px;
    border: 2px solid var(--zy-border-hover);
    background: var(--zy-bg-card);
    color: var(--zy-cyan);
    border-radius: 50%;
    font-size: 16px;
    cursor: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zy-portfolio-prev:hover, .zy-portfolio-next:hover {
    background: var(--zy-cyan);
    color: var(--zy-dark);
    box-shadow: var(--zy-glow);
}

/* ============ INDUSTRY CARDS (futuristic image covers) ============ */
.zy-industry-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 220px;
    padding: 24px 18px;
    border-radius: 18px;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
    /* Fallback gradient shows even before the photo loads / if it is missing */
    background:
        linear-gradient(160deg, rgba(7, 237, 253, 0.12), rgba(6, 13, 31, 0.2)),
        var(--zy-industry-fallback, linear-gradient(160deg, #0a1836, #060d1f));
    border: 1px solid rgba(7, 237, 253, 0.18);
    box-shadow: 0 10px 30px rgba(6, 13, 31, 0.35);
    transition: transform 0.45s cubic-bezier(.2,.7,.3,1), box-shadow 0.45s ease, border-color 0.45s ease;
}

/* Photographic background layer */
.zy-industry-card__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    filter: saturate(1.05) contrast(1.02);
    transition: transform 0.6s cubic-bezier(.2,.7,.3,1), filter 0.6s ease;
}

/* Dark brand overlay so text stays readable and it reads as "ZYDEV futuristic" */
.zy-industry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(6, 13, 31, 0.15) 0%,
        rgba(6, 13, 31, 0.55) 55%,
        rgba(6, 13, 31, 0.9) 100%
    );
    transition: background 0.45s ease;
}

/* Animated cyan glow sweep on hover */
.zy-industry-card::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    z-index: -1;
    background: radial-gradient(circle at center, rgba(7, 237, 253, 0.25), transparent 45%);
    opacity: 0;
    transform: translate(20%, 20%);
    transition: opacity 0.5s ease, transform 0.6s ease;
    pointer-events: none;
}

.zy-industry-card:hover {
    transform: translateY(-10px);
    border-color: rgba(7, 237, 253, 0.7);
    box-shadow: 0 20px 55px rgba(7, 237, 253, 0.22), 0 8px 24px rgba(6, 13, 31, 0.5);
}

.zy-industry-card:hover .zy-industry-card__bg {
    transform: scale(1.15);
    filter: saturate(1.2) contrast(1.06);
}

.zy-industry-card:hover::before {
    background: linear-gradient(
        180deg,
        rgba(7, 237, 253, 0.12) 0%,
        rgba(6, 13, 31, 0.5) 55%,
        rgba(6, 13, 31, 0.92) 100%
    );
}

.zy-industry-card:hover::after {
    opacity: 1;
    transform: translate(-10%, -10%);
}

.zy-industry-card i {
    font-size: 34px;
    color: var(--zy-cyan);
    margin-bottom: 12px;
    filter: drop-shadow(0 0 10px rgba(7, 237, 253, 0.6));
    transition: transform 0.4s ease;
}

.zy-industry-card:hover i {
    transform: translateY(-4px) scale(1.12);
}

.zy-industry-card h5 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Thin glowing accent line under the label */
.zy-industry-card h5::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--zy-cyan), transparent);
    transition: width 0.45s ease;
}

.zy-industry-card:hover h5::after {
    width: 60%;
}

/* ============ PROCESS ============ */
.zy-process-wrapper { position: relative; }

.zy-process-line {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--zy-cyan) 20%, var(--zy-primary) 50%, var(--zy-teal) 80%, transparent 100%);
    opacity: 0.3;
    display: none;
}

@media (min-width: 992px) { .zy-process-line { display: block; } }

.zy-process-card {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    transition: all 0.4s ease;
    height: 100%;
    backdrop-filter: blur(10px);
}

.zy-process-card:hover {
    border-color: var(--zy-border-hover);
    transform: translateY(-10px);
    box-shadow: 0 20px 50px var(--zy-card-shadow);
}

.zy-process-number {
    font-family: var(--zy-font-heading);
    font-size: 42px;
    font-weight: 800;
    background: var(--zy-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
}

.zy-process-card h4 {
    font-family: var(--zy-font-heading);
    font-size: 16px;
    color: var(--zy-text-primary);
    margin-bottom: 12px;
}

.zy-process-card p {
    font-size: 14px;
    color: var(--zy-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============ PARTNERS ============ */
.zy-partner-item {
    background: var(--zy-bg-card);
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    padding: 18px 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.zy-partner-item span {
    font-size: 13px;
    font-weight: 600;
    /* color: var(--zy-dark); */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.zy-partner-item:hover {
    border-color: var(--zy-primary);
    box-shadow: 0 5px 20px rgba(44, 115, 169, 0.1);
}

/* The client artwork in assets/clients/ is already a finished card (600x336),
   so this wrapper stays chrome-free — no border, no background, no grayscale. */
.zy-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.zy-logo-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 336;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.zy-logo-item:hover {
    transform: translateY(-4px);
}

.zy-logo-item:hover img {
    opacity: 1;
}

/* ---- Strategic partners rail ----
   The partner logos in assets/partners/trimmed/ are pure white uniform plates, so
   they merge into ONE continuous white surface instead of reading as four cards.
   Keep the rail pure #fff: any other colour would reveal each plate as a box. */
.zy-logo-rail {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(7, 237, 253, 0.10),
                0 0 60px rgba(7, 237, 253, 0.07);
    overflow: hidden;
}

.zy-logo-rail-static {
    padding: 22px 26px;
}

@media (max-width: 767px) {
    .zy-logo-rail { border-radius: 18px; }
    .zy-logo-rail-static { padding: 16px 14px; }
}

/* ============ CTA ============ */
.zy-cta-wrapper {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 30px;
    padding: 80px 60px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.zy-cta-wrapper::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(7, 237, 253, 0.03) 0%, transparent 50%);
}

.zy-highlight { color: var(--zy-cyan); font-weight: 600; }

/* ============ CONTACT PAGE ============ */
.zy-contact-section { padding-top: 160px; }

.zy-contact-form {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

.zy-form-group { margin-bottom: 20px; }

.zy-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--zy-text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.zy-form-control {
    width: 100%;
    padding: 14px 18px;
    background: var(--zy-bg-input);
    border: 1px solid var(--zy-border);
    border-radius: 12px;
    color: var(--zy-text-primary);
    font-family: var(--zy-font-body);
    font-size: 14px;
    transition: all 0.3s ease;
    outline: none;
}

.zy-form-control:focus {
    border-color: var(--zy-cyan);
    box-shadow: 0 0 15px rgba(7, 237, 253, 0.1);
}

.zy-form-control::placeholder { color: rgba(200, 214, 229, 0.4); }

textarea.zy-form-control { resize: vertical; min-height: 120px; }

.zy-contact-info-card {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.zy-contact-info-card:hover {
    border-color: var(--zy-border-hover);
    transform: translateY(-5px);
}

.zy-contact-info-card i {
    font-size: 28px;
    color: var(--zy-cyan);
    margin-bottom: 15px;
    display: block;
}

.zy-contact-info-card h5 {
    font-family: var(--zy-font-heading);
    font-size: 14px;
    color: var(--zy-text-primary);
    margin-bottom: 8px;
}

.zy-contact-info-card p {
    font-size: 14px;
    color: var(--zy-text-secondary);
    margin: 0;
}

.zy-contact-info-card a { color: var(--zy-text-secondary); }
.zy-contact-info-card a:hover { color: var(--zy-cyan); }

/* Nice Select Override for Contact Form */
.zy-contact-form .nice-select,
.zy-contact-section .nice-select {
    background: var(--zy-bg-input);
    border: 1px solid var(--zy-border);
    border-radius: 12px;
    color: var(--zy-text-primary);
    font-family: var(--zy-font-body);
    font-size: 14px;
    padding: 14px 18px;
    height: auto;
    line-height: 1.5;
    width: 100%;
}
.zy-contact-form .nice-select:hover,
.zy-contact-section .nice-select:hover {
    border-color: var(--zy-border-hover);
}
.zy-contact-form .nice-select:focus,
.zy-contact-form .nice-select.open,
.zy-contact-section .nice-select:focus,
.zy-contact-section .nice-select.open {
    border-color: var(--zy-cyan);
    box-shadow: 0 0 15px rgba(7, 237, 253, 0.1);
}
.zy-contact-form .nice-select .list,
.zy-contact-section .nice-select .list {
    background: var(--zy-bg-section-alt);
    border: 1px solid var(--zy-border);
    border-radius: 12px;
    width: 100%;
}
.zy-contact-form .nice-select .option,
.zy-contact-section .nice-select .option {
    color: var(--zy-text-secondary);
    font-size: 14px;
}
.zy-contact-form .nice-select .option:hover,
.zy-contact-form .nice-select .option.focus,
.zy-contact-section .nice-select .option:hover,
.zy-contact-section .nice-select .option.focus {
    background: rgba(7, 237, 253, 0.1);
    color: var(--zy-cyan);
}
.zy-contact-form .nice-select .option.selected,
.zy-contact-section .nice-select .option.selected {
    color: var(--zy-cyan);
    font-weight: 600;
}
.zy-contact-form .nice-select::after,
.zy-contact-section .nice-select::after {
    border-color: var(--zy-cyan);
}
.zy-contact-form .nice-select .current,
.zy-contact-section .nice-select .current {
    color: var(--zy-text-secondary);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
    .zy-hero-title { font-size: 48px; }
    .zy-section-title { font-size: 34px; }
}

@media (max-width: 991px) {
    .zy-hero { padding-top: 100px; }
    .zy-hero-title { font-size: 38px; }
    .zy-section-title { font-size: 30px; }
    .zy-hero-stats { gap: 25px; }
    .zy-stats-wrapper { grid-template-columns: repeat(2, 1fr); }
    .zy-cta-wrapper { padding: 50px 30px; }
    .zy-section { padding: 80px 0; }
}

@media (max-width: 767px) {
    .zy-hero-title { font-size: 30px; }
    .zy-section-title { font-size: 26px; }
    .zy-hero-stats { flex-direction: column; gap: 15px; }
    .zy-stats-wrapper { grid-template-columns: 1fr 1fr; gap: 15px; }
    .zy-hero-btns { flex-direction: column; }
    .zy-hero-btns .zy-btn { width: 100%; justify-content: center; }
    .zy-floating-planet { display: none; }
    .zy-hero-planets .zy-planet { opacity: 0.3; }
}

@media (max-width: 480px) {
    .zy-hero-title { font-size: 26px; }
    .zy-section-title { font-size: 22px; }
    .zy-service-card { padding: 30px 20px; }
}

/* ============ GSAP SCROLL ANIMATIONS ============ */
.gs-reveal {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}

.gs-reveal.revealed {
    opacity: 1;
    visibility: visible;
}

/* ============ SECTION TRANSITION EFFECT ============ */
.zy-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(7, 237, 253, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(44, 115, 169, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Star sparkle effect for sections */
.zy-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 45% 45%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.3), transparent);
    pointer-events: none;
    z-index: -1;
}

/* ============ LANGUAGE DROPDOWN (FLAGS) ============ */
.zy-lang-dropdown {
    position: relative;
    margin-right: 15px;
}

.zy-lang-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.zy-lang-trigger:hover {
    border-color: var(--zy-border-hover);
    color: var(--zy-text-primary);
}

.zy-lang-trigger i {
    font-size: 14px;
}

.zy-lang-flag-img {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.zy-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--zy-dark);
    border: 1px solid var(--zy-border);
    border-radius: 10px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transform-origin: top right;
    transition: all 0.25s ease;
    z-index: 999;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.zy-lang-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.zy-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.zy-lang-option:hover {
    background: rgba(7, 237, 253, 0.08);
    color: var(--zy-text-primary);
}

.zy-lang-option.active {
    background: rgba(7, 237, 253, 0.12);
    color: var(--zy-cyan);
}

/* Offcanvas language list */
.zy-lang-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zy-lang-list .zy-lang-option {
    padding: 10px 14px;
    border-radius: 8px;
}

.zy-lang-list .zy-lang-flag-img {
    width: 26px;
    height: 18px;
}

/* ============ PAGE HEADER / BREADCRUMB ============ */
.zy-page-header {
    position: relative;
    padding: 180px 0 80px;
    overflow: hidden;
    z-index: 1;
}
.zy-page-header-planets {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
.zy-page-header-planets .zy-planet-1 {
    position: absolute;
    width: 100px;
    top: 20%; right: 8%;
    opacity: 0.5;
    animation: float-planet 10s ease-in-out infinite;
}
.zy-page-header-planets .zy-planet-2 {
    position: absolute;
    width: 70px;
    bottom: 15%; left: 5%;
    opacity: 0.4;
    animation: float-planet 12s ease-in-out infinite;
    animation-delay: -4s;
}
.zy-page-header-content {
    position: relative;
    z-index: 2;
}
.zy-page-header-title {
    font-family: var(--zy-font-heading);
    font-size: 48px;
    font-weight: 700;
    color: var(--zy-text-primary);
    margin-bottom: 15px;
}
.zy-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.zy-breadcrumb li {
    font-size: 14px;
    color: var(--zy-text-secondary);
    font-family: var(--zy-font-body);
}
.zy-breadcrumb li a {
    color: var(--zy-text-secondary);
    transition: color 0.3s ease;
}
.zy-breadcrumb li a:hover { color: var(--zy-cyan); }
.zy-breadcrumb li i { font-size: 10px; color: var(--zy-cyan); }
.zy-breadcrumb li.active { color: var(--zy-cyan); font-weight: 600; }

@media (max-width: 991px) {
    .zy-page-header { padding: 140px 0 60px; }
    .zy-page-header-title { font-size: 34px; }
}
@media (max-width: 767px) {
    .zy-page-header { padding: 120px 0 50px; }
    .zy-page-header-title { font-size: 28px; }
}

/* ============ FAQ ACCORDION ============ */
.zy-faq-item {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.zy-faq-item:hover {
    border-color: var(--zy-border-hover);
}
.zy-faq-question {
    padding: 22px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--zy-font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--zy-text-primary);
    transition: all 0.3s ease;
}
.zy-faq-question i {
    font-size: 14px;
    color: var(--zy-cyan);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 15px;
}
.zy-faq-item.active .zy-faq-question i {
    transform: rotate(180deg);
}
.zy-faq-answer {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.zy-faq-item.active .zy-faq-answer {
    padding: 0 25px 22px;
    max-height: 500px;
}
.zy-faq-answer p {
    color: var(--zy-text-secondary);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}
.zy-faq-item.active {
    border-color: var(--zy-border-hover);
    box-shadow: 0 5px 30px rgba(7, 237, 253, 0.05);
}

/* ============ PORTFOLIO TABS ============ */
.zy-portfolio-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.zy-portfolio-tab {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 50px;
    padding: 10px 28px;
    color: var(--zy-text-secondary);
    font-family: var(--zy-font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.zy-portfolio-tab.active,
.zy-portfolio-tab:hover {
    background: rgba(7, 237, 253, 0.1);
    border-color: var(--zy-cyan);
    color: var(--zy-cyan);
    box-shadow: 0 0 20px rgba(7, 237, 253, 0.1);
}
.zy-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.zy-portfolio-item {
    transition: all 0.4s ease;
}
.zy-portfolio-item.hidden {
    display: none;
}

@media (max-width: 991px) {
    .zy-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .zy-portfolio-grid { grid-template-columns: 1fr; }
}

/* ============ SAAS SHOWCASE CARD ============ */
.zy-saas-card {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
}
.zy-saas-card:hover {
    border-color: var(--zy-border-hover);
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(7, 237, 253, 0.1);
}
.zy-saas-card-img {
    position: relative;
    height: 250px;
    overflow: hidden;
}
.zy-saas-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.zy-saas-card:hover .zy-saas-card-img img { transform: scale(1.05); }
.zy-saas-card-body { padding: 30px; }
.zy-saas-card-body h3 {
    font-family: var(--zy-font-heading);
    font-size: 20px;
    color: var(--zy-text-primary);
    margin-bottom: 12px;
}
.zy-saas-card-body p {
    color: var(--zy-text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.zy-saas-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zy-saas-features li {
    background: rgba(7, 237, 253, 0.08);
    border: 1px solid var(--zy-border);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    color: var(--zy-cyan);
    font-weight: 500;
}
.zy-tech-stack {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.zy-tech-badge {
    background: rgba(44, 115, 169, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--zy-teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============ SIMULATEUR / DEVIS ============ */
.zy-simulateur-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
}
.zy-simulateur-wrapper {
    max-width: 700px;
    margin: 0 auto;
}
.zy-simulateur-progress {
    max-width: 600px;
    margin: 0 auto 50px;
}
.zy-progress-track {
    height: 4px;
    background: rgba(7, 237, 253, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}
.zy-progress-fill {
    height: 100%;
    background: var(--zy-gradient);
    border-radius: 2px;
    transition: width 0.5s ease;
    width: 0%;
}
.zy-progress-label {
    text-align: center;
    font-size: 13px;
    color: var(--zy-text-secondary);
    font-weight: 500;
}

.zy-step {
    display: none;
    animation: stepFadeIn 0.4s ease;
}
.zy-step.active { display: block; }

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

.zy-step-title {
    font-family: var(--zy-font-heading);
    font-size: 24px;
    color: var(--zy-text-primary);
    margin-bottom: 10px;
    text-align: center;
}
.zy-step-subtitle {
    font-size: 15px;
    color: var(--zy-text-secondary);
    margin-bottom: 30px;
    text-align: center;
}

.zy-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}
@media (max-width: 767px) {
    .zy-options-grid { grid-template-columns: 1fr; }
}

.zy-option-card {
    background: var(--zy-bg-card);
    border: 2px solid var(--zy-border);
    border-radius: 16px;
    padding: 20px 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}
.zy-option-card:hover {
    border-color: var(--zy-border-hover);
    background: rgba(7, 237, 253, 0.03);
}
.zy-option-card.selected {
    border-color: var(--zy-cyan);
    background: rgba(7, 237, 253, 0.08);
    box-shadow: 0 0 25px rgba(7, 237, 253, 0.12);
}
.zy-option-card i {
    font-size: 28px;
    color: var(--zy-cyan);
    margin-bottom: 10px;
    display: block;
}
.zy-option-card h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--zy-text-primary);
    margin: 0;
}
.zy-option-card p {
    font-size: 13px;
    color: var(--zy-text-secondary);
    margin: 5px 0 0;
}
.zy-option-card .zy-check {
    display: none;
    position: absolute;
    top: 10px; right: 10px;
    color: var(--zy-cyan);
    font-size: 16px;
}
.zy-option-card.selected .zy-check { display: block; }

/* Multi-select checkbox style */
.zy-option-card.multi-select {
    position: relative;
}
.zy-option-card.multi-select::before {
    content: '';
    position: absolute;
    top: 12px; right: 12px;
    width: 20px; height: 20px;
    border: 2px solid rgba(7, 237, 253, 0.3);
    border-radius: 5px;
    transition: all 0.3s ease;
}
.zy-option-card.multi-select.selected::before {
    background: var(--zy-cyan);
    border-color: var(--zy-cyan);
}
.zy-option-card.multi-select.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 13px; right: 15px;
    font-size: 12px;
    color: var(--zy-dark);
}

.zy-simulateur-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Summary step */
.zy-summary-section {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
}
.zy-summary-section h4 {
    font-family: var(--zy-font-heading);
    font-size: 14px;
    color: var(--zy-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.zy-summary-section p {
    color: var(--zy-text-secondary);
    font-size: 15px;
    margin: 0;
}
.zy-summary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zy-summary-tag {
    background: rgba(7, 237, 253, 0.1);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    color: var(--zy-cyan);
}

/* ============ LOTTIE ANIMATIONS ============ */
.zy-lottie-container {
    max-width: 400px;
    margin: 0 auto;
}
.zy-service-lottie {
    width: 250px;
    height: 250px;
    margin: 0 auto 25px;
}
.zy-hero-lottie {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 450px;
    opacity: 0.7;
    z-index: 2;
}
@media (max-width: 991px) {
    .zy-hero-lottie { display: none; }
}

/* ============ ABOUT PAGE ============ */
.zy-about-story {
    position: relative;
}
.zy-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.zy-value-card {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}
.zy-value-card:hover {
    border-color: var(--zy-border-hover);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(7, 237, 253, 0.08);
}
.zy-value-card i {
    font-size: 36px;
    color: var(--zy-cyan);
    margin-bottom: 18px;
    display: block;
}
.zy-value-card h4 {
    font-family: var(--zy-font-heading);
    font-size: 16px;
    color: var(--zy-text-primary);
    margin-bottom: 10px;
}
.zy-value-card p {
    font-size: 14px;
    color: var(--zy-text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .zy-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .zy-values-grid { grid-template-columns: 1fr; }
}

/* ============ SERVICE DETAIL CARD ============ */
.zy-service-detail {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}
.zy-service-detail:nth-child(even) {
    flex-direction: row-reverse;
}
.zy-service-detail-content {
    flex: 1;
}
.zy-service-detail-lottie {
    flex: 0 0 300px;
}
.zy-service-detail h3 {
    font-family: var(--zy-font-heading);
    font-size: 24px;
    color: var(--zy-text-primary);
    margin-bottom: 15px;
}
.zy-service-detail p {
    color: var(--zy-text-secondary);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
}
.zy-service-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.zy-service-features li {
    color: var(--zy-text-secondary);
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(7, 237, 253, 0.05);
    display: flex;
    align-items: center;
    gap: 10px;
}
.zy-service-features li i {
    color: var(--zy-cyan);
    font-size: 12px;
}

@media (max-width: 991px) {
    .zy-service-detail,
    .zy-service-detail:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }
    .zy-service-detail-lottie { flex: 0 0 auto; }
}

/* ============ NEW SIMULATEUR (zy-sim-*) ============ */
.zy-sim-progress { margin-bottom: 30px; }
.zy-sim-progress-bar {
    height: 4px;
    background: rgba(7, 237, 253, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}
.zy-sim-progress-fill {
    height: 100%;
    background: var(--zy-gradient);
    border-radius: 2px;
    transition: width 0.5s ease;
}
.zy-sim-progress-text {
    text-align: center;
    font-size: 13px;
    color: var(--zy-text-secondary);
    font-weight: 500;
}

.zy-sim-step {
    animation: stepFadeIn 0.4s ease;
}
.zy-sim-step-title {
    font-family: var(--zy-font-heading);
    font-size: 24px;
    color: var(--zy-text-primary);
    margin-bottom: 10px;
    text-align: center;
}
.zy-sim-step-subtitle {
    font-size: 15px;
    color: var(--zy-text-secondary);
    margin-bottom: 30px;
    text-align: center;
}

.zy-sim-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .zy-sim-options { grid-template-columns: 1fr; }
}

.zy-sim-option {
    background: var(--zy-bg-card);
    border: 2px solid var(--zy-border);
    border-radius: 16px;
    padding: 20px 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.zy-sim-option:hover {
    border-color: var(--zy-border-hover);
    background: rgba(7, 237, 253, 0.03);
}
.zy-sim-option.selected {
    border-color: var(--zy-cyan);
    background: rgba(7, 237, 253, 0.08);
    box-shadow: 0 0 25px rgba(7, 237, 253, 0.12);
}
.zy-sim-option > i:first-child {
    font-size: 22px;
    color: var(--zy-cyan);
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.zy-sim-option > span {
    font-size: 15px;
    font-weight: 600;
    color: var(--zy-text-primary);
    flex: 1;
}
.zy-sim-check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--zy-cyan);
    font-size: 14px;
}

.zy-sim-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.zy-sim-validation {
    margin-top: 15px;
    padding: 12px 18px;
    background: rgba(255, 71, 87, 0.1);
    border: 1px solid rgba(255, 71, 87, 0.3);
    border-radius: 10px;
    color: #ff6b81;
    font-size: 14px;
    text-align: center;
    animation: stepFadeIn 0.3s ease;
}
.zy-sim-validation i { margin-right: 8px; }

.zy-sim-form .zy-form-group { margin-bottom: 20px; }

.zy-sim-summary-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 20px;
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 12px;
    margin-bottom: 12px;
}
.zy-sim-summary-label {
    font-family: var(--zy-font-heading);
    font-size: 12px;
    color: var(--zy-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 100px;
    flex-shrink: 0;
}
.zy-sim-summary-value {
    font-size: 14px;
    color: var(--zy-text-primary);
    flex: 1;
    line-height: 1.6;
}
.zy-sim-edit-btn {
    background: none;
    border: 1px solid rgba(7, 237, 253, 0.2);
    border-radius: 8px;
    color: var(--zy-cyan);
    font-size: 12px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.zy-sim-edit-btn:hover {
    background: rgba(7, 237, 253, 0.1);
    border-color: var(--zy-cyan);
}

.zy-sim-success {
    padding: 60px 30px;
    text-align: center;
}
.zy-sim-success h3 {
    font-family: var(--zy-font-heading);
    font-size: 28px;
    color: var(--zy-text-primary);
    margin-bottom: 15px;
}
.zy-sim-success p {
    color: var(--zy-text-secondary);
    font-size: 16px;
    margin-bottom: 20px;
}

/* ============ FAQ CATEGORY TITLES ============ */
.zy-faq-category-title {
    font-family: var(--zy-font-heading);
    font-size: 18px;
    color: var(--zy-cyan);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--zy-border);
}
.zy-faq-category-title i {
    margin-right: 10px;
    font-size: 16px;
}

/* ============ SAAS CARD ADDITIONS ============ */
.zy-saas-card-header {
    padding: 30px 30px 15px;
    border-bottom: 1px solid var(--zy-border);
}
.zy-saas-name {
    font-family: var(--zy-font-heading);
    font-size: 22px;
    color: var(--zy-text-primary);
    margin-bottom: 5px;
}
.zy-saas-tagline {
    font-size: 13px;
    color: var(--zy-teal);
    font-weight: 500;
}
.zy-saas-card-body {
    padding: 20px 30px;
}
.zy-saas-card-body p {
    color: var(--zy-text-secondary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
}
.zy-saas-card-footer {
    padding: 15px 30px 25px;
}
.zy-saas-card-footer .zy-saas-tech {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.zy-saas-features li i {
    color: var(--zy-cyan);
    margin-right: 8px;
    font-size: 12px;
}

/* ============ PORTFOLIO TAB BUTTONS ============ */
.zy-portfolio-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.zy-tab-btn {
    background: var(--zy-bg-card);
    border: 1px solid var(--zy-border);
    border-radius: 30px;
    padding: 10px 28px;
    color: var(--zy-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.zy-tab-btn:hover {
    border-color: var(--zy-border-hover);
    color: var(--zy-text-primary);
}
.zy-tab-btn.active {
    background: var(--zy-gradient);
    border-color: transparent;
    color: var(--zy-dark);
}

/* ============ PORTFOLIO SECTION TRANSITIONS ============ */
.zy-portfolio-section {
    transition: opacity 0.3s ease;
}

/* ============ STATS SPACE SECTION ============ */
.zy-stats-space-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

.zy-stats-space-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.zy-stats-space-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zy-stats-space-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 15, 36, 0.85) 0%,
        rgba(10, 15, 36, 0.6) 50%,
        rgba(10, 15, 36, 0.85) 100%
    );
}

.zy-stats-space-section .zy-section-badge,
.zy-stats-space-section .zy-section-title {
    color: var(--zy-text-primary);
}

.zy-stats-space-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.zy-stats-space-item {
    text-align: center;
    padding: 40px 25px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--zy-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.zy-stats-space-item:hover {
    transform: translateY(-8px);
    border-color: var(--zy-border-hover);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(7, 237, 253, 0.12);
}

.zy-stats-space-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--zy-gradient);
    font-size: 28px;
    color: var(--zy-dark);
}

.zy-stats-space-item h2 {
    font-family: var(--zy-font-heading);
    font-size: 42px;
    color: var(--zy-text-primary);
    margin-bottom: 8px;
    font-weight: 700;
}

.zy-stats-space-item p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    font-weight: 500;
}

/* ============ VIDEO OPENER SECTION ============ */
.zy-video-section {
    padding-bottom: 100px;
}

.zy-video-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(7, 237, 253, 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    aspect-ratio: 16 / 9;
    background: #000;
}

.zy-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zy-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 15, 36, 0.45);
    transition: opacity 0.4s ease;
    cursor: pointer;
    z-index: 2;
}

.zy-video-play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.zy-video-play-btn {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: none;
    background: var(--zy-gradient);
    color: var(--zy-dark);
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 40px rgba(7, 237, 253, 0.3);
    padding-left: 5px;
}

.zy-video-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 60px rgba(7, 237, 253, 0.5);
}

.zy-video-wrapper:hover {
    border-color: var(--zy-border-hover);
}

@media (max-width: 991px) {
    .zy-stats-space-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .zy-stats-space-section {
        padding: 80px 0;
    }
}

@media (max-width: 575px) {
    .zy-stats-space-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .zy-stats-space-item h2 {
        font-size: 34px;
    }
    .zy-video-play-btn {
        width: 70px;
        height: 70px;
        font-size: 26px;
    }
}

/* ============ LIGHT MODE OVERRIDES ============ */
[data-theme="light"] #starsCanvas,
[data-theme="light"] #cursorParticles {
    display: none;
}

[data-theme="light"] .zy-section::before,
[data-theme="light"] .zy-section::after,
.zy-section-alt::before,
.zy-section-alt::after {
    display: none;
}

[data-theme="light"] .zy-planet,
[data-theme="light"] .zy-floating-planet {
    opacity: 0.06;
    filter: grayscale(0.5) brightness(1.5);
}

[data-theme="light"] .zy-hero-video-overlay {
    background: linear-gradient(180deg, rgba(240,244,248,0.3) 0%, rgba(240,244,248,0.8) 100%);
}

[data-theme="light"] .zy-hero::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(44,115,169,0.08) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    z-index: 0;
    pointer-events: none;
}

[data-theme="light"] .zy-hero::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(75,182,190,0.08) 0%, transparent 70%);
    bottom: -50px;
    left: -100px;
    z-index: 0;
    pointer-events: none;
}

[data-theme="light"] .zy-stats-space-overlay {
    background: linear-gradient(180deg, rgba(240,244,248,0.85) 0%, rgba(240,244,248,0.6) 50%, rgba(240,244,248,0.85) 100%);
}

[data-theme="light"] .zy-stats-space-item {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(44, 115, 169, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .zy-stats-space-item h2 {
    color: var(--zy-dark);
}

[data-theme="light"] .zy-stats-space-item p {
    color: var(--zy-text-secondary);
}

[data-theme="light"] .zy-gradient-text {
    background: linear-gradient(135deg, #2c73a9, #4bb6be);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .zy-section-badge {
    background: rgba(44, 115, 169, 0.1);
    border-color: rgba(44, 115, 169, 0.2);
    color: var(--zy-primary);
}

[data-theme="light"] .zy-page-header {
    background: linear-gradient(180deg, #e8eef5 0%, #f0f4f8 100%);
}

[data-theme="light"] .zy-page-header-overlay {
    background: none;
}

[data-theme="light"] .zy-video-wrapper {
    border-color: rgba(44, 115, 169, 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .zy-video-play-overlay {
    background: rgba(240, 244, 248, 0.45);
}

[data-theme="light"] .zy-cta-section {
    background: var(--zy-bg-section-alt) !important;
}

/* Light mode card styles */
[data-theme="light"] .zy-service-card,
[data-theme="light"] .zy-portfolio-card,
[data-theme="light"] .zy-faq-item,
[data-theme="light"] .zy-process-card,
[data-theme="light"] .zy-value-card,
[data-theme="light"] .zy-saas-card {
    border-color: rgba(44, 115, 169, 0.12);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .zy-service-card:hover,
[data-theme="light"] .zy-portfolio-card:hover {
    box-shadow: 0 20px 50px rgba(44, 115, 169, 0.12);
    border-color: rgba(44, 115, 169, 0.25);
}

/* Light mode form inputs */
[data-theme="light"] .zy-contact-form .form-control {
    border-color: rgba(44, 115, 169, 0.2);
    color: #2d3436;
}

[data-theme="light"] .zy-contact-form .form-control::placeholder {
    color: #95a5a6;
}

[data-theme="light"] .zy-contact-form .form-control:focus {
    border-color: var(--zy-primary);
    box-shadow: 0 0 0 3px rgba(44, 115, 169, 0.1);
}

/* Light mode footer stays dark */
[data-theme="light"] .ht-footer-area {
    background: var(--zy-bg-footer) !important;
    color: #c8d6e5;
}

[data-theme="light"] .ht-footer-area .desc,
[data-theme="light"] .ht-footer-area .link-list li > a,
[data-theme="light"] .ht-footer-copyright p {
    color: #c8d6e5;
}

[data-theme="light"] .ht-footer-widget-items .head {
    color: #ffffff;
}

/* Theme toggle button */
.zy-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--zy-border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    color: var(--zy-text-secondary);
    transition: all 0.3s ease;
    margin-right: 10px;
    font-size: 15px;
}

.zy-theme-toggle:hover {
    border-color: var(--zy-border-hover);
    color: var(--zy-text-primary);
}

[data-theme="dark"] .zy-theme-icon-light { display: none; }
[data-theme="dark"] .zy-theme-icon-dark { display: inline; }
[data-theme="light"] .zy-theme-icon-dark { display: none; }
[data-theme="light"] .zy-theme-icon-light { display: inline; }

/* Logo swap per theme */
[data-theme="dark"] .zy-logo-light { display: none; }
[data-theme="dark"] .zy-logo-dark { display: inline; }
[data-theme="light"] .zy-logo-dark { display: none; }
[data-theme="light"] .zy-logo-light { display: inline; }

/* Smooth transition on theme switch */
body.body-color,
.ht-header-area .ht-main-header.header-1,
.ht-header-area .ht-top-header,
.zy-section,
.zy-section-alt,
.zy-service-card,
.zy-portfolio-card,
.zy-faq-item,
.zy-contact-form,
.zy-lang-menu,
.ht-footer-area {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================================================
   Bandeau defilant (marquee)

   Boucle sans JavaScript : la piste contient deux fois la meme liste et se
   deplace de -50%. Arrivee au bout, elle se retrouve exactement dans sa
   position de depart — la reprise est invisible.

   L'animation ne touche que transform : elle reste sur le compositeur et ne
   declenche ni recalcul de mise en page ni repeinture.
   ========================================================================== */
.zy-marquee {
    overflow: hidden;
    position: relative;
    z-index: 3;
    padding: 20px 0;
    margin: -8px 0;
    transform: rotate(var(--zy-marquee-tilt, -1.5deg)) scale(1.06);
    border-top: 1px solid rgba(255, 255, 255, .10);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.zy-marquee-track {
    display: flex;
    align-items: center;
    gap: 34px;
    white-space: nowrap;
    width: max-content;
    animation: zy-marquee-scroll var(--zy-marquee-speed, 40s) linear infinite;
    font-size: clamp(20px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

/* En RTL la piste doit partir de l'autre cote. */
.zy-marquee-track.is-rtl { animation-name: zy-marquee-scroll-rtl; }

@keyframes zy-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes zy-marquee-scroll-rtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.zy-marquee-dot { font-size: .38em; opacity: .55; }
.zy-marquee-item { display: inline-block; }

/* --- Variantes ------------------------------------------------------------ */
.zy-marquee--accent {
    background: var(--zy-gradient);
    color: #04121c;
}
.zy-marquee--accent .zy-marquee-dot { color: rgba(4, 18, 28, .45); }

.zy-marquee--dark {
    background: var(--zy-bg-card, #101728);
    color: #fff;
}
.zy-marquee--dark .zy-marquee-item {
    background: var(--zy-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Contour : le texte n'est que dessine, le fond de page reste visible. */
.zy-marquee--outline {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(7, 237, 253, .22);
    color: transparent;
}
.zy-marquee--outline .zy-marquee-item {
    -webkit-text-stroke: 1.5px var(--zy-cyan);
    opacity: .75;
}
.zy-marquee--outline .zy-marquee-dot { color: var(--zy-cyan, #07edfd); }

/* Le defilement est decoratif : on le stoppe pour qui demande moins d'animation. */
@media (prefers-reduced-motion: reduce) {
    .zy-marquee-track { animation: none; transform: none; }
    .zy-marquee { transform: none; }
}

@media (max-width: 575px) {
    .zy-marquee { padding: 14px 0; transform: rotate(var(--zy-marquee-tilt, -1.5deg)); }
    .zy-marquee-track { gap: 22px; }
}

/* Appel a l'action du menu mobile : le bouton d'en-tete etant masque sous 992 px,
   l'offcanvas porte sa propre version, pleine largeur pour rester atteignable
   au pouce. */
.ht-offcanvas-cta .zy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 22px;
    font-size: 15px;
    text-align: center;
}

/* Appel a l'action du menu mobile : pleine largeur pour rester atteignable au pouce. */
.ht-offcanvas-cta .zy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 22px;
    font-size: 15px;
}


/* ==========================================================================
   Mur d'ecrans 3D — rangees de captures floutees qui defilent en perspective.

   Le plan porteur est bascule dans l'espace (rotateX + rotateZ) : les rangees
   s'eloignent reellement du regard au lieu d'etre simplement inclinees. Meme
   mecanique de boucle que le bandeau defilant — chaque piste contient deux fois
   la meme serie et se deplace de -50%, donc la reprise est invisible.

   Seul transform est anime : rien ne declenche de recalcul de mise en page.

   Les tuiles sont floutees a la FABRICATION (tools/build-wall.php). Le detail
   n'existe pas dans le fichier envoye au navigateur — impossible de le
   recuperer en desactivant un filtre CSS.
   ========================================================================== */
.zy-wall3d {
    position: relative;
    overflow: hidden;
    min-height: var(--wall-height, 620px);
    perspective: 1200px;
    /* Fondu sur les quatre bords : le mur se dissout au lieu d'etre coupe net. */
    -webkit-mask-image: radial-gradient(115% 90% at 50% 50%, #000 40%, transparent 88%);
    mask-image: radial-gradient(115% 90% at 50% 50%, #000 40%, transparent 88%);
}

/* Plus large que le cadre : une fois pivote, les bords du plan sortent du champ
   et on ne voit jamais ou les rangees commencent ni ou elles s'arretent. */
/* Positionne puis centre par transform : un centrage par grille s'applique a la
   boite AVANT rotation, si bien que le plan bascule sortait du cadre par le bas.
   Ici le point d'ancrage est le centre du conteneur, et les rotations partent
   de la. */
.zy-wall3d-stage {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 165%;
    display: flex;
    flex-direction: column;
    gap: 22px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%)
               rotateX(var(--wall-pitch, 46deg))
               rotateZ(var(--wall-yaw, -14deg));
}

/* Hauteur fixe : sans elle, la rangee se dimensionne sur la plus haute tuile —
   une capture de site en 3:4 — et le plan 3D atteint plusieurs milliers de
   pixels. Les tuiles plus hautes sont alors simplement rognees par le bas. */
.zy-wall3d-row {
    overflow: hidden;
    height: var(--row-height, 190px);
}

.zy-wall3d-track {
    display: flex;
    gap: 22px;
    animation: zy-wall3d-scroll var(--row-speed, 40s) linear infinite;
}
/* Sens alternes : sans cela les rangees glissent a l'unisson et l'ensemble
   ressemble a une seule image qui derive. */
.zy-wall3d-row.is-reverse .zy-wall3d-track { animation-direction: reverse; }

@keyframes zy-wall3d-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Largeur ET hauteur fixes. Le plan porteur est en preserve-3d : si l'image
   pouvait dicter sa taille, sa dimension intrinseque serait reinjectee dans une
   mise en page deja transformee et la tuile atteindrait des milliers de pixels.
   On impose donc le cadre, et l'image s'y adapte.

   Les captures de site sont plus etroites que les ecrans d'application : a
   hauteur egale, c'est ce format portrait qui les fait lire comme des pages web. */
.zy-wall3d-tile {
    flex: none;
    width: var(--tile-width, 300px);
    height: var(--row-height, 190px);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    background: #0b1220;
}
.zy-wall3d-tile.is-site { --tile-width: 195px; }

.zy-wall3d-tile img {
    display: block;
    width: 100%;
    height: 100%;
    /* Ancre en haut : sur une capture de site, c'est l'en-tete qui identifie la
       page. Un cadrage centre couperait precisement cette partie. */
    object-fit: cover;
    object-position: top;
}

/* Le mur est decoratif : il s'arrete pour qui demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
    .zy-wall3d-track { animation: none; }
}

/* Sur petit ecran la perspective ecrase tout : on redresse le plan et on reduit
   les tuiles plutot que de masquer la section. */
@media (max-width: 767px) {
    .zy-wall3d {
        min-height: 400px;
        --row-height: 118px;
    }
    /* Le translate doit etre repete : redeclarer transform remplace la regle
       entiere, et sans lui le plan n'est plus centre. */
    .zy-wall3d-stage {
        width: 230%;
        gap: 14px;
        transform: translate(-50%, -50%) rotateX(34deg) rotateZ(-10deg);
    }
    .zy-wall3d-track { gap: 14px; }
    .zy-wall3d-tile { --tile-width: 186px; }
    .zy-wall3d-tile.is-site { --tile-width: 122px; }

    /* Le texte occupe presque toute la largeur et recouvre donc bien plus de
       tuiles qu'en grand ecran : le voile doit couvrir plus large pour rester
       lisible sur une capture claire. */
    .zy-wall3d-section::before {
        background: radial-gradient(92% 62% at 50% 46%,
                    rgba(6, 11, 22, .93) 0%,
                    rgba(6, 11, 22, .82) 48%,
                    rgba(6, 11, 22, .34) 82%,
                    rgba(6, 11, 22, 0) 100%);
    }
}

/* ==========================================================================
   Section qui accueille le mur 3D : le mur remplit le fond, le texte passe
   devant, un voile sombre garantit le contraste quelle que soit la tuile qui
   passe derriere a cet instant.
   ========================================================================== */
.zy-wall3d-section { position: relative; overflow: hidden; }

.zy-wall3d-section .zy-wall3d {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.zy-wall3d-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Concentre l'ombre derriere le texte et laisse les bords respirer : ici le
       mur est le sujet, pas une texture de fond. Un voile uniforme l'effacait. */
    background: radial-gradient(58% 46% at 50% 50%,
                rgba(6, 11, 22, .88) 0%,
                rgba(6, 11, 22, .70) 42%,
                rgba(6, 11, 22, .22) 78%,
                rgba(6, 11, 22, 0) 100%);
    pointer-events: none;
}

.zy-wall3d-section > .container { position: relative; z-index: 2; }