@charset "utf-8";
/* Naireen · speed.css — #speed */

/* ---------- speed / dunes ---------- */
#speed{padding:0; min-height:0; display:block}
.dunes{position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:flex; align-items:center; background:#07070A; padding-block:clamp(88px,12vh,132px)}
.dunes-bg, .dunes-svg{position:absolute; inset:0; width:100%; height:100%}
.dunes-bg{object-fit:cover; filter:brightness(1.22) saturate(1.05)}
.dunes-svg{pointer-events:none}
.dunes::after{content:""; position:absolute; inset:0; background:linear-gradient(to left, rgba(7,7,10,.92) 0%, rgba(7,7,10,.6) 42%, transparent 72%); pointer-events:none}
@media (max-width:860px){.dunes::after{background:linear-gradient(to top, rgba(7,7,10,.95) 34%, rgba(7,7,10,.35) 72%, transparent)}}
.dunes .wrap{position:relative; z-index:2; width:min(1240px,100%)}
.flowbox{width:min(470px,100%); margin-inline-end:auto}
.flow{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:0}
.flow li{display:flex; align-items:center; gap:14px; padding:13px 0; opacity:.3; transition:opacity .5s ease}
.flow li.on{opacity:1}
.flow .dot{width:11px; height:11px; border-radius:50%; border:1px solid var(--gold); flex:0 0 auto; position:relative; transition:background .5s, box-shadow .5s}
.flow li.on .dot{background:var(--gold); box-shadow:0 0 14px rgba(242,208,138,.9)}
.flow .dot::after{content:""; position:absolute; top:11px; inset-inline-start:4.5px; width:1px; height:28px; background:linear-gradient(to bottom, rgba(214,174,91,.5), transparent)}
.flow li:last-child .dot::after{display:none}
.flow .lb{font-size:15.5px; color:var(--ivory)}
.flow li:last-child .lb{font-family:var(--f-ar-display); font-size:25px; color:var(--flash)}