:root {
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

html {
    scroll-padding-top: env(safe-area-inset-top, 0px)
}

body {
    margin: 0;
    padding: 0;
    font: 14px -apple-system, BlinkMacSystemFont, sans-serif;
    background: #faf9f5;
    color: #141413
}

img {
    max-width: 100%
}

[hidden]:not([hidden=until-found i]) {
    display: none !important
}

:root {
    --brick: #9B1C0B;
    --sun: #FEC731;
    --white: #FFFFFF;
    --pista: #C8EBA8;
    --teal: #0B4F4A;
    --teal-2: #083B38;
    --pink: #FF7AB6;
    --violet: #E9E1FF;
    --mint-text: #1F5F58;
    --cray: #EE204D;
    --aqua: #2EF2C6;
    --indigo: #1B0E3D;
    --cream: #FFF4E6;
    --hh: 84px;
    --f: "Montserrat", "Arial Black", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box
}

html {
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--hh);
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--brick);
    color: var(--white);
    font-family: var(--f);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit
}

:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 3px;
    border-radius: 6px
}

h1,
h2,
h3 {
    text-wrap: balance
}

/* one-screen sections: the .fit canvas is laid out at a design width, then scaled to the screen */
.fs {
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: calc(100svh - var(--hh));
    min-height: 320px;
    scroll-snap-align: start
}

.fit {
    position: absolute;
    left: 0;
    top: 0;
    width: 1440px;
    transform-origin: 0 0;
    transition: opacity .25s linear;
    container-type: inline-size;
    container-name: fit
}

.pad {
    padding-inline: clamp(20px, 4.4cqw, 64px)
}

.label {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 30px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .25s, background .25s
}

.btn:hover {
    transform: translateY(-3px)
}

.arr {
    width: 20px;
    height: 20px;
    animation: arrow 1.2s ease-in-out infinite
}

.star {
    width: 22px;
    height: 22px;
    flex: none;
    fill: currentColor
}

.line {
    display: block;
    overflow: hidden;
    padding-bottom: 4px
}

.line>span {
    display: block
}

.mq {
    position: relative;
    left: -40px;
    width: calc(100% + 80px);
    overflow: hidden;
    display: flex;
    align-items: center
}

.track {
    display: flex;
    align-items: center;
    gap: 30px;
    white-space: nowrap;
    width: max-content;
    animation: mqL 34s linear infinite
}

.track span {
    font-weight: 900;
    letter-spacing: -.03em;
    text-transform: uppercase
}

/* scroll-blended backdrop */
.bgfx {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--brick);
    overflow: hidden;
    pointer-events: none
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0;
    will-change: transform
}

.b1 {
    width: 70vw;
    height: 62vh;
    left: -18vw;
    top: -26vh;
    background: var(--sun);
    animation: float1 16s ease-in-out infinite alternate
}

.b2 {
    width: 74vw;
    height: 66vh;
    right: -20vw;
    bottom: -30vh;
    background: var(--pista);
    animation: float2 19s ease-in-out infinite alternate
}

.b3 {
    width: 40vw;
    height: 40vh;
    left: 30vw;
    bottom: -22vh;
    background: var(--pink);
    animation: float3 23s ease-in-out infinite alternate
}

@keyframes float1 {
    from {
        transform: translate(0, 0) scale(1)
    }

    to {
        transform: translate(12vw, 8vh) scale(1.15)
    }
}

@keyframes float2 {
    from {
        transform: translate(0, 0) scale(1.1)
    }

    to {
        transform: translate(-14vw, -6vh) scale(.95)
    }
}

@keyframes float3 {
    from {
        transform: translate(-10vw, 0)
    }

    to {
        transform: translate(12vw, -10vh)
    }
}

.foot {
    position: relative;
    z-index: 1
}

/* header */
.site-head {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: var(--brick);
    box-shadow: 0 8px 24px rgba(60, 6, 0, .3)
}

.head-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px 32px;
    flex-wrap: wrap;
    max-width: 1440px;
    margin-inline: auto;
    padding: 10px clamp(16px, 4.4vw, 64px);
    animation: navin .9s cubic-bezier(.2, .9, .2, 1) both
}

.logo {
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -.04em;
    text-decoration: none;
    color: var(--white)
}

.nav {
    display: flex;
    align-items: center;
    gap: 28px
}

.nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none
}

.nav a:hover,
.nav a[aria-current="page"] {
    color: var(--sun)
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 100px;
    background: var(--white);
    color: var(--brick);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none
}

.pill:hover {
    background: #FFF3D6
}

@media (max-width:379px) {
    .nav {
        gap: 6px !important
    }

    .nav a {
        font-size: 10px !important;
        letter-spacing: .01em !important
    }
}

@media (min-width:600px) and (max-width:820px) {
    .nav {
        justify-content: flex-start !important;
        gap: 28px !important
    }

    .nav a {
        font-size: 12px !important
    }
}

@media (min-width:821px) and (max-width:1024px) {
    .nav {
        gap: 16px
    }

    .nav a {
        font-size: 12px;
        letter-spacing: .03em;
        white-space: nowrap
    }

    .pill {
        padding: 0 14px;
        font-size: 12px;
        white-space: nowrap
    }
}

@media (max-width:820px) {
    .nav {
        order: 3;
        width: 100%;
        gap: 24px;
        border-top: 1px solid rgba(255, 255, 255, .25)
    }

    .nav a {
        min-height: 38px;
        font-size: 12px
    }

    .nav {
        gap: 16px;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }

    .nav::-webkit-scrollbar {
        display: none
    }

    .nav a {
        font-size: 11px;
        letter-spacing: .03em;
        white-space: nowrap;
        flex: none
    }

    .logo {
        font-size: 22px
    }

    .pill {
        padding: 0 14px;
        font-size: 12px;
        min-height: 40px
    }
}

/* ================= HOME ================= */
#home {
    background: transparent
}

.home-in {
    padding-top: 28px
}

#home .label {
    background: var(--sun);
    color: var(--brick);
    animation: fadeup .9s cubic-bezier(.2, .9, .2, 1) .2s both
}

.h1 {
    margin: 14px 0 0 -.04em;
    font-weight: 900;
    font-size: clamp(40px, 10.4cqw, 158px);
    line-height: 1;
    letter-spacing: -.045em;
    text-transform: uppercase;
    white-space: nowrap;
    perspective: 900px
}

.ch {
    display: inline-block;
    transform-origin: 50% 100%;
    animation: chin 1s cubic-bezier(.2, .9, .25, 1) both
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start
}

.hero-copy {
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.sub {
    margin: 0;
    font-weight: 800;
    font-size: clamp(17px, 2.1cqw, 30px);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-transform: uppercase
}

.bar {
    margin-top: 26px;
    width: 72px;
    height: 6px;
    border-radius: 6px;
    background: var(--white);
    transform-origin: 0 50%;
    animation: grow .8s cubic-bezier(.2, .9, .2, 1) 1.1s both
}

.tag {
    margin: 24px 0 0;
    font-weight: 900;
    font-size: clamp(32px, 4.4cqw, 64px);
    line-height: .98;
    letter-spacing: -.045em;
    text-transform: uppercase;
    color: var(--sun)
}

#home .line>span {
    animation: lineup 1s cubic-bezier(.2, .9, .2, 1) both
}

