/* Homepage banner slider. Markup in index.html, behaviour in banners.js. Colors here are fixed (same in light and dark mode). */
.slider{position:relative;margin:0 0 40px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#072f2c;box-shadow:0 22px 50px -26px rgba(6,60,55,.7)}
.slides{display:flex;transition:transform .85s cubic-bezier(.65,0,.25,1)}
.slide{position:relative;flex:0 0 100%;min-width:0;height:30em;font-size:clamp(7px,1.2vw,14px);overflow:hidden;isolation:isolate;color:#fff}
.slide::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 18%,rgba(44,196,180,.38),transparent 46%),radial-gradient(circle at 8% 100%,rgba(242,177,52,.16),transparent 40%),var(--bg)}
.slide::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 75%);mask-image:linear-gradient(100deg,transparent 30%,#000 75%)}
.s1{--bg:linear-gradient(120deg,#062b28,#0b7b70)}.s2{--bg:linear-gradient(120deg,#08293a,#0a7482)}.s3{--bg:linear-gradient(120deg,#082e25,#0f8059)}
.s4{--bg:linear-gradient(120deg,#0e2638,#0a6466)}.s5{--bg:linear-gradient(120deg,#082a33,#09797a)}.s6{--bg:linear-gradient(120deg,#122f38,#0e7468)}
.copy{position:absolute;left:5%;top:50%;transform:translateY(-50%);width:37%;font-size:1rem}
.eb{display:inline-block;font:800 .74rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#f2b134;background:rgba(242,177,52,.14);border:1px solid rgba(242,177,52,.35);padding:7px 11px;border-radius:99px;margin-bottom:14px}
.slide h2{text-wrap:balance;font-size:clamp(1.6rem,3.3vw,2.7rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 12px;color:#fff;font-weight:800}
.slide p{margin:0 0 22px;font-size:clamp(.95rem,1.45vw,1.14rem);line-height:1.5;color:#d4efeb;max-width:40ch}
.slide .btn{background:#f2b134;color:#10201f;border-color:#f2b134;font-weight:800;box-shadow:0 10px 24px -10px rgba(242,177,52,.7)}
.slide .btn:hover{background:#ffc552}
.art{position:absolute;right:3%;top:50%;width:40em;height:27em;margin-top:-13.5em}
.c{position:absolute;background:#fff;color:#10201f;border-radius:1.1em;padding:1.3em;font:600 1em/1.25 var(--body);box-shadow:0 1.8em 3.2em -1.2em rgba(0,0,0,.55)}
.c h4{margin:0 0 .7em;font:800 1.08em/1.2 var(--display);display:flex;justify-content:space-between;align-items:center;gap:.6em}
.grow{flex:1}.c b{font-weight:800}
.pill{display:inline-block;font:800 .7em/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:.5em .75em;border-radius:99px;background:#e0f3f0;color:#06544d;white-space:nowrap}
.pill.amb{background:#fdecc4;color:#6b4a00}.pill.red{background:#fbdcda;color:#8f2a26}.pill.grn{background:#d5f5e3;color:#0d6b3a}
.row{display:flex;align-items:center;gap:.7em;padding:.6em 0;border-top:1px solid #e3eceb;font-size:.95em}
.c h4+.row,.c .pb+.row{border-top:0}
.ic{width:1.7em;height:1.7em;border-radius:50%;background:#2cc4b4;color:#fff;display:grid;place-items:center;font-size:.95em;font-weight:800;flex:none}
.ic.amb{background:#f2b134;color:#10201f}.ic.red{background:#d9534f}
.pb{height:.75em;border-radius:.4em;background:#e3eceb;overflow:hidden}.pb i{display:block;height:100%;background:linear-gradient(90deg,#0b8277,#2cc4b4);border-radius:.4em}
.pb.sm{width:70%;margin-top:.7em;height:.6em}
.spark{display:flex;align-items:flex-end;gap:.5em;height:4.6em}.spark i{flex:1;border-radius:.3em .3em 0 0;background:linear-gradient(180deg,#2cc4b4,#0b8277)}.spark i:last-child{background:linear-gradient(180deg,#f7c75a,#f2b134)}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}.chip{text-align:center;padding:.7em 0;border-radius:.7em;background:#edf3f2;color:#8aa09d;font:800 .95em var(--body)}.chip.ok{background:#d5f5e3;color:#0d6b3a}
.code{font:800 .8em/1 var(--body);background:#10201f;color:#fff;border-radius:.5em;padding:.5em .6em}
.axis{display:grid;grid-template-columns:repeat(4,1fr);font:700 .74em var(--body);color:#6b8683;margin:.2em 0 .8em;padding-left:8.4em}
.gl{display:flex;align-items:center;gap:.8em;margin:.75em 0}.gl span{width:7.6em;font-size:.88em;color:#33504d}.gl .pb{flex:1}
.t{font:800 1.12em/1.25 var(--display);margin-top:.7em}
.sl-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(7,47,44,.45);backdrop-filter:blur(4px);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.sl-btn:hover{background:rgba(7,47,44,.75)}.sl-btn.prev{left:12px}.sl-btn.next{right:12px}
.sl-dots{position:absolute;left:5%;bottom:16px;display:flex;gap:8px}
.sl-dots button{width:32px;height:5px;border:0;border-radius:3px;background:rgba(255,255,255,.3);padding:0;cursor:pointer;overflow:hidden;position:relative}
.sl-dots button[aria-selected="true"]::after{content:"";position:absolute;inset:0;background:#f2b134;transform-origin:left;animation:slfill 20s linear forwards}
.slider.paused .sl-dots button[aria-selected="true"]::after,.slider.still .sl-dots button[aria-selected="true"]::after{animation:none;transform:none}
@keyframes slfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;translate:0 1.6em}}
@keyframes flt{50%{transform:translateY(-.55em)}}
@media(prefers-reduced-motion:no-preference){
  .slide.on .c{animation:pop .8s cubic-bezier(.2,.7,.2,1) both,flt 8s 1s ease-in-out infinite}
  .slide.on .c:nth-child(2){animation-delay:.15s,1.4s}.slide.on .c:nth-child(3){animation-delay:.3s,2s}
  .slide.on .copy>*{animation:pop .8s cubic-bezier(.2,.7,.2,1) both}
  .slide.on .copy>:nth-child(2){animation-delay:.08s}.slide.on .copy>:nth-child(3){animation-delay:.16s}.slide.on .copy>:nth-child(4){animation-delay:.24s}
}
@media(prefers-reduced-motion:reduce){.slides{transition:none}}
@media(max-width:820px){
  .slider{border-radius:14px;margin-bottom:28px}
  .slide{height:auto;font-size:min(2.05vw,13px);padding-bottom:46px}
  .copy{position:static;transform:none;width:auto;padding:22px 20px 0}
  .art{position:relative;right:auto;top:auto;margin:1.6em auto 0;width:40em;height:27em}
  .slide{display:flex;flex-direction:column-reverse}
  .sl-btn{display:none}.sl-dots{left:20px;bottom:18px}
}