.promos{padding:32px 20px 0}
.promos+.hero{padding-top:44px}
.promo-nav{display:flex;gap:8px;flex:none}
.promo-nav[hidden]{display:none}
.promo-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
.promo-btn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.promo-btn:disabled{opacity:.35;cursor:default}
.promos-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px)/2);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.promos-row::-webkit-scrollbar{display:none}
.promos-row.n1{grid-auto-columns:100%}

.promo{--navy:10,45,107;position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:270px;border-radius:16px;overflow:hidden;color:#fff;background:#0a2d6b;scroll-snap-align:start}
.promo [hidden]{display:none!important}
.promo>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 50%;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.promo:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--navy),.96) 0%,rgba(var(--navy),.88) 42%,rgba(var(--navy),.38) 74%,rgba(var(--navy),.04) 100%)}
.promo.lk:hover>img{transform:scale(1.05)}
.promo-c{display:flex;flex-direction:column;align-items:flex-start;width:66%;padding:24px 26px 24px}
.promo-b{margin-bottom:12px;padding:4px 11px;border-radius:99px;background:var(--sun);color:var(--ink);font-size:13px;line-height:1.35;font-weight:800;letter-spacing:-.01em}
.promo-t{margin:0;font-size:clamp(21px,2.05vw,25px);line-height:1.17;letter-spacing:-.025em;font-weight:800;text-wrap:balance;overflow-wrap:anywhere}
.promo-l:after{content:"";position:absolute;inset:0;z-index:1}
.promo-l:focus-visible{outline:0}
.promo:has(.promo-l:focus-visible):after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--sun);pointer-events:none}
.promo-x{margin:6px 0 0;max-width:36ch;color:#d6e1f6;font-size:14.5px;line-height:1.5;text-wrap:pretty}
.promo-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
.promo-a{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700}
.promo-ar{width:32px;height:32px;flex:none;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:background .2s,transform .35s cubic-bezier(.16,1,.3,1)}
.promo-ar svg.i{width:16px;height:16px}
.promo.lk:hover .promo-ar{background:var(--sun);transform:translateX(3px)}
.promo-code{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;border:1.5px dashed rgba(255,255,255,.5);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}
.promo-code:hover{border-color:var(--sun);background:rgba(255,183,3,.14)}
.promo-code:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.promo-k{color:#c8d5f0;font-weight:600}
.promo-code b{font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.promo-code svg.i{width:15px;height:15px;color:var(--sun)}
.promo-code .c2,.promo-code.ok .c1{display:none}
.promo-code.ok .c2{display:block}
.promo-code.ok{border-style:solid;border-color:var(--sun)}
.promo-end{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:99px;background:rgba(255,255,255,.94);color:var(--ink);font-size:12px;font-weight:700;pointer-events:none}
.promo-end svg.i{width:14px;height:14px;color:var(--blue)}
.promo-end.last{background:var(--sun)}
.promo-end.last svg.i{color:var(--ink)}

.n1 .promo{min-height:300px}
.n1 .promo:before{background:linear-gradient(90deg,rgba(var(--navy),.96) 0%,rgba(var(--navy),.86) 34%,rgba(var(--navy),.3) 60%,rgba(var(--navy),0) 82%)}
.n1 .promo-c{width:auto;max-width:34em;padding:32px 36px}
.n1 .promo-t{font-size:clamp(24px,2.6vw,30px)}

@media(prefers-reduced-motion:reduce){.promo>img,.promo-ar{transition:none}}
@media(max-width:960px){
 .promos{padding-top:24px}
 .promos+.hero{padding-top:32px}
 .promo-nav{display:none}
 .promos-row{grid-auto-columns:78%;margin:0 -20px;padding:0 20px;scroll-padding-left:20px}
 .promos-row.n1{grid-auto-columns:100%}
 .promo-c{width:72%}
}
@media(max-width:600px){
 .promos-row{grid-auto-columns:88%;gap:12px}
 .promo,.n1 .promo{min-height:330px}
 .promo:before,.n1 .promo:before{background:linear-gradient(180deg,rgba(var(--navy),.12) 0%,rgba(var(--navy),.3) 30%,rgba(var(--navy),.9) 62%,rgba(var(--navy),.97) 100%)}
 .promo>img{object-position:50% 30%}
 .promo-c,.n1 .promo-c{width:100%;padding:20px}
 .n1 .promo-t{font-size:23px}
}