#home .btn {
    margin-top: 36px;
    background: var(--sun);
    color: var(--brick);
    animation: ctain .9s cubic-bezier(.2, .9, .2, 1) 1.35s both
}

#home .btn:hover {
    background: #FFD65E
}

.scene-box {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 660/640;
    justify-self: end;
    margin-top: -72px
}

.scene {
    position: absolute;
    left: 0;
    top: 0;
    width: 660px;
    height: 640px;
    transform-origin: 0 0;
    perspective: 1200px;
    perspective-origin: 50% 45%
}

.world {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1)
}

.disc {
    position: absolute;
    left: 90px;
    top: 132px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: var(--white);
    transform: translateZ(-120px);
    animation: pop 1s cubic-bezier(.2, 1.3, .4, 1) .15s both
}

.ring {
    position: absolute;
    left: 40px;
    top: 82px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, .45);
    transform: translateZ(-160px);
    animation: ringspin 40s linear infinite
}

.gshadow {
    position: absolute;
    left: 150px;
    top: 500px;
    width: 400px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(110, 19, 7, .28), rgba(110, 19, 7, 0));
    transform: translateZ(-60px)
}

.orbit {
    position: absolute;
    left: 350px;
    top: 330px;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    animation: orbit 22s linear infinite
}

.slot {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d
}

.bb {
    position: absolute;
    left: -50px;
    top: -50px;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: counter 22s linear infinite
}

.orb {
    width: 100px;
    height: 100px;
    max-width: none;
    filter: drop-shadow(0 10px 10px rgba(60, 6, 0, .35));
    animation: orbbob 2.4s ease-in-out infinite alternate
}

.drop {
    position: absolute;
    transform-style: preserve-3d;
    animation: drop 1.3s cubic-bezier(.3, 1.35, .45, 1) both
}

.fl {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d
}

.sway {
    animation: sway 4.6s ease-in-out infinite alternate
}

.pack {
    width: 100%;
    height: 100%;
    max-width: none;
    filter: drop-shadow(0 24px 30px rgba(60, 6, 0, .45))
}

.trail {
    position: absolute;
    width: 3px;
    border-radius: 3px;
    background: var(--white);
    opacity: 0;
    animation: trail 1.6s ease-out both
}

.home-mq {
    margin: 22px 0 26px;
    height: 62px;
    background: var(--sun);
    color: var(--brick);
    transform: rotate(-1.2deg)
}

.home-mq .track span {
    font-size: 26px
}

/* ================= HOW IT WORKS ================= */
#how-it-works {
    background: transparent;
    color: var(--teal)
}

.hiw-grid {
    padding-top: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head vp" "steps vp";
    column-gap: 32px;
    align-items: start
}

.hiw-head {
    grid-area: head
}

.hiw-head .label {
    background: var(--teal);
    color: var(--white)
}

.h2 {
    margin: 14px 0 0 -.04em;
    font-weight: 900;
    font-size: clamp(40px, 5cqw, 72px);
    line-height: .92;
    letter-spacing: -.045em;
    text-transform: uppercase
}

.play .line>span {
    animation: lineup 1s cubic-bezier(.2, .9, .2, 1) both
}

.intro {
    margin: 14px 0 0;
    max-width: 520px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--teal-2)
}

.intro strong {
    font-weight: 900;
    color: var(--teal)
}

.hiw-vp {
    grid-area: vp;
    align-self: stretch;
    position: relative;
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    border-radius: 28px
}

.stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1440px;
    height: 720px;
    transform-origin: 0 0;
    perspective: 1300px;
    perspective-origin: 50% 62%
}

.rays {
    position: absolute;
    left: -380px;
    top: -595px;
    width: 2200px;
    height: 2200px;
    max-width: none;
    transform: translateZ(-400px);
    animation: spin 70s linear infinite
}

.conf {
    position: absolute;
    left: 0;
    top: 0;
    width: 1440px;
    height: 700px;
    max-width: none;
    transform: translateZ(-200px);
    animation: drift 7s ease-in-out infinite alternate
}

.it {
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform, opacity
}

.it img {
    width: 100%;
    height: 100%;
    max-width: none
}

.fa {
    animation: fa 4.2s ease-in-out infinite alternate
}

.fb {
    animation: fb 5.1s ease-in-out infinite alternate
}

.fc {
    animation: fc 3.7s ease-in-out infinite alternate
}

.near {
    filter: drop-shadow(0 18px 18px rgba(8, 59, 56, .35))
}

.mid {
    filter: drop-shadow(0 10px 10px rgba(8, 59, 56, .25))
}

.far {
    filter: blur(1.4px) drop-shadow(0 6px 6px rgba(8, 59, 56, .2));
    opacity: .9
}

.box {
    position: absolute;
    left: 570px;
    top: 470px;
    width: 300px;
    height: 170px;
    transform-style: preserve-3d;
    animation: bsway 9s ease-in-out infinite alternate
}

.face {
    position: absolute;
    backface-visibility: visible;
    transform-style: preserve-3d
}

.fr {
    left: 0;
    top: 0;
    width: 300px;
    height: 170px;
    background: var(--teal);
    transform: translateZ(100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.fr b {
    font-weight: 900;
    font-size: 42px;
    letter-spacing: -.05em;
    color: var(--white);
    text-transform: uppercase
}

.fr i {
    width: 96px;
    height: 4px;
    border-radius: 2px;
    background: var(--pink)
}

.bk {
    left: 0;
    top: 0;
    width: 300px;
    height: 170px;
    background: var(--teal-2);
    transform: rotateY(180deg) translateZ(100px)
}

.lf {
    left: 50px;
    top: 0;
    width: 200px;
    height: 170px;
    background: var(--teal-2);
    transform: rotateY(-90deg) translateZ(150px)
}

.rt {
    left: 50px;
    top: 0;
    width: 200px;
    height: 170px;
    background: var(--teal-2);
    transform: rotateY(90deg) translateZ(150px)
}

.bt {
    left: 0;
    top: -15px;
    width: 300px;
    height: 200px;
    background: #041F1D;
    transform: rotateX(-90deg) translateZ(85px)
}

.flap {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 100px;
    transform-origin: 50% 100%;
    background: #14706A;
    border-top: 3px solid #1E8C84;
    animation: flap 10s cubic-bezier(.3, 1.4, .4, 1) infinite
}

.flap.s {
    height: 110px;
    animation-name: flap2
}

.pk {
    position: absolute;
    max-width: none;
    filter: drop-shadow(0 8px 10px rgba(8, 59, 56, .35));
    animation: rise 10s cubic-bezier(.25, 1.3, .4, 1) infinite
}

.bshadow {
    position: absolute;
    left: 470px;
    top: 650px;
    width: 500px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(8, 59, 56, .35), rgba(8, 59, 56, 0))
}

.steps {
    grid-area: steps;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.step {
    padding: 20px 22px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 12px 26px rgba(8, 59, 56, .16);
    transform-origin: 50% 100%;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s
}

.step:hover {
    transform: perspective(900px) rotateX(8deg) translateY(-8px) scale(1.02);
    box-shadow: 0 26px 44px rgba(8, 59, 56, .28)
}

.play .step {
    animation: cardin 1s cubic-bezier(.2, .9, .2, 1) var(--d) both
}

.step.lt {
    background: var(--violet);
    color: var(--teal)
}

.step.dk {
    background: var(--teal);
    color: var(--white)
}

.step-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.num {
    font-weight: 900;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.05em
}

.lt .num {
    color: var(--teal);
    text-shadow: 1px 1px 0 var(--pink), 2px 2px 0 var(--pink), 3px 3px 0 #E0559A, 4px 4px 0 #C2407F, 5px 5px 10px rgba(8, 59, 56, .3)
}

.dk .num {
    color: var(--pink);
    text-shadow: 1px 1px 0 var(--teal-2), 2px 2px 0 var(--teal-2), 3px 3px 0 #062B29, 4px 4px 0 #041F1D, 5px 5px 10px rgba(0, 0, 0, .35)
}

.ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pink);
    color: var(--teal);
    animation: bob 2.6s ease-in-out infinite alternate
}

