.fleet {position: relative; padding: 64px 0 120px; overflow: hidden; background: linear-gradient(180deg, #f5f9ff 0%, #eaf2fc 55%, #cfe2f6 100%);}
.fleet__head {display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px;}
.fleet__head .section-title {font-size: clamp(30px, 3vw, 42px);}
.fleet__lead {margin-top: 12px; max-width: 470px; font-size: 15px; color: var(--text);}
.fleet__head .link-arrow {white-space: nowrap;}
.fleet__slider {position: relative;}
.fleet__viewport {overflow: visible; clip-path: inset(-30px 0 -60px 0); touch-action: pan-y;}
.fleet__track {display: flex; gap: 18px; transition: transform .7s var(--ease-out); will-change: transform;}
.fleet__track.is-dragging {transition: none;}
.fleet__prev,
.fleet__next {position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; background: var(--blue-700); transform: translateY(-50%); box-shadow: 0 10px 24px rgba(11,79,168,.35);}
.fleet__prev:hover,
.fleet__next:hover {transform: translateY(-50%) scale(1.08); background: var(--blue-500);}
.fleet__prev {left: -24px;}
.fleet__next {right: -24px;}
.fleet__dots {display: flex; justify-content: center; gap: 8px; margin-top: 18px;}
.fleet__dots button {width: 9px; height: 9px; border-radius: 6px; background: #9fbbe0; transition: width .35s var(--ease), background .3s;}
.fleet__dots button[aria-selected="true"] {width: 26px; background: var(--blue-700);}
.promise {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 36px; padding: 18px 26px; border-radius: 18px; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(11,37,84,.1);}
.promise li {display: flex; align-items: center; gap: 14px; padding: 6px 8px; border-radius: 12px; transition: background .3s;}
.promise li:hover {background: var(--sky-50);}
.promise strong {display: block; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--ink);}
.promise small {font-size: 12.5px; color: var(--muted);}
.fleet__sea {position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 1; pointer-events: none;}
.fleet__sea svg {width: 100%; height: 100%; overflow: visible;}
.fleet__sea .s1 {fill: rgba(120, 170, 222, .35);}
.fleet__sea .s2 {fill: rgba(70, 130, 200, .35);}
.fleet__sea .s3 {fill: rgba(30, 90, 170, .3);}
.fleet {padding-bottom: 150px;}
.fleet__head {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 40px;}
.fleet__head .section-title {margin: 0;}
.fleet__lead {margin: 0; max-width: 560px;}
.fleet__track {transition-duration: var(--fleet-speed, 700ms);}
.fleet__waves {z-index: 1;}
@media (max-width: 1380px) {
.fleet__prev {left: -10px;}
.fleet__next {right: -10px;}
}
@media (max-width: 1100px) {
.promise {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 767px) {
.fleet {padding: 48px 0 110px;}
.fleet__head {flex-direction: column; align-items: flex-start; gap: 10px;}
.fleet__prev,
.fleet__next {display: none;}
.fleet__dots button {width: 11px; height: 11px;}
.fleet__dots button[aria-selected="true"] {width: 30px;}
.promise {grid-template-columns: 1fr 1fr; padding: 12px; gap: 6px;}
.promise li {flex-direction: column; text-align: center; gap: 8px; padding: 10px 4px;}
.promise small {display: none;}
}
@media (max-width: 1100px) {
.fleet__head {grid-template-columns: 1fr auto;}
.fleet__lead {grid-column: 1 / -1; grid-row: 2;}
}
@media (max-width: 767px) {
.fleet__head {grid-template-columns: 1fr;}
.fleet__lead {grid-row: auto;}
}
.elementor-widget-sonay-fleet {width: 100%;}
.fleet .container {position: relative; z-index: 2;}
.promise .ic {width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--sky-100); color: var(--blue-600); flex: none; transition: transform .5s var(--ease), background .3s, color .3s;}
.promise li:hover .ic {transform: rotate(-12deg); background: var(--grad-blue); color: #fff;}
.promise .ic {background: var(--pr-ic-bg, var(--sky-100)); color: var(--pr-ic, var(--blue-600));}
.promise li:hover .ic {background: var(--pr-ic-hover, var(--blue-500)); color: #fff;}