.spn-slider-wrap { position: relative; width: 100%; overflow: hidden; background: #05080f; font-family: "Helvetica Neue", Arial, sans-serif; }
.spn-slider-track { display: flex; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.spn-slide { min-width: 100%; position: relative; height: clamp(320px, 55vw, 620px); }
.spn-slide-bg,
.spn-slide-bg-empty { position: absolute; inset: 0; width: 100%; height: 100%; }
.spn-slide-bg { object-fit: cover; opacity: .58; }
.spn-slide-bg-empty { background: radial-gradient(circle at 78% 18%, rgba(37,99,235,.24), transparent 34%), linear-gradient(135deg, #0a1220 0%, #10233e 100%); }
.spn-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,10,25,.94) 26%, rgba(5,10,25,.68) 52%, rgba(5,10,25,.28) 100%); }
.spn-slide-line { position: absolute; left: clamp(36px, 5vw, 72px); top: 10%; bottom: 10%; width: 3px; background: linear-gradient(to bottom, transparent 0%, #1d4ed8 50%, transparent 100%); }
.spn-slide-content { position: absolute; left: 20%; right: 20%; top: 50%; transform: translateY(-50%); }
.spn-slide-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(12px, 2vw, 18px); font-size: clamp(10px, 1.2vw, 13px); color: #dbe4f0; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.spn-slide-label::before { content: ""; width: 26px; height: 1px; background: rgba(255,255,255,.72); display: inline-block; }
.spn-slide-logo { width: 18px; height: 18px; object-fit: cover; border-radius: 999px; }
.spn-slide-title { font-size: clamp(24px, 3.8vw, 48px); font-weight: 800; color: #fff; line-height: 1.06; margin-bottom: clamp(18px, 3vw, 28px); max-width: min(100%, 24ch); text-wrap: balance; }
.spn-slide-btn { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.55); color: #fff !important; padding: clamp(8px,1.2vw,12px) clamp(16px,2.5vw,28px); font-size: clamp(11px, 1.1vw, 14px); font-weight: 700; text-decoration: none !important; letter-spacing: .12em; text-transform: uppercase; transition: background .25s, border-color .25s; }
.spn-slide-btn:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.spn-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; width: clamp(34px,4vw,44px); height: clamp(34px,4vw,44px); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; z-index: 10; font-size: 18px; user-select: none; }
.spn-nav:hover { background: rgba(255,255,255,.22); }
.spn-nav-prev { left: 14px; }
.spn-nav-next { right: 14px; }
.spn-dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 10; }
.spn-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; transition: background .25s, transform .25s; }
.spn-dot.active { background: #2563eb; transform: scale(1.25); }
@media (max-width: 900px) {
    .spn-slide-content { left: 16%; right: 16%; }
}
@media (max-width: 767px) {
    .spn-slide { height: 420px; }
    .spn-slide-line { left: 20px; }
    .spn-slide-content { left: 20%; right: 20%; }
    .spn-slide-title { max-width: 100%; font-size: clamp(24px, 9vw, 36px); }
    .spn-nav-prev { left: 10px; }
    .spn-nav-next { right: 10px; }
}