/* Homepage hero slider, built on the Zeinet main-slider-five rules:
   photo on the right (a square subject-centred crop so the product sits
   past the arrow tip), arrow panel with a dotted world map on the left,
   decorative glow/stripes/bars, and a moving light on the line accent.
   Height follows the viewport so the whole hero is visible at once. */
.zn-hero { position: relative; overflow: hidden; background-color: #012a3d; } /* same blue as the panel image, so its left edge never shows */
.zn-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1000ms ease, visibility 1000ms ease; }
.zn-hero__slide.is-active { position: relative; opacity: 1; visibility: visible; }

.zn-hero__bg {
    position: absolute; top: 0; right: 0;
    width: 52%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0;
    filter: blur(10px);
    transform: translateX(50%) scaleX(2);
    transition: transform 1000ms ease, opacity 1000ms ease, filter 1000ms ease;
}
.zn-hero__panel {
    position: absolute; top: 0; left: 0;
    width: 64.8%; height: 100%;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100%;
}
.zn-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); }

/* Shape one: warm glow and a thin wavy line, sliding in from the left. */
.zn-hero__glow {
    position: absolute; top: 0; left: 0;
    width: 64.8%; height: 100%;
    background: radial-gradient(circle at 18% 36%, rgba(235, 113, 29, 0.28) 0, rgba(235, 113, 29, 0) 34%);
    opacity: 0; visibility: hidden; transform: translateX(-200px);
    transition: transform 1000ms ease, opacity 1000ms ease;
}
.zn-hero__glow svg { position: absolute; top: 0; left: 0; width: 170px; height: auto; }
/* Shape two: two diagonal stripes dropping in at the top. */
.zn-hero__stripes {
    position: absolute; top: -5px; left: 25%;
    width: 250px; height: 200px;
    opacity: 0; visibility: hidden; transform: translateY(-200px);
    transition: transform 1000ms ease, opacity 1000ms ease;
}
.zn-hero__stripes::before,
.zn-hero__stripes::after { content: ''; position: absolute; top: 0; height: 100%; }
.zn-hero__stripes::before { left: 0; width: 120px; border-right: 1px solid rgba(255, 255, 255, 0.35); transform: skewX(34deg); transform-origin: top left; }
.zn-hero__stripes::after { left: 70px; width: 40px; height: 175px; background: rgba(255, 255, 255, 0.2); transform: skewX(34deg); transform-origin: top left; }
/* Shape three: translucent bars over the photo, gently floating. */
.zn-hero__bars {
    position: absolute; right: -30px; bottom: 0;
    width: 420px; height: 70%;
    opacity: 0; visibility: hidden;
    transition: opacity 1000ms ease;
    animation: znFloatX 2s linear infinite;
}
.zn-hero__bars::before,
.zn-hero__bars::after { content: ''; position: absolute; bottom: 0; height: 100%; transform: skewX(-34deg); transform-origin: bottom left; }
.zn-hero__bars::before { left: 60px; width: 140px; background: rgba(255, 255, 255, 0.12); height: 82%; }
.zn-hero__bars::after { left: 170px; width: 70px; background: rgba(255, 255, 255, 0.16); }
@keyframes znFloatX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }

.zn-hero__slide.is-active .zn-hero__bg { opacity: 1; transform: none; filter: blur(0); }
.zn-hero__slide.is-active .zn-hero__glow { opacity: 1; visibility: visible; transform: none; transition-delay: 500ms; }
.zn-hero__slide.is-active .zn-hero__stripes { opacity: 1; visibility: visible; transform: none; transition-delay: 600ms; }
.zn-hero__slide.is-active .zn-hero__bars { opacity: 1; visibility: visible; transition-delay: 600ms; }

