/* Hero Slider Pro – Frontend */
.hsp-root {
    position: relative; overflow: hidden;
    width: 100%; background: #0f172a;
    font-family: inherit;
}

/* ── Track ── */
.hsp-track { position: relative; width: 100%; }

/* ── Slide base ── */
.hsp-slide {
    position: absolute; inset: 0; width: 100%;
    display: flex; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity .7s ease, transform .7s ease;
}
.hsp-slide.hsp-cur {
    position: relative; opacity: 1; pointer-events: all;
}

/* Fade */
.hsp-trans-fade .hsp-slide              { opacity: 0; }
.hsp-trans-fade .hsp-slide.hsp-cur      { opacity: 1; }

/* Slide */
.hsp-trans-slide .hsp-track            { display: flex; }
.hsp-trans-slide .hsp-slide            { flex: 0 0 100%; position: relative; opacity: 1 !important; pointer-events: all; }

/* Zoom */
.hsp-trans-zoom .hsp-slide             { opacity: 0; transform: scale(1.04); }
.hsp-trans-zoom .hsp-slide.hsp-cur     { opacity: 1; transform: scale(1); }

/* ── BG image ── */
.hsp-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.hsp-overlay { position: absolute; inset: 0; }

/* ── Banner anchor (full-slide link) ── */
.hsp-banner-anchor {
    position: absolute; inset: 0; z-index: 1;
    display: block;
}

/* ── Content ── */
.hsp-content {
    position: relative; z-index: 2;
    max-width: 820px; padding: 48px 60px;
    width: 100%;
}
.hsp-title {
    font-size: clamp(26px, 5vw, 60px);
    font-weight: 800; color: #fff; margin: 0 0 14px;
    line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.3);
    animation: hsp-up .55s ease both;
}
.hsp-sub {
    font-size: clamp(14px, 2vw, 20px);
    color: rgba(255,255,255,.85); margin: 0 0 28px;
    line-height: 1.65;
    animation: hsp-up .55s .08s ease both;
}
.hsp-btns {
    display: flex; gap: 14px; flex-wrap: wrap;
    animation: hsp-up .55s .16s ease both;
}

/* ── Button base ── */
.hsp-btn {
    display: inline-flex; align-items: center;
    padding: 13px 30px; border-radius: 8px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: transform .2s, box-shadow .2s, opacity .2s;
    position: relative; z-index: 3; cursor: pointer;
    letter-spacing: .2px; line-height: 1;
}
.hsp-btn:hover { transform: translateY(-2px); opacity: .92; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

.hsp-btn-solid   { }
.hsp-btn-outline { background: transparent !important; border: 2px solid currentColor; }
.hsp-btn-pill    { border-radius: 100px !important; }
.hsp-btn-ghost   { background: rgba(255,255,255,.12) !important; backdrop-filter: blur(6px); }

/* ── Arrows ── */
.hsp-arrows { position: absolute; top: 50%; transform: translateY(-50%); inset-inline: 0; z-index: 10; pointer-events: none; }
.hsp-arr {
    position: absolute; pointer-events: all;
    width: 48px; height: 48px;
    background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.35);
    color: #fff; font-size: 18px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); transition: background .2s, transform .2s;
    top: 50%; transform: translateY(-50%);
}
.hsp-arr:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); }
.hsp-arr-prev { left: 18px; }
.hsp-arr-next { right: 18px; }

/* ── Dots ── */
.hsp-dots {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 10;
}
.hsp-dot {
    width: 9px; height: 9px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.4); cursor: pointer;
    transition: background .25s, transform .25s; padding: 0;
}
.hsp-dot.hsp-dot-on, .hsp-dot:hover { background: #fff; transform: scale(1.35); }

@keyframes hsp-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .hsp-content { padding: 30px 22px; }
    .hsp-btns    { gap: 10px; }
    .hsp-btn     { padding: 11px 20px; font-size: 14px; }
    .hsp-arr     { width: 38px; height: 38px; font-size: 14px; }
}