.dk .ico {
    background: var(--white)
}

.ico svg {
    width: 22px;
    height: 22px
}

.step h3 {
    margin: 4px 0 0;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -.02em
}

.step h3 em {
    font-style: normal;
    color: var(--pink)
}

.lt h3 em {
    color: #B3246B;
    box-shadow: inset 0 -.28em 0 rgba(255, 122, 182, .45)
}

.step p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45
}

.lt p {
    color: var(--mint-text)
}

.dk p {
    color: #CDEFE6
}

.hiw-mq {
    margin: 18px 0 26px;
    height: 62px;
    background: var(--teal);
    color: var(--white);
    transform: rotate(-1.4deg)
}

.hiw-mq .star {
    color: var(--pink)
}

.hiw-mq .track span {
    font-size: 26px
}

.hiw-mq .track {
    animation: none !important;
    transform: none
}

/* ================= COMING SOON ================= */
#coming-soon {
    background: transparent;
    color: var(--white)
}

.cs-deco {
    position: absolute;
    right: -300px;
    top: -360px;
    width: 900px;
    height: 900px;
    max-width: none;
    pointer-events: none
}

.cs-grid {
    position: relative;
    padding-top: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    grid-template-areas: "head join" "cards cards";
    column-gap: 40px;
    align-items: end
}

.cs-head {
    grid-area: head
}

.cs-head .label {
    background: var(--indigo);
    color: var(--aqua)
}

.cs-head .h2 {
    font-size: clamp(40px, 5.2cqw, 76px)
}

.joy {
    display: inline-block;
    margin-top: 6px;
    padding: 0 .18em .06em;
    background: var(--aqua);
    color: var(--indigo);
    border-radius: 14px;
    transform: rotate(-2deg)
}

.cs-head .intro {
    color: var(--white);
    font-size: 17px
}

.cs-head .intro strong {
    color: var(--white);
    border-bottom: 3px solid var(--aqua)
}

.join {
    grid-area: join;
    padding: 24px 26px;
    border-radius: 24px;
    background: var(--white);
    color: var(--indigo);
    box-shadow: 0 24px 48px rgba(27, 14, 61, .28);
    display: flex;
    flex-direction: column;
    gap: 12px
}

.join h3 {
    margin: 0;
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.04em;
    text-transform: uppercase
}

.join .jsub {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #4A3F70
}

.jform {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.jform label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4A3F70
}

.jrow {
    display: flex;
    gap: 10px
}

.jrow input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border-radius: 100px;
    border: 2px solid #D6D0EA;
    background: var(--white);
    color: var(--indigo);
    font: 600 16px var(--f)
}

.jrow input::placeholder {
    color: #8A80A8
}

.jrow button {
    flex: none;
    height: 52px;
    padding: 0 24px;
    border-radius: 100px;
    border: 0;
    background: var(--indigo);
    color: var(--white);
    font: 900 14px var(--f);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s
}

.jrow button:hover {
    background: #3A2A6E
}

.jmsg {
    min-height: 1.3em;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0E7A62
}

.cards {
    grid-area: cards;
    justify-self: center;
    width: 100%;
    max-width: 1080px;
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: stretch
}

.dcard {
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 24px rgba(27, 14, 61, .18);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s
}

.dcard:hover {
    transform: translateY(-8px) rotate(-.6deg);
    box-shadow: 0 26px 44px rgba(27, 14, 61, .3)
}

.dcard img {
    width: 100%;
    height: auto;
    aspect-ratio: 420/230;
    object-fit: cover;
    object-position: 50% 70%;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1)
}

.dcard:hover img {
    transform: scale(1.04)
}

.dbody {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1
}

.dlabel {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase
}

.dcard h3 {
    margin: 0;
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -.04em;
    text-transform: uppercase
}

.dcard p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    flex: 1
}

.notify {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 100px;
    border: 2px solid currentColor;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .2s, opacity .2s
}

.notify:hover {
    transform: translateY(-2px);
    opacity: .85
}

.notify svg {
    width: 17px;
    height: 17px
}

.c1 {
    background: var(--cream);
    color: #4A4F6E
}

.c1 h3 {
    color: var(--indigo)
}

.c1 h3 span {
    color: var(--cray)
}

.c1 .notify {
    color: var(--indigo)
}

.c2 {
    background: var(--indigo);
    color: #CFC6EE
}

.c2 h3 {
    color: var(--cream)
}

.c2 h3 span {
    color: var(--aqua)
}

.c2 .notify {
    color: var(--aqua)
}