.zn-hero .container { position: relative; z-index: 2; }
.zn-hero__content {
    display: flex; flex-direction: column; justify-content: center;
    min-height: clamp(600px, calc(100vh - 138px), 890px);
    max-width: 680px;
    padding: 90px 0 150px;
}
/* Line accent: a 180px bar with a 40px orange light running across it. */
.zn-hero__border { position: relative; width: 180px; height: 2px; margin: 0 0 22px; overflow: hidden; background-color: var(--white); }
.zn-hero__border::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 40px; height: 2px; margin: 0 auto; background-color: var(--primary); animation: znShapeMove 4s linear infinite; }
@keyframes znShapeMove { 0%, 100% { width: 40px; } 50% { width: 100%; } }
.zn-hero__title { margin: 0 0 16px; color: var(--white); font-size: 64px; font-weight: 700; line-height: 75px; letter-spacing: 0; }
.zn-hero__text { margin: 0 0 42px; color: rgba(255, 255, 255, 0.6); font-size: 21px; line-height: 32px; }
.zn-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }

.zn-hero__border, .zn-hero__title, .zn-hero__text, .zn-hero__btns { opacity: 0; visibility: hidden; transition: transform 2000ms ease, opacity 2000ms ease; }
.zn-hero__border { transform: translateY(-120px); }
.zn-hero__title { transform: translateX(-120px); }
.zn-hero__text { transform: translateX(120px); }
.zn-hero__btns { transform: translateY(120px); }
.zn-hero__slide.is-active .zn-hero__border,
.zn-hero__slide.is-active .zn-hero__title,
.zn-hero__slide.is-active .zn-hero__text,
.zn-hero__slide.is-active .zn-hero__btns { opacity: 1; visibility: visible; transform: none; }

/* Square dots with a soft halo on the active one. */
.zn-hero__dots { position: absolute; z-index: 5; left: 0; right: 0; bottom: 90px; }
.zn-hero__dots .container { display: flex; align-items: center; gap: 33px; }
.zn-hero__dot { position: relative; z-index: 1; width: 10px; height: 10px; padding: 0; border: 0; background-color: #36505f; transition: all 500ms ease; }
.zn-hero__dot::after { content: ''; position: absolute; z-index: -1; left: -10px; top: -10px; width: 30px; height: 30px; background-color: rgba(106, 109, 122, 0.23); opacity: 0; visibility: hidden; transform: scale(0.6); transition: all 500ms ease; }
.zn-hero__dot.is-active, .zn-hero__dot:hover { background-color: var(--primary); }
.zn-hero__dot.is-active::after, .zn-hero__dot:hover::after { opacity: 1; visibility: visible; transform: scale(1); }

@media (max-width: 1399px) { .zn-hero__panel { width: 75%; } .zn-hero__bg { width: 46%; } }
@media (max-width: 1199px) {
    .zn-hero__panel { width: 82%; }
    .zn-hero__glow, .zn-hero__stripes, .zn-hero__bars { display: none; }
    .zn-hero__title { font-size: 52px; line-height: 62px; }
}
/* Tablets and phones: photo on top so the product stays visible, copy below. */
@media (max-width: 991px) {
    .zn-hero__bg { width: 100%; height: 300px; }
    .zn-hero__panel { top: 300px; width: 100%; height: calc(100% - 300px); background-image: none !important; background-color: var(--navy); }
    .zn-hero__overlay { display: none; }
    .zn-hero__content { min-height: 0; padding: 350px 0 110px; }
    .zn-hero__text { font-size: 19px; line-height: 30px; }
    .zn-hero__dots { bottom: 45px; }
}
@media (max-width: 767px) {
    .zn-hero__bg { height: 240px; }
    .zn-hero__panel { top: 240px; height: calc(100% - 240px); }
    .zn-hero__content { padding: 280px 0 100px; }
    .zn-hero__title { font-size: 32px; line-height: 40px; }
    .zn-hero__text { font-size: 16px; line-height: 26px; margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .zn-hero *, .zn-hero *::after { transition: none !important; animation: none !important; }
}