.c3 {
    background: linear-gradient(135deg, #F6E27A 0%, #D4AF37 38%, #FFF1A8 55%, #C9A227 78%, #E8C85A 100%);
    color: var(--indigo)
}

.c3 h3 {
    color: var(--indigo)
}

.c3 h3 span {
    color: #C8103A
}

.c3 .notify {
    color: var(--indigo)
}

.cs-mq {
    margin: 48px 0 30px;
    height: 60px;
    background: var(--aqua);
    color: var(--indigo);
    transform: rotate(-1.2deg)
}

.cs-mq .track span {
    font-size: 26px
}

/* footer */
.foot {
    background: var(--indigo);
    color: #CFC6EE;
    scroll-snap-align: end
}

.foot-in {
    max-width: 1440px;
    margin-inline: auto;
    padding: 18px clamp(16px, 4.4vw, 64px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600
}

.foot b {
    color: var(--white);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -.04em
}

.foot nav {
    display: flex;
    gap: 18px
}

.foot a {
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center
}

.foot a:hover {
    color: var(--aqua)
}

/* ================= compact (portrait) canvas ================= */
@container fit (max-width:600px) {
    .home-in {
        padding-top: 22px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .hero-copy {
        padding-top: 14px
    }

    .bar {
        margin-top: 16px
    }

    .tag {
        margin-top: 16px
    }

    #home .btn {
        margin-top: 20px
    }

    .scene-box {
        justify-self: center;
        max-width: 330px;
        margin-top: 6px
    }

    .home-mq {
        margin: 6px 0 20px;
        height: 46px
    }

    .home-mq .track span {
        font-size: 19px
    }

    .hiw-grid {
        padding-top: 26px;
        grid-template-columns: 1fr;
        grid-template-areas: "head" "vp" "steps"
    }

    .h2 {
        font-size: 38px
    }

    .intro {
        font-size: 14px;
        margin-top: 10px
    }

    .hiw-head .intro {
        display: none
    }

    .hiw-vp {
        margin-top: 6px;
        border-radius: 20px
    }

    .steps {
        margin-top: 14px;
        gap: 10px
    }

    .step {
        padding: 14px;
        gap: 6px;
        border-radius: 14px
    }

    .num {
        font-size: 30px
    }

    .ico {
        width: 32px;
        height: 32px
    }

    .ico svg {
        width: 17px;
        height: 17px
    }

    .step h3 {
        font-size: 15px;
        margin: 0
    }

    .step p {
        display: none
    }

    .hiw-mq {
        margin: 16px 0 18px;
        height: 44px
    }

    .hiw-mq .track span {
        font-size: 18px
    }

    .cs-grid {
        padding-top: 26px;
        grid-template-columns: 1fr;
        grid-template-areas: "head" "cards" "join";
        align-items: start
    }

    .cs-head .h2 {
        font-size: 40px
    }

    .cards {
        margin-top: 20px;
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 360px
    }

    .dcard {
        display: grid;
        grid-template-columns: 92px 1fr;
        border-radius: 16px
    }

    .dcard img {
        width: 92px;
        height: 100%;
        aspect-ratio: auto;
        min-height: 92px;
        object-position: 50% 60%
    }

    .dbody {
        padding: 12px 14px;
        gap: 4px;
        justify-content: center
    }

    .dlabel,
    .notify {
        display: none
    }

    .dcard h3 {
        font-size: 19px
    }

    .dcard p {
        font-size: 13px;
        line-height: 1.35
    }

    .join {
        margin-top: 14px;
        padding: 16px;
        gap: 8px;
        border-radius: 18px
    }

    .join h3 {
        font-size: 20px
    }

    .join .jsub {
        display: none
    }

    .jrow input {
        height: 46px;
        font-size: 15px
    }

    .jrow button {
        height: 46px;
        padding: 0 16px;
        font-size: 13px
    }

    .cs-mq {
        margin: 14px 0 16px;
        height: 42px
    }

    .cs-mq .track span {
        font-size: 17px
    }

    .cs-deco {
        right: -420px;
        top: -520px
    }
}

/* keyframes */
@keyframes navin {
    from {
        opacity: 0;
        transform: translateY(-3rem)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(2rem)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes chin {
    from {
        opacity: 0;
        transform: translateY(40%) rotateX(-95deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes lineup {
    from {
        transform: translateY(105%)
    }

    to {
        transform: none
    }
}

@keyframes grow {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes ctain {
    from {
        opacity: 0;
        transform: translateX(-2rem)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pop {
    from {
        transform: translateZ(-120px) scale(0)
    }

    to {
        transform: translateZ(-120px) scale(1)
    }
}

@keyframes ringspin {
    from {
        transform: translateZ(-160px) rotate(0)
    }

    to {
        transform: translateZ(-160px) rotate(360deg)
    }
}

@keyframes orbit {
    from {
        transform: rotateX(74deg) rotateZ(0)
    }

    to {
        transform: rotateX(74deg) rotateZ(360deg)
    }
}

@keyframes counter {
    from {
        transform: rotateZ(0) rotateX(-74deg)
    }

    to {
        transform: rotateZ(-360deg) rotateX(-74deg)
    }
}

@keyframes orbbob {
    from {
        transform: translateY(-6px) rotate(-8deg)
    }

    to {
        transform: translateY(6px) rotate(8deg)
    }
}

@keyframes drop {
    from {
        opacity: 0;
        transform: translateY(-760px) rotateX(40deg) rotateZ(-30deg)
    }

    30% {
        opacity: 1
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes sway {
    from {
        transform: translateY(-8px) rotateY(-16deg) rotateX(4deg)
    }

    to {
        transform: translateY(8px) rotateY(16deg) rotateX(-4deg)
    }
}

@keyframes trail {
    0% {
        opacity: 0;
        transform: translateY(-200px) scaleY(2)
    }

    35% {
        opacity: .6
    }

    100% {
        opacity: 0;
        transform: translateY(40px) scaleY(.4)
    }
}

@keyframes mqL {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes arrow {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: translateX(6px)
    }
}

@keyframes spin {
    from {
        transform: translateZ(-400px) rotate(0)
    }

    to {
        transform: translateZ(-400px) rotate(360deg)
    }
}

@keyframes drift {
    from {
        transform: translateZ(-200px) translateY(-10px)
    }

    to {
        transform: translateZ(-200px) translateY(14px)
    }
}

@keyframes fa {
    from {
        transform: translateY(-10px) rotateY(-22deg) rotateZ(-4deg)
    }

    to {
        transform: translateY(10px) rotateY(22deg) rotateZ(4deg)
    }
}

@keyframes fb {
    from {
        transform: translateY(8px) rotateX(18deg) rotateY(14deg)
    }

    to {
        transform: translateY(-12px) rotateX(-14deg) rotateY(-18deg)
    }
}

@keyframes fc {
    from {
        transform: translateY(-6px) rotateY(30deg) rotateZ(6deg)
    }

    to {
        transform: translateY(8px) rotateY(-30deg) rotateZ(-6deg)
    }
}

@keyframes bsway {
    from {
        transform: rotateX(-16deg) rotateY(-26deg)
    }

    to {
        transform: rotateX(-12deg) rotateY(26deg)
    }
}

@keyframes flap {

    0%,
    4% {
        transform: rotateX(92deg)
    }

    11%,
    86% {
        transform: rotateX(-38deg)
    }

    94%,
    100% {
        transform: rotateX(92deg)
    }
}

@keyframes flap2 {

    0%,
    5% {
        transform: rotateX(90deg)
    }

    12%,
    85% {
        transform: rotateX(-30deg)
    }

    93%,
    100% {
        transform: rotateX(90deg)
    }
}

@keyframes rise {

    0%,
    8% {
        transform: translateY(120px)
    }

    20%,
    80% {
        transform: none
    }

    90%,
    100% {
        transform: translateY(120px)
    }
}

@keyframes cardin {
    from {
        opacity: 0;
        transform: perspective(900px) rotateX(55deg) translateY(60px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes bob {
    from {
        transform: translateY(-3px) rotate(-6deg)
    }

    to {
        transform: translateY(3px) rotate(6deg)
    }
}

@keyframes b0 {

    0%,
    8.9% {
        transform: translate3d(160px, 230px, -120px) scale(.12) rotate(188deg);
        opacity: 0
    }

    11.9% {
        opacity: 1
    }

    24.9%,
    83.2% {
        transform: translate3d(0, 0, 119px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.2% {
        opacity: 1
    }

    93.2%,
    100% {
        transform: translate3d(160px, 230px, -120px) scale(.12) rotate(-188deg);
        opacity: 0
    }
}

.it0 {
    left: 392px;
    top: 82px;
    width: 336px;
    height: 336px;
    animation: b0 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b1 {

    0%,
    9.1% {
        transform: translate3d(-185px, 255px, -120px) scale(.12) rotate(-206deg);
        opacity: 0
    }

    12.1% {
        opacity: 1
    }

    25.1%,
    83.4% {
        transform: translate3d(0, 0, 146px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.4% {
        opacity: 1
    }

    93.4%,
    100% {
        transform: translate3d(-185px, 255px, -120px) scale(.12) rotate(206deg);
        opacity: 0
    }
}

.it1 {
    left: 743px;
    top: 63px;
    width: 324px;
    height: 324px;
    animation: b1 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b2 {

    0%,
    10.2% {
        transform: translate3d(470px, 120px, -120px) scale(.12) rotate(-205deg);
        opacity: 0
    }

    13.2% {
        opacity: 1
    }

    26.2%,
    84.2% {
        transform: translate3d(0, 0, 137px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.2% {
        opacity: 1
    }

    94.2%,
    100% {
        transform: translate3d(470px, 120px, -120px) scale(.12) rotate(205deg);
        opacity: 0
    }
}

.it2 {
    left: 108px;
    top: 218px;
    width: 285px;
    height: 285px;
    animation: b2 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b3 {

    0%,
    10.3% {
        transform: translate3d(-475px, 135px, -120px) scale(.12) rotate(-217deg);
        opacity: 0
    }

    13.3% {
        opacity: 1
    }

    26.3%,
    84.2% {
        transform: translate3d(0, 0, 149px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.2% {
        opacity: 1
    }

    94.2%,
    100% {
        transform: translate3d(-475px, 135px, -120px) scale(.12) rotate(217deg);
        opacity: 0
    }
}

.it3 {
    left: 1052px;
    top: 202px;
    width: 285px;
    height: 285px;
    animation: b3 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b4 {

    0%,
    9.0% {
        transform: translate3d(290px, 50px, -120px) scale(.12) rotate(160deg);
        opacity: 0
    }

    12.0% {
        opacity: 1
    }

    25.0%,
    83.3% {
        transform: translate3d(0, 0, 117px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.3% {
        opacity: 1
    }

    93.3%,
    100% {
        transform: translate3d(290px, 50px, -120px) scale(.12) rotate(-160deg);
        opacity: 0
    }
}

.it4 {
    left: 262px;
    top: 262px;
    width: 336px;
    height: 336px;
    animation: b4 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b5 {

    0%,
    9.0% {
        transform: translate3d(-300px, 50px, -120px) scale(.12) rotate(-249deg);
        opacity: 0
    }

    12.0% {
        opacity: 1
    }

    25.0%,
    83.4% {
        transform: translate3d(0, 0, 74px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.4% {
        opacity: 1
    }

    93.4%,
    100% {
        transform: translate3d(-300px, 50px, -120px) scale(.12) rotate(249deg);
        opacity: 0
    }
}

.it5 {
    left: 852px;
    top: 262px;
    width: 336px;
    height: 336px;
    animation: b5 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b6 {

    0%,
    9.4% {
        transform: translate3d(-5px, 360px, -120px) scale(.12) rotate(146deg);
        opacity: 0
    }

    12.4% {
        opacity: 1
    }

    25.4%,
    83.6% {
        transform: translate3d(0, 0, 148px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.6% {
        opacity: 1
    }

    93.6%,
    100% {
        transform: translate3d(-5px, 360px, -120px) scale(.12) rotate(-146deg);
        opacity: 0
    }
}

.it6 {
    left: 587px;
    top: -18px;
    width: 276px;
    height: 276px;
    animation: b6 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b7 {

    0%,
    9.5% {
        transform: translate3d(328px, 175px, -120px) scale(.12) rotate(142deg);
        opacity: 0
    }

    12.5% {
        opacity: 1
    }

    25.5%,
    83.7% {
        transform: translate3d(0, 0, 88px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.7% {
        opacity: 1
    }

    93.7%,
    100% {
        transform: translate3d(328px, 175px, -120px) scale(.12) rotate(-142deg);
        opacity: 0
    }
}

.it7 {
    left: 250px;
    top: 162px;
    width: 285px;
    height: 285px;
    animation: b7 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b8 {

    0%,
    9.4% {
        transform: translate3d(-320px, 162px, -120px) scale(.12) rotate(207deg);
        opacity: 0
    }

    12.4% {
        opacity: 1
    }

    25.4%,
    83.6% {
        transform: translate3d(0, 0, 110px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.6% {
        opacity: 1
    }

    93.6%,
    100% {
        transform: translate3d(-320px, 162px, -120px) scale(.12) rotate(-207deg);
        opacity: 0
    }
}

.it8 {
    left: 898px;
    top: 176px;
    width: 285px;
    height: 285px;
    animation: b8 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b9 {

    0%,
    11.4% {
        transform: translate3d(585px, 310px, -120px) scale(.12) rotate(134deg);
        opacity: 0
    }

    14.4% {
        opacity: 1
    }

    27.4%,
    84.9% {
        transform: translate3d(0, 0, 60px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.9% {
        opacity: 1
    }

    94.9%,
    100% {
        transform: translate3d(585px, 310px, -120px) scale(.12) rotate(-134deg);
        opacity: 0
    }
}

.it9 {
    left: 8px;
    top: 42px;
    width: 255px;
    height: 255px;
    animation: b9 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b10 {

    0%,
    11.5% {
        transform: translate3d(-610px, 305px, -120px) scale(.12) rotate(-180deg);
        opacity: 0
    }

    14.5% {
        opacity: 1
    }

    27.5%,
    85.0% {
        transform: translate3d(0, 0, 77px) scale(1) rotate(0deg);
        opacity: 1
    }

    93.0% {
        opacity: 1
    }

    95.0%,
    100% {
        transform: translate3d(-610px, 305px, -120px) scale(.12) rotate(180deg);
        opacity: 0
    }
}

.it10 {
    left: 1202px;
    top: 48px;
    width: 255px;
    height: 255px;
    animation: b10 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b11 {

    0%,
    9.6% {
        transform: translate3d(375px, -110px, -120px) scale(.12) rotate(-272deg);
        opacity: 0
    }

    12.6% {
        opacity: 1
    }

    25.6%,
    83.7% {
        transform: translate3d(0, 0, 48px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.7% {
        opacity: 1
    }

    93.7%,
    100% {
        transform: translate3d(375px, -110px, -120px) scale(.12) rotate(272deg);
        opacity: 0
    }
}

.it11 {
    left: 195px;
    top: 440px;
    width: 300px;
    height: 300px;
    animation: b11 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b12 {

    0%,
    9.6% {
        transform: translate3d(-375px, -110px, -120px) scale(.12) rotate(-171deg);
        opacity: 0
    }

    12.6% {
        opacity: 1
    }

    25.6%,
    83.7% {
        transform: translate3d(0, 0, 14px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.7% {
        opacity: 1
    }

    93.7%,
    100% {
        transform: translate3d(-375px, -110px, -120px) scale(.12) rotate(171deg);
        opacity: 0
    }
}

.it12 {
    left: 952px;
    top: 448px;
    width: 285px;
    height: 285px;
    animation: b12 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b13 {

    0%,
    10.6% {
        transform: translate3d(530px, -80px, -120px) scale(.12) rotate(-258deg);
        opacity: 0
    }

    13.6% {
        opacity: 1
    }

    26.6%,
    84.4% {
        transform: translate3d(0, 0, -50px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.4% {
        opacity: 1
    }

    94.4%,
    100% {
        transform: translate3d(530px, -80px, -120px) scale(.12) rotate(258deg);
        opacity: 0
    }
}

.it13 {
    left: 55px;
    top: 425px;
    width: 270px;
    height: 270px;
    animation: b13 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b14 {

    0%,
    10.6% {
        transform: translate3d(-540px, -80px, -120px) scale(.12) rotate(257deg);
        opacity: 0
    }

    13.6% {
        opacity: 1
    }

    26.6%,
    84.4% {
        transform: translate3d(0, 0, 13px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.4% {
        opacity: 1
    }

    94.4%,
    100% {
        transform: translate3d(-540px, -80px, -120px) scale(.12) rotate(-257deg);
        opacity: 0
    }
}

.it14 {
    left: 1132px;
    top: 432px;
    width: 255px;
    height: 255px;
    animation: b14 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b15 {

    0%,
    9.9% {
        transform: translate3d(145px, 410px, -120px) scale(.12) rotate(-283deg);
        opacity: 0
    }

    12.9% {
        opacity: 1
    }

    25.9%,
    83.9% {
        transform: translate3d(0, 0, -10px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.9% {
        opacity: 1
    }

    93.9%,
    100% {
        transform: translate3d(145px, 410px, -120px) scale(.12) rotate(283deg);
        opacity: 0
    }
}

.it15 {
    left: 448px;
    top: -58px;
    width: 255px;
    height: 255px;
    animation: b15 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b16 {

    0%,
    9.6% {
        transform: translate3d(255px, 290px, -120px) scale(.12) rotate(-275deg);
        opacity: 0
    }

    12.6% {
        opacity: 1
    }

    25.6%,
    83.7% {
        transform: translate3d(0, 0, -42px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.7% {
        opacity: 1
    }

    93.7%,
    100% {
        transform: translate3d(255px, 290px, -120px) scale(.12) rotate(275deg);
        opacity: 0
    }
}

.it16 {
    left: 315px;
    top: 40px;
    width: 300px;
    height: 300px;
    animation: b16 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b17 {

    0%,
    10.0% {
        transform: translate3d(-265px, 370px, -120px) scale(.12) rotate(262deg);
        opacity: 0
    }

    13.0% {
        opacity: 1
    }

    26.0%,
    84.0% {
        transform: translate3d(0, 0, -54px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.0% {
        opacity: 1
    }

    94.0%,
    100% {
        transform: translate3d(-265px, 370px, -120px) scale(.12) rotate(-262deg);
        opacity: 0
    }
}

.it17 {
    left: 850px;
    top: -25px;
    width: 270px;
    height: 270px;
    animation: b17 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b18 {

    0%,
    10.3% {
        transform: translate3d(420px, 272px, -120px) scale(.12) rotate(267deg);
        opacity: 0
    }

    13.3% {
        opacity: 1
    }

    26.3%,
    84.2% {
        transform: translate3d(0, 0, -204px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.2% {
        opacity: 1
    }

    94.2%,
    100% {
        transform: translate3d(420px, 272px, -120px) scale(.12) rotate(-267deg);
        opacity: 0
    }
}

.it18 {
    left: 180px;
    top: 88px;
    width: 240px;
    height: 240px;
    animation: b18 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b19 {

    0%,
    10.0% {
        transform: translate3d(-365px, 275px, -120px) scale(.12) rotate(-161deg);
        opacity: 0
    }

    13.0% {
        opacity: 1
    }

    26.0%,
    84.0% {
        transform: translate3d(0, 0, -74px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.0% {
        opacity: 1
    }

    94.0%,
    100% {
        transform: translate3d(-365px, 275px, -120px) scale(.12) rotate(161deg);
        opacity: 0
    }
}

.it19 {
    left: 965px;
    top: 85px;
    width: 240px;
    height: 240px;
    animation: b19 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b20 {

    0%,
    11.5% {
        transform: translate3d(660px, 120px, -120px) scale(.12) rotate(-208deg);
        opacity: 0
    }

    14.5% {
        opacity: 1
    }

    27.5%,
    85.0% {
        transform: translate3d(0, 0, -93px) scale(1) rotate(0deg);
        opacity: 1
    }

    93.0% {
        opacity: 1
    }

    95.0%,
    100% {
        transform: translate3d(660px, 120px, -120px) scale(.12) rotate(208deg);
        opacity: 0
    }
}

.it20 {
    left: -68px;
    top: 232px;
    width: 255px;
    height: 255px;
    animation: b20 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b21 {

    0%,
    11.5% {
        transform: translate3d(-670px, 100px, -120px) scale(.12) rotate(235deg);
        opacity: 0
    }

    14.5% {
        opacity: 1
    }

    27.5%,
    85.0% {
        transform: translate3d(0, 0, 19px) scale(1) rotate(0deg);
        opacity: 1
    }

    93.0% {
        opacity: 1
    }

    95.0%,
    100% {
        transform: translate3d(-670px, 100px, -120px) scale(.12) rotate(-235deg);
        opacity: 0
    }
}

.it21 {
    left: 1270px;
    top: 260px;
    width: 240px;
    height: 240px;
    animation: b21 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b22 {

    0%,
    9.8% {
        transform: translate3d(-100px, 410px, -120px) scale(.12) rotate(-217deg);
        opacity: 0
    }

    12.8% {
        opacity: 1
    }

    25.8%,
    83.9% {
        transform: translate3d(0, 0, 14px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.9% {
        opacity: 1
    }

    93.9%,
    100% {
        transform: translate3d(-100px, 410px, -120px) scale(.12) rotate(217deg);
        opacity: 0
    }
}

.it22 {
    left: 685px;
    top: -65px;
    width: 270px;
    height: 270px;
    animation: b22 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b23 {

    0%,
    10.3% {
        transform: translate3d(250px, 420px, -120px) scale(.12) rotate(-174deg);
        opacity: 0
    }

    13.3% {
        opacity: 1
    }

    26.3%,
    84.2% {
        transform: translate3d(0, 0, -59px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.2% {
        opacity: 1
    }

    94.2%,
    100% {
        transform: translate3d(250px, 420px, -120px) scale(.12) rotate(174deg);
        opacity: 0
    }
}

.it23 {
    left: 342px;
    top: -68px;
    width: 255px;
    height: 255px;
    animation: b23 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b24 {

    0%,
    11.3% {
        transform: translate3d(-515px, 385px, -120px) scale(.12) rotate(-198deg);
        opacity: 0
    }

    14.3% {
        opacity: 1
    }

    27.3%,
    84.9% {
        transform: translate3d(0, 0, -114px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.9% {
        opacity: 1
    }

    94.9%,
    100% {
        transform: translate3d(-515px, 385px, -120px) scale(.12) rotate(198deg);
        opacity: 0
    }
}

.it24 {
    left: 1115px;
    top: -25px;
    width: 240px;
    height: 240px;
    animation: b24 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b25 {

    0%,
    10.6% {
        transform: translate3d(535px, 20px, -120px) scale(.12) rotate(-126deg);
        opacity: 0
    }

    13.6% {
        opacity: 1
    }

    26.6%,
    84.4% {
        transform: translate3d(0, 0, -16px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.4% {
        opacity: 1
    }

    94.4%,
    100% {
        transform: translate3d(535px, 20px, -120px) scale(.12) rotate(126deg);
        opacity: 0
    }
}

.it25 {
    left: 50px;
    top: 325px;
    width: 270px;
    height: 270px;
    animation: b25 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b26 {

    0%,
    9.1% {
        transform: translate3d(65px, 305px, -120px) scale(.12) rotate(208deg);
        opacity: 0
    }

    12.1% {
        opacity: 1
    }

    25.1%,
    83.4% {
        transform: translate3d(0, 0, -61px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.4% {
        opacity: 1
    }

    93.4%,
    100% {
        transform: translate3d(65px, 305px, -120px) scale(.12) rotate(-208deg);
        opacity: 0
    }
}

.it26 {
    left: 535px;
    top: 55px;
    width: 240px;
    height: 240px;
    animation: b26 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b27 {

    0%,
    11.0% {
        transform: translate3d(-600px, 10px, -120px) scale(.12) rotate(-228deg);
        opacity: 0
    }

    14.0% {
        opacity: 1
    }

    27.0%,
    84.7% {
        transform: translate3d(0, 0, 9px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.7% {
        opacity: 1
    }

    94.7%,
    100% {
        transform: translate3d(-600px, 10px, -120px) scale(.12) rotate(228deg);
        opacity: 0
    }
}

.it27 {
    left: 1185px;
    top: 335px;
    width: 270px;
    height: 270px;
    animation: b27 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b28 {

    0%,
    11.5% {
        transform: translate3d(640px, 230px, -120px) scale(.12) rotate(263deg);
        opacity: 0
    }

    14.5% {
        opacity: 1
    }

    27.5%,
    85.0% {
        transform: translate3d(0, 0, -75px) scale(1) rotate(0deg);
        opacity: 1
    }

    93.0% {
        opacity: 1
    }

    95.0%,
    100% {
        transform: translate3d(640px, 230px, -120px) scale(.12) rotate(-263deg);
        opacity: 0
    }
}

.it28 {
    left: -55px;
    top: 115px;
    width: 270px;
    height: 270px;
    animation: b28 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b29 {

    0%,
    10.5% {
        transform: translate3d(365px, 385px, -120px) scale(.12) rotate(-297deg);
        opacity: 0
    }

    13.5% {
        opacity: 1
    }

    26.5%,
    84.4% {
        transform: translate3d(0, 0, -132px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.4% {
        opacity: 1
    }

    94.4%,
    100% {
        transform: translate3d(365px, 385px, -120px) scale(.12) rotate(297deg);
        opacity: 0
    }
}

.it29 {
    left: 235px;
    top: -25px;
    width: 240px;
    height: 240px;
    animation: b29 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b30 {

    0%,
    11.3% {
        transform: translate3d(-460px, 450px, -120px) scale(.12) rotate(162deg);
        opacity: 0
    }

    14.3% {
        opacity: 1
    }

    27.3%,
    84.9% {
        transform: translate3d(0, 0, -192px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.9% {
        opacity: 1
    }

    94.9%,
    100% {
        transform: translate3d(-460px, 450px, -120px) scale(.12) rotate(-162deg);
        opacity: 0
    }
}

.it30 {
    left: 1068px;
    top: -82px;
    width: 225px;
    height: 225px;
    animation: b30 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b31 {

    0%,
    11.4% {
        transform: translate3d(510px, 410px, -120px) scale(.12) rotate(-135deg);
        opacity: 0
    }

    14.4% {
        opacity: 1
    }

    27.4%,
    84.9% {
        transform: translate3d(0, 0, -274px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.9% {
        opacity: 1
    }

    94.9%,
    100% {
        transform: translate3d(510px, 410px, -120px) scale(.12) rotate(135deg);
        opacity: 0
    }
}

.it31 {
    left: 98px;
    top: -42px;
    width: 225px;
    height: 225px;
    animation: b31 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b32 {

    0%,
    10.1% {
        transform: translate3d(-210px, 420px, -120px) scale(.12) rotate(276deg);
        opacity: 0
    }

    13.1% {
        opacity: 1
    }

    26.1%,
    84.1% {
        transform: translate3d(0, 0, -81px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.1% {
        opacity: 1
    }

    94.1%,
    100% {
        transform: translate3d(-210px, 420px, -120px) scale(.12) rotate(-276deg);
        opacity: 0
    }
}

.it32 {
    left: 802px;
    top: -68px;
    width: 255px;
    height: 255px;
    animation: b32 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b33 {

    0%,
    9.8% {
        transform: translate3d(420px, 0px, -120px) scale(.12) rotate(156deg);
        opacity: 0
    }

    12.8% {
        opacity: 1
    }

    25.8%,
    83.9% {
        transform: translate3d(0, 0, -99px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.9% {
        opacity: 1
    }

    93.9%,
    100% {
        transform: translate3d(420px, 0px, -120px) scale(.12) rotate(-156deg);
        opacity: 0
    }
}

.it33 {
    left: 180px;
    top: 360px;
    width: 240px;
    height: 240px;
    animation: b33 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b34 {

    0%,
    11.4% {
        transform: translate3d(-630px, 200px, -120px) scale(.12) rotate(-262deg);
        opacity: 0
    }

    14.4% {
        opacity: 1
    }

    27.4%,
    84.9% {
        transform: translate3d(0, 0, -210px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.9% {
        opacity: 1
    }

    94.9%,
    100% {
        transform: translate3d(-630px, 200px, -120px) scale(.12) rotate(262deg);
        opacity: 0
    }
}

.it34 {
    left: 1230px;
    top: 160px;
    width: 240px;
    height: 240px;
    animation: b34 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b35 {

    0%,
    11.0% {
        transform: translate3d(605px, 10px, -120px) scale(.12) rotate(235deg);
        opacity: 0
    }

    14.0% {
        opacity: 1
    }

    27.0%,
    84.7% {
        transform: translate3d(0, 0, -247px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.7% {
        opacity: 1
    }

    94.7%,
    100% {
        transform: translate3d(605px, 10px, -120px) scale(.12) rotate(-235deg);
        opacity: 0
    }
}

.it35 {
    left: -12px;
    top: 342px;
    width: 255px;
    height: 255px;
    animation: b35 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b36 {

    0%,
    12.1% {
        transform: translate3d(680px, 360px, -120px) scale(.12) rotate(-289deg);
        opacity: 0
    }

    15.1% {
        opacity: 1
    }

    28.1%,
    85.4% {
        transform: translate3d(0, 0, -84px) scale(1) rotate(0deg);
        opacity: 1
    }

    93.4% {
        opacity: 1
    }

    95.4%,
    100% {
        transform: translate3d(680px, 360px, -120px) scale(.12) rotate(289deg);
        opacity: 0
    }
}

.it36 {
    left: -80px;
    top: 0px;
    width: 240px;
    height: 240px;
    animation: b36 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b37 {

    0%,
    11.7% {
        transform: translate3d(-700px, -80px, -120px) scale(.12) rotate(145deg);
        opacity: 0
    }

    14.7% {
        opacity: 1
    }

    27.7%,
    85.1% {
        transform: translate3d(0, 0, -27px) scale(1) rotate(0deg);
        opacity: 1
    }

    93.1% {
        opacity: 1
    }

    95.1%,
    100% {
        transform: translate3d(-700px, -80px, -120px) scale(.12) rotate(-145deg);
        opacity: 0
    }
}

.it37 {
    left: 1308px;
    top: 448px;
    width: 225px;
    height: 225px;
    animation: b37 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b38 {

    0%,
    9.9% {
        transform: translate3d(-430px, 0px, -120px) scale(.12) rotate(-281deg);
        opacity: 0
    }

    12.9% {
        opacity: 1
    }

    25.9%,
    83.9% {
        transform: translate3d(0, 0, -215px) scale(1) rotate(0deg);
        opacity: 1
    }

    91.9% {
        opacity: 1
    }

    93.9%,
    100% {
        transform: translate3d(-430px, 0px, -120px) scale(.12) rotate(281deg);
        opacity: 0
    }
}

.it38 {
    left: 1008px;
    top: 338px;
    width: 285px;
    height: 285px;
    animation: b38 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b39 {

    0%,
    10.0% {
        transform: translate3d(440px, -120px, -120px) scale(.12) rotate(-171deg);
        opacity: 0
    }

    13.0% {
        opacity: 1
    }

    26.0%,
    84.0% {
        transform: translate3d(0, 0, -167px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.0% {
        opacity: 1
    }

    94.0%,
    100% {
        transform: translate3d(440px, -120px, -120px) scale(.12) rotate(171deg);
        opacity: 0
    }
}

.it39 {
    left: 145px;
    top: 465px;
    width: 270px;
    height: 270px;
    animation: b39 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b40 {

    0%,
    12.2% {
        transform: translate3d(-680px, 390px, -120px) scale(.12) rotate(141deg);
        opacity: 0
    }

    15.2% {
        opacity: 1
    }

    28.2%,
    85.5% {
        transform: translate3d(0, 0, 6px) scale(1) rotate(0deg);
        opacity: 1
    }

    93.5% {
        opacity: 1
    }

    95.5%,
    100% {
        transform: translate3d(-680px, 390px, -120px) scale(.12) rotate(-141deg);
        opacity: 0
    }
}

.it40 {
    left: 1280px;
    top: -30px;
    width: 240px;
    height: 240px;
    animation: b40 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b41 {

    0%,
    11.6% {
        transform: translate3d(680px, -100px, -120px) scale(.12) rotate(-286deg);
        opacity: 0
    }

    14.6% {
        opacity: 1
    }

    27.6%,
    85.1% {
        transform: translate3d(0, 0, -146px) scale(1) rotate(0deg);
        opacity: 1
    }

    93.1% {
        opacity: 1
    }

    95.1%,
    100% {
        transform: translate3d(680px, -100px, -120px) scale(.12) rotate(286deg);
        opacity: 0
    }
}

.it41 {
    left: -88px;
    top: 452px;
    width: 255px;
    height: 255px;
    animation: b41 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b42 {

    0%,
    11.0% {
        transform: translate3d(-545px, 250px, -120px) scale(.12) rotate(259deg);
        opacity: 0
    }

    14.0% {
        opacity: 1
    }

    27.0%,
    84.7% {
        transform: translate3d(0, 0, 19px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.7% {
        opacity: 1
    }

    94.7%,
    100% {
        transform: translate3d(-545px, 250px, -120px) scale(.12) rotate(-259deg);
        opacity: 0
    }
}

.it42 {
    left: 1145px;
    top: 110px;
    width: 240px;
    height: 240px;
    animation: b42 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b43 {

    0%,
    10.6% {
        transform: translate3d(-340px, 420px, -120px) scale(.12) rotate(-284deg);
        opacity: 0
    }

    13.6% {
        opacity: 1
    }

    26.6%,
    84.4% {
        transform: translate3d(0, 0, -5px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.4% {
        opacity: 1
    }

    94.4%,
    100% {
        transform: translate3d(-340px, 420px, -120px) scale(.12) rotate(284deg);
        opacity: 0
    }
}

.it43 {
    left: 948px;
    top: -52px;
    width: 225px;
    height: 225px;
    animation: b43 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@keyframes b44 {

    0%,
    11.0% {
        transform: translate3d(570px, 180px, -120px) scale(.12) rotate(-177deg);
        opacity: 0
    }

    14.0% {
        opacity: 1
    }

    27.0%,
    84.7% {
        transform: translate3d(0, 0, -127px) scale(1) rotate(0deg);
        opacity: 1
    }

    92.7% {
        opacity: 1
    }

    94.7%,
    100% {
        transform: translate3d(570px, 180px, -120px) scale(.12) rotate(177deg);
        opacity: 0
    }
}

.it44 {
    left: 45px;
    top: 195px;
    width: 210px;
    height: 210px;
    animation: b44 10s cubic-bezier(.22, .9, .28, 1) infinite
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .it {
        animation: none !important;
        opacity: 1 !important
    }
}

.brands {
    position: relative;
    z-index: 1;
    background: #FFF8EE;
    color: #2E1A12;
    padding: 34px 0 30px;
    overflow: hidden;
    scroll-snap-align: end
}

.brands-h {
    max-width: 1440px;
    margin: 0 auto 20px;
    padding: 0 clamp(16px, 4.4vw, 64px);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 20px;
    flex-wrap: wrap
}

.brands-h h2 {
    margin: 0;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 900;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: #9B1C0B
}

.brands-h p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #6B5A50
}

.bwrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
}

.btrack {
    display: flex;
    gap: 18px;
    width: max-content;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    animation: mqL 36s linear infinite
}

.bwrap:hover .btrack,
.bwrap:focus-within .btrack {
    animation-play-state: paused
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 84px;
    padding: 0 28px 0 16px;
    border-radius: 22px;
    background: #fff;
    border: 1.5px dashed #E8D5C4;
    box-shadow: 0 10px 24px -18px rgba(155, 28, 11, .45);
    transition: transform .25s
}

.brand:hover {
    transform: translateY(-3px)
}

.mono {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -.02em
}

.bn {
    font-weight: 800;
    font-size: 18px;
    white-space: nowrap;
    color: #2E1A12
}

@media (max-width:600px) {
    .brands {
        padding: 24px 0 22px
    }

    .brand {
        height: 66px;
        padding: 0 20px 0 12px;
        border-radius: 18px
    }

    .mono {
        width: 42px;
        height: 42px;
        font-size: 15px;
        border-radius: 13px
    }

    .bn {
        font-size: 15px
    }
}

@media (prefers-reduced-motion:reduce) {
    .btrack {
        animation: none;
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
        padding: 6px 16px
    }

    .btrack [aria-hidden] {
        display: none
    }
}

.brand {
    position: relative
}

.excl {
    position: absolute;
    top: -9px;
    right: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #9B1C0B;
    color: #FEC731;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px -4px rgba(155, 28, 11, .6)
}

.brand:has(.excl) {
    border: 1.5px solid #FEC731;
    background: linear-gradient(180deg, #FFFDF5, #fff)
}

.btrack {
    padding-top: 14px !important
}

\n .sd-guard {}

.nav .nav-soon {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    cursor: not-allowed;
    user-select: none;
    white-space: nowrap;
    flex: none
}

.nav .nav-soon i {
    font-style: normal;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--sun);
    color: var(--brick)
}

@media (min-width:821px) and (max-width:1024px) {
    .nav .nav-soon {
        font-size: 12px;
        letter-spacing: .03em
    }
}

@media (max-width:820px) {
    .nav .nav-soon {
        min-height: 38px;
        font-size: 11px;
        letter-spacing: .03em
    }

    .nav .nav-soon i {
        font-size: 8px;
        padding: 2px 5px
    }
}

.foot-soon {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    opacity: .6;
    cursor: not-allowed
}

.hl-soon,
.hl-soon:hover {
    background: #9BAA9D !important;
    transform: none !important;
    cursor: not-allowed
}