@font-face {
    font-family: Unbounded Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(./unbounded-cyrillic-ext-wght-normal-2qyXmZWE.woff2) format("woff2-variations");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: Unbounded Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(./unbounded-cyrillic-wght-normal-C627f1f8.woff2) format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}

@font-face {
    font-family: Unbounded Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(./unbounded-vietnamese-wght-normal-rat7GD3o.woff2) format("woff2-variations");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: Unbounded Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(./unbounded-latin-ext-wght-normal-D6H-S6MW.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Unbounded Variable;
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(./unbounded-latin-wght-normal-D5afBTBx.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

:root {
    --c-purple: #8757d7;
    --c-purple-2: #8a50e9;
    --c-violet: #6e14d9;
    --c-violet-ink: #4a1499;
    --c-lime: #dbff00;
    --c-lime-deep: #9ab800;
    --c-lavender: #c9b2f2;
    --c-lilac: #efe7fd;
    --c-accent: var(--c-lime);
    --c-primary: var(--c-purple);
    --c-ink: #14121c;
    --c-night: #1a1a24;
    --c-bg: #ffffff;
    --c-card: #ffffff;
    --c-line: rgba(20, 18, 28, .1);
    --c-grey-800: #2b2836;
    --c-grey-400: #5d5970;
    --c-grey-200: #9a96aa;
    --g-heading: linear-gradient(90deg, var(--c-purple-2) 0%, var(--c-violet-ink) 100%);
    --g-heading-light: linear-gradient(90deg, #fff 0%, var(--c-lime) 100%);
    --g-card: linear-gradient(135deg, var(--c-purple) 0%, #fff 50%, var(--c-lime) 100%);
    --g-card-soft: radial-gradient(70% 90% at 92% 40%, rgba(219, 255, 0, .95), rgba(219, 255, 0, 0) 70%), radial-gradient(80% 120% at 0% 0%, rgba(150, 100, 235, .55), rgba(150, 100, 235, 0) 70%), linear-gradient(180deg, #fbfaff, #f3f0fb);
    --g-dark: linear-gradient(180deg, #0c0b12 0%, #191527 45%, #2d1c55 100%);
    --g-night: linear-gradient(160deg, var(--c-night) 0%, #3a2c63 60%, #8a64c9 130%);
    --font: "Unbounded Variable", "Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-display: clamp(3rem, 11vw, 12rem);
    --fs-h2: clamp(1.55rem, 1rem + 2.6vw, 4rem);
    --fs-h3: clamp(1.15rem, .9rem + 1vw, 2.2rem);
    --fs-eyebrow: clamp(.85rem, .7rem + .5vw, 1.5625rem);
    --fs-lead: clamp(1rem, .82rem + .62vw, 1.75rem);
    --fs-body: clamp(.95rem, .85rem + .3vw, 1.2rem);
    --fs-small: clamp(.78rem, .72rem + .18vw, .95rem);
    --lh-tight: 1.15;
    --lh-body: 1.55;
    --container: 1660px;
    --gutter: clamp(16px, 5vw, 132px);
    --section-y: clamp(72px, 8vw, 170px);
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: clamp(22px, 2.4vw, 40px);
    --radius-xl: clamp(26px, 2.8vw, 50px);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --shadow-card: 0 30px 70px -30px rgba(50, 20, 110, .45);
    --shadow-soft: 0 18px 50px -20px rgba(50, 20, 110, .35)
}

*,
*:before,
*:after {
    box-sizing: border-box
}

html,
body {
    margin: 0
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip
}

html.lenis,
html.lenis body {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important
}

.lenis.lenis-stopped {
    overflow: hidden
}

body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--c-grey-800);
    background: var(--c-bg);
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip
}

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

h1,
h2,
h3,
h4,
p {
    margin: 0
}

h1,
h2,
h3,
.h2,
.h3 {
    overflow-wrap: normal;
    word-break: normal;
    -webkit-hyphens: manual;
    hyphens: manual
}

@media(min-width:761px) {
    .only-mobile {
        display: none !important
    }
}

@media(max-width:760px) {
    .only-desktop {
        display: none !important
    }
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer
}

::selection {
    background: var(--c-lime);
    color: var(--c-ink)
}

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto
}

.section {
    position: relative;
    padding-block: var(--section-y)
}

.section--tight {
    padding-block: calc(var(--section-y) * .6)
}

.center {
    text-align: center
}

.stack>*+* {
    margin-top: var(--stack, 1rem)
}

.eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    color: var(--c-ink);
    letter-spacing: 0;
    margin-bottom: .5em
}

.eyebrow--accent {
    color: var(--c-accent)
}

.h2 {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    color: var(--c-ink);
    text-wrap: balance
}

.h3 {
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.25;
    color: var(--c-ink);
    text-wrap: balance
}

.lead {
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.5;
    color: var(--c-grey-800);
    max-width: 52ch;
    text-wrap: pretty
}

.center .lead {
    margin-inline: auto
}

.small {
    font-size: var(--fs-small);
    color: var(--c-grey-400)
}

.grad-text {
    background: var(--g-heading);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.grad-text--light {
    background-image: var(--g-heading-light)
}

.grad-text * {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.glow {
    position: absolute;
    width: var(--size, 60vw);
    aspect-ratio: 1 / 1.4;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--glow-color, rgba(170, 220, 0, .5)), transparent);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0
}

.section>.container {
    position: relative;
    z-index: 1
}

.card {
    background: var(--c-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card)
}

.media {
    border-radius: var(--radius-lg);
    overflow: hidden
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .45em 1.1em;
    border-radius: 999px;
    font-size: var(--fs-body);
    background: #0003;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px)
}

.has-motion [data-reveal],
.has-motion [data-stagger]>* {
    opacity: 0
}

.has-motion [data-split] {
    visibility: hidden
}

.word-mask {
    padding-bottom: .24em;
    margin-bottom: -.24em
}

.grad-text .word,
.grad-text .char {
    padding-block: .06em .24em;
    margin-block: -.06em -.24em
}

.grad-text {
    padding-bottom: .12em;
    margin-bottom: -.12em
}

[data-parallax],
[data-marquee] {
    will-change: transform
}

[data-tilt] {
    transform-style: preserve-3d;
    will-change: transform
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 4px
}

@media(prefers-reduced-motion:reduce) {

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

:root {
    --hero-bg: var(--g-dark);
    --hero-fg: #fff;
    --hero-muted: rgba(255, 255, 255, .74);
    --hero-rule: rgba(255, 255, 255, .22);
    --hero-accent: var(--c-lime);
    --hero-accent-text: linear-gradient(95deg, #c9b2ff 0%, #e9f78a 55%, var(--c-lime) 100%);
    --hero-glow: radial-gradient(closest-side, rgba(138, 80, 233, .45), rgba(219, 255, 0, .12) 50%, transparent 70%);
    --hero-reveal: linear-gradient(180deg, #2a1b4d 0%, var(--c-purple-2) 100%);
    --hero-faint: rgba(255, 255, 255, .55);
    --hero-device-mask: none;
    --hero-title-size: clamp(2.75rem, min(13.5vw, 20vh), 15rem);
    --hero-top-reserve: calc(64px + env(safe-area-inset-top, 0px));
    --hero-bottom-reserve: clamp(88px, 12vh, 130px)
}

.hero {
    position: relative;
    height: 100vh;
    height: 100svh
}

.has-motion .hero {
    height: 260vh
}

.hero__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    color: var(--hero-fg)
}

.hero__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--hero-bg);
    background-size: 140% 140%
}

.hero__glow {
    position: absolute;
    width: 70vmax;
    aspect-ratio: 1;
    left: 0;
    top: 0;
    background: var(--hero-glow);
    filter: blur(20px);
    pointer-events: none
}

.hero__grain {
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    opacity: .12;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.hero__light {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--hero-reveal);
    clip-path: inset(100% 0 0 0)
}

.hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: clamp(12px, min(2.2vw, 3.2vh), 36px);
    padding-block: var(--hero-top-reserve) var(--hero-bottom-reserve);
    text-align: center;
    overflow: hidden
}

.hero__content>* {
    max-width: 100%;
    min-width: 0
}

.hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5em 1.4em;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--hero-muted)
}

.hero__eyebrow span+span:before {
    content: "•";
    margin-right: 1.4em;
    color: var(--hero-accent)
}

.hero__title {
    font-size: var(--hero-title-size);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-wrap: balance
}

.hero__line {
    display: block;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap
}

.hero__line--accent {
    background: var(--hero-accent-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero__line--accent * {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero__title .char-mask {
    padding: .14em .16em .2em;
    margin: -.14em -.16em -.2em
}

.hero__title .char {
    padding: .06em .12em .2em;
    margin: -.06em -.12em -.2em
}

.hero__line--accent {
    padding-inline: .06em
}

.hero__tagline {
    max-width: 36ch;
    margin-inline: auto;
    font-size: clamp(1rem, min(1.5vw, 2.4vh), 1.6rem);
    font-weight: 300;
    line-height: 1.45;
    color: var(--hero-muted);
    text-wrap: balance
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px clamp(20px, 3.5vw, 64px);
    margin: clamp(4px, 1.2vh, 20px) 0 0
}

.hero__meta div {
    min-width: 7.5em;
    border-top: 1px solid var(--hero-rule);
    padding-top: 10px
}

.hero__meta dt {
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hero-faint)
}

.hero__meta dd {
    margin: 4px 0 0;
    font-size: var(--fs-small);
    font-weight: 500
}

.hero__caption {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: clamp(84px, 13vh, 150px);
    margin-inline: auto;
    max-width: 22ch;
    text-align: center;
    padding-inline: var(--gutter);
    text-wrap: balance;
    opacity: 0;
    pointer-events: none
}

.hero__device {
    position: absolute;
    z-index: 3;
    margin: 0;
    left: 50%;
    bottom: -16vh;
    width: min(70vw, 1500px, 92vh);
    translate: -50% 0;
    transform-origin: 50% 100%
}

.hero__device img {
    -webkit-mask-image: var(--hero-device-mask);
    mask-image: var(--hero-device-mask)
}

.hero__device--layers {
    aspect-ratio: var(--device-ratio, 1)
}

.hero__device--layers .hero__layer {
    position: absolute
}

.hero__props {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none
}

.hero__prop {
    position: absolute;
    width: var(--w, 10vw);
    left: var(--x);
    top: var(--y)
}

.hero__prop img {
    width: 100%;
    height: auto
}

.hero__cue {
    position: absolute;
    z-index: 4;
    left: 50%;
    translate: -50% 0;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--hero-muted)
}

.hero__cue i {
    width: 1px;
    height: clamp(24px, 5vh, 48px);
    background: linear-gradient(var(--hero-fg), transparent);
    animation: cue 1.8s var(--ease-in-out) infinite;
    transform-origin: top
}

@keyframes cue {
    0% {
        transform: scaleY(0)
    }

    50% {
        transform: scaleY(1)
    }

    to {
        transform: scaleY(1);
        opacity: 0
    }
}

@media(max-width:420px) {
    .hero__eyebrow {
        letter-spacing: .12em;
        gap: .4em 1em;
        font-size: .72rem
    }

    .hero__eyebrow span+span:before {
        margin-right: 1em
    }
}

@media(max-height:560px) {
    .hero__meta {
        display: none
    }

    :root {
        --hero-bottom-reserve: 56px
    }
}

@media(max-height:420px) {

    .hero__tagline,
    .hero__cue span {
        display: none
    }
}

@media(max-width:760px)and (orientation:portrait) {
    .hero__device {
        width: 104vw;
        bottom: 16vh
    }

    .hero__caption {
        top: 96px
    }

    .hero__meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 360px)
    }
}

html:not(.has-motion) .hero__caption,
html:not(.has-motion) .hero__device,
html:not(.has-motion) .hero__cue {
    display: none
}

@media(max-width:760px)and (orientation:portrait) {
    .hero__prop[data-hide-mobile] {
        display: none
    }
}

.progress {
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 60;
    pointer-events: none
}

.progress__bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--c-purple-2), var(--c-lime));
    transform-origin: 0 50%;
    transform: scaleX(0)
}

.topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter) 14px;
    font-size: var(--fs-small);
    color: #fff;
    transition: transform .45s var(--ease-out), background-color .3s, color .3s
}

.topbar.is-solid {
    background: #140e24b8;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px #ffffff14
}

.topbar.is-hidden {
    transform: translateY(-101%)
}

.topbar__left {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.6vw, 28px);
    min-width: 0
}

.topbar__brand img {
    height: clamp(26px, 2.4vw, 36px);
    width: auto
}

.topbar__meta {
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.topbar__close {
    display: grid;
    place-items: center;
    width: clamp(38px, 2.8vw, 46px);
    aspect-ratio: 1;
    border-radius: 50%;
    color: #fff;
    transition: color .25s, background-color .25s, transform .35s var(--ease-out)
}

.topbar__close svg {
    width: 100%;
    height: 100%
}

.topbar__close:hover {
    color: var(--c-lime);
    transform: rotate(90deg)
}

.topbar__close:focus-visible {
    outline: 2px solid var(--c-lime);
    outline-offset: 3px
}

.topbar__by {
    justify-self: end;
    display: block
}

.topbar__by img {
    height: 50px;
    width: auto;
    transition: opacity .25s
}

.topbar__by:hover img {
    opacity: .75
}

@media(max-width:900px) {
    .topbar__meta {
        display: none
    }
}

.ico {
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none
}

.head {
    max-width: 1100px;
    margin-inline: auto
}

.head .lead {
    margin-top: clamp(16px, 1.6vw, 30px)
}

.eyebrow--lime {
    color: var(--c-lime)
}

.h2--light {
    color: #fff
}

.h2--light .grad-text,
.grad-text--light {
    background-image: var(--g-heading-light)
}

.center .h2 {
    max-width: 24ch;
    margin-inline: auto
}

.center .lead {
    margin-top: clamp(14px, 1.4vw, 28px)
}

.split-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 24px clamp(24px, 6vw, 140px);
    align-items: end
}

.split-head__copy {
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.45;
    color: #ffffffe0;
    max-width: 32ch
}

@media(max-width:860px) {
    .split-head {
        grid-template-columns: 1fr
    }
}

.hcard__ribbon,
.orbit__ribbon,
.feature__ribbon,
.insights__ribbon,
.solution__ribbon,
.finale__ribbon,
.tile__ribbon,
.trio__card svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round
}

.hcard__ribbon,
.orbit__ribbon,
.feature__ribbon,
.insights__ribbon {
    stroke-width: 44
}

.feature__ribbon--flip {
    transform: scaleX(-1)
}

.hero__stars,
.stars {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    opacity: .55;
    background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 46% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 82%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 78% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 91% 61%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 6% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 8%, #fff 50%, transparent 51%);
    background-size: 360px 360px;
    animation: drift 60s linear infinite
}

@keyframes drift {
    to {
        background-position: 0 -360px
    }
}

.hero__title {
    font-weight: 600
}

.hero__caption {
    top: clamp(76px, 9.5vh, 124px);
    max-width: 20ch;
    color: #fff
}

.hero__prop--avatar img {
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ffffffd9, 0 12px 30px -10px #0009
}

.hero__prop img {
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .35))
}

.hero__device--card {
    --device-ratio: 1804 / 1258;
    width: min(78vw, 1400px, 98vh);
    bottom: 2vh;
    container-type: inline-size
}

.hcard {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 79.9%;
    overflow: hidden;
    border-radius: 4.4cqw;
    background: radial-gradient(42% 70% at 84% 42%, #dbff00f2, #dbff0000 72%), radial-gradient(60% 90% at 6% 100%, #965ff0bf, #965ff000 70%), linear-gradient(160deg, #fff, #f1ecfb 55%, #f4f9dc);
    box-shadow: 0 40px 90px -40px #000000b3
}

.hcard__person {
    left: 27.5%;
    top: 6.4%;
    width: 46.6%;
    height: auto
}

.hchip {
    display: flex;
    align-items: center;
    gap: .7em;
    font-size: max(9px, .78cqw);
    color: #fff;
    line-height: 1.25;
    border-radius: .9em
}

.hchip--approved {
    left: 2.3%;
    top: 52.3%;
    min-width: 13.6%;
    white-space: nowrap;
    padding: .8em .9em;
    background: linear-gradient(135deg, #a77cf2, #7a3fe0);
    box-shadow: 0 .6em 0 -.15em #7a3fe059, 0 1.4em 2.4em -1em #461496b3
}

.hchip--approved img {
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%
}

.hchip--approved b {
    display: block;
    font-weight: 500
}

.hchip--approved small {
    font-size: .85em;
    opacity: .85
}

.hchip--earning {
    left: 19.8%;
    top: 87%;
    min-width: 11.4%;
    min-height: 6.7cqw;
    white-space: nowrap;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .15em;
    padding: .7em .8em;
    background: linear-gradient(160deg, #9b6cf0, #7840dc);
    box-shadow: 0 1.4em 2.4em -1em #461496b3;
    overflow: hidden
}

.hchip--earning small {
    font-size: .7em;
    opacity: .85
}

.hchip--earning b {
    font-weight: 500;
    font-size: 1.1em
}

.hchip--earning svg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 46%
}

.hchip__area {
    fill: #dbff0047
}

.hchip__line {
    fill: none;
    stroke: var(--c-lime);
    stroke-width: 2;
    vector-effect: non-scaling-stroke
}

@media(max-width:760px)and (orientation:portrait) {
    .hero__device--card {
        --device-ratio: 1 / 1.12;
        width: 100vw;
        bottom: 3vh
    }

    .hero__prop--ig {
        --x: 5% !important;
        --y: 9% !important
    }

    .hero__prop--tt {
        --x: 82% !important;
        --y: 8.5% !important
    }

    .hcard {
        height: 74%;
        border-radius: 9cqw 9cqw 0 0
    }

    .hcard__person {
        left: 12%;
        top: 0;
        width: 78%
    }

    .hchip {
        font-size: 2.7cqw
    }

    .hchip--approved {
        left: 3%;
        top: 56%;
        min-width: 46%
    }

    .hchip--earning {
        left: auto;
        right: 4%;
        top: 74%;
        min-width: 34%;
        min-height: 20cqw
    }
}

.overview {
    color: #fff;
    background: linear-gradient(180deg, var(--c-purple-2) 0%, #9a71ea 70%, #ab8ced 100%);
    overflow: hidden
}

.overview .container {
    position: relative;
    z-index: 1
}

.overview__title {
    font-size: clamp(1.4rem, 1rem + 1.6vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #fff
}

.overview__lead {
    max-width: 44ch;
    margin: clamp(16px, 2vw, 32px) auto 0;
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.5;
    color: #fff;
    text-wrap: balance
}

.modules {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: clamp(24px, 2.6vw, 44px) 0 0;
    padding: 0
}

.modules .pill {
    padding: .7em 1.4em;
    font-size: clamp(.85rem, .75rem + .4vw, 1.5rem);
    font-weight: 300
}

.brief {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: clamp(36px, 4vw, 72px) 0 0;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, .3)
}

.brief div {
    padding: clamp(14px, 1.4vw, 24px) clamp(10px, 1.2vw, 22px) 0 0
}

.brief div+div {
    padding-left: clamp(10px, 1.2vw, 22px);
    border-left: 1px solid rgba(255, 255, 255, .22)
}

.brief dt {
    font-size: clamp(.62rem, .55rem + .2vw, .8rem);
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .72
}

.brief dd {
    margin: .5em 0 0;
    font-size: clamp(.82rem, .7rem + .35vw, 1.15rem);
    font-weight: 400;
    line-height: 1.35
}

@media(max-width:760px) {
    .brief {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin-inline: calc(var(--gutter) * -1);
        padding: 0 var(--gutter) 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        border-top: 0
    }

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

    .brief div,
    .brief div+div {
        flex: 0 0 64%;
        scroll-snap-align: start;
        padding: 14px 16px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 16px;
        background: #ffffff1f
    }
}

.bridge {
    overflow: hidden;
    padding-bottom: clamp(60px, 6vw, 120px);
    background: linear-gradient(180deg, #ab8ced, #c9b4f2 22%, #f3eefc 48%, #fff 70%)
}

.bridge__title {
    max-width: 26ch
}

.orbit {
    --size: min(86vw, 1654px);
    position: relative;
    width: var(--size);
    aspect-ratio: 1;
    margin: calc(var(--size) * -.06) auto calc(var(--size) * .05);
    container-type: inline-size
}

.orbit__rings {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 7%, rgba(0, 0, 0, .25) 20%, rgba(0, 0, 0, .75) 34%, #000 46%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 7%, rgba(0, 0, 0, .25) 20%, rgba(0, 0, 0, .75) 34%, #000 46%)
}

.orbit__ring {
    fill: none;
    stroke: url(#ring-g);
    stroke-width: 3
}

.orbit__ring--inner {
    stroke-width: 4
}

.orbit__card {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 56.4cqw;
    aspect-ratio: 932 / 582;
    translate: -50% -50%;
    overflow: hidden;
    border-radius: 4.8cqw;
    background: radial-gradient(55% 90% at 85% 55%, #dbff00f2, #dbff0000 70%), linear-gradient(135deg, #fff 20%, #f6f8e2);
    box-shadow: 0 6cqw 12cqw -4cqw #5028a073
}

.orbit__ribbon {
    stroke-width: 40
}

.orbit__person {
    position: absolute;
    left: 4%;
    bottom: 0;
    width: 94%
}

.orbit__track {
    position: absolute;
    top: -8%;
    right: -8%;
    bottom: -8%;
    left: -8%;
    --spin: 0deg;
    pointer-events: none;
    padding: 8%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 13%, #000 25%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 13%, #000 25%)
}

.orbit__item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(calc(var(--a) + var(--spin))) translate(var(--r)) rotate(calc(-1 * (var(--a) + var(--spin))))
}

.orbit__track--outer .orbit__item {
    --r: 49.7cqw
}

.orbit__track--inner .orbit__item {
    --r: 38.9cqw
}

.orbit__item>img {
    width: calc(9cqw * var(--s, 1));
    max-width: none;
    filter: drop-shadow(0 1.2cqw 1.6cqw rgba(60, 30, 130, .25))
}

.stat {
    display: grid;
    gap: .25em;
    min-width: 9.5em;
    padding: 1em 1.2em;
    border-radius: 1em;
    text-align: left;
    font-size: max(10px, 1cqw);
    color: #fff;
    background: linear-gradient(140deg, #c6a6f7, #9f76ee);
    box-shadow: 0 1.2em 2.4em -1.2em #5028a099
}

.stat .ico {
    width: 1.6em;
    height: 1.6em
}

.stat small {
    font-size: .95em;
    font-weight: 300
}

.stat b {
    font-size: 1.7em;
    font-weight: 600;
    letter-spacing: .01em
}

.stat--lime {
    color: #3a4a00;
    background: linear-gradient(140deg, #f2ffa6, #dcff3a)
}

.stat--purple {
    background: linear-gradient(140deg, #9a6df0, #7a3fe0)
}

.mstats {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0;
    margin: 28px 0 0
}

.mstats .stat {
    font-size: 13px;
    min-width: 0
}

.mstats .stat:first-child {
    grid-column: 1 / -1
}

@media(max-width:760px) {
    .orbit {
        --size: 132vw;
        margin: 4vw 0 8vw 50%;
        translate: -50% 0
    }

    .orbit__card {
        width: 66cqw
    }

    .orbit__item:has(.stat) {
        display: none
    }

    .orbit__item>img {
        width: calc(11cqw * var(--s, 1))
    }
}

.challenge {
    background: #fff;
    overflow: hidden
}

.duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 120px);
    align-items: center;
    margin-top: clamp(56px, 7vw, 140px)
}

.duo__copy {
    max-width: 36rem
}

.duo--brand .duo__copy {
    justify-self: center
}

.duo__kicker {
    font-size: clamp(1.5rem, 1rem + 1.6vw, 3.125rem);
    font-weight: 500;
    line-height: 1.2;
    background: var(--g-heading);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: .08em;
    width: fit-content
}

.duo__kicker--lime {
    background: linear-gradient(90deg, #a4c400, #7f9800);
    -webkit-background-clip: text;
    background-clip: text
}

.duo__sub {
    margin-top: .3em;
    font-size: clamp(1.1rem, .9rem + .9vw, 2.5rem);
    font-weight: 300;
    line-height: 1.3;
    color: var(--c-ink);
    text-wrap: balance
}

.ticks {
    list-style: none;
    margin: clamp(18px, 2vw, 34px) 0 0;
    padding: 0;
    display: grid;
    gap: .65em;
    font-size: clamp(.95rem, .8rem + .5vw, 1.5rem);
    font-weight: 300;
    color: var(--c-grey-400)
}

.ticks li {
    display: flex;
    align-items: center;
    gap: .8em
}

.ticks li:before {
    content: "";
    width: .34em;
    height: .34em;
    border-radius: 50%;
    background: currentColor;
    opacity: .7
}

.duo__visual {
    position: relative
}

.post {
    --rot: 0deg;
    position: relative;
    z-index: 1;
    width: min(100%, 540px);
    margin-inline: auto;
    padding: clamp(12px, 1.2vw, 20px);
    background: #fff;
    border-radius: 20px;
    rotate: var(--rot);
    box-shadow: 0 30px 72px -20px #28145059
}

.post__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 clamp(10px, 1vw, 16px);
    font-size: clamp(.75rem, .65rem + .3vw, 1rem);
    font-weight: 600;
    color: var(--c-ink)
}

.post__head img {
    width: clamp(34px, 3.4vw, 56px);
    height: auto;
    border-radius: 50%;
    outline: 3px solid #fff;
    box-shadow: 0 0 0 4px #8a50e9
}

.post__more {
    width: 22px;
    height: 22px;
    margin-left: auto;
    color: var(--c-ink)
}

.post__media {
    border-radius: 16px;
    overflow: hidden;
    background: radial-gradient(#dcbfff, #bf98ee);
    aspect-ratio: 601 / 550
}

.post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.post__actions {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 22px);
    padding-top: clamp(10px, 1vw, 16px);
    color: var(--c-ink)
}

.post__actions svg {
    width: clamp(20px, 1.8vw, 28px);
    height: clamp(20px, 1.8vw, 28px);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    stroke-linecap: round
}

.post__save {
    margin-left: auto
}

.post__like {
    padding: 0;
    display: grid
}

.post__like[aria-pressed=true] svg {
    fill: #ef2b45;
    stroke: #ef2b45
}

.post__like.is-pop svg {
    animation: pop .45s var(--ease-out)
}

@keyframes pop {
    40% {
        transform: scale(1.35)
    }
}

.persona {
    position: relative;
    z-index: 2;
    max-width: 26rem;
    margin-top: clamp(20px, 2.4vw, 40px)
}

.persona--brand {
    margin-left: auto
}

.persona h4 {
    font-size: clamp(1.05rem, .85rem + .7vw, 1.875rem);
    font-weight: 500;
    background: var(--g-heading);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
    padding-bottom: .08em
}

.persona--creator h4 {
    background: linear-gradient(90deg, #9ab800, #6f8600);
    -webkit-background-clip: text;
    background-clip: text
}

.persona p {
    margin-top: .5em;
    font-size: clamp(.85rem, .75rem + .3vw, 1.125rem);
    font-weight: 300;
    color: var(--c-ink)
}

.persona__focus {
    font-size: .85em !important;
    color: var(--c-grey-400) !important
}

.persona__focus b {
    font-weight: 600
}

.duo__arc {
    position: absolute;
    width: 70%;
    height: auto;
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    pointer-events: none
}

.duo__arc--purple {
    right: -14%;
    top: -12%;
    stroke: url(#arc-purple)
}

.duo__arc--lime {
    left: 4%;
    bottom: -8%;
    stroke: url(#arc-lime)
}

@media(max-width:860px) {
    .duo {
        grid-template-columns: 1fr
    }

    .duo--creator .duo__copy {
        order: -1
    }

    .duo__copy {
        justify-self: start !important
    }

    .post {
        width: min(88%, 460px)
    }

    .persona {
        margin-inline: 0 !important
    }
}

.solution {
    overflow: hidden;
    padding-bottom: 0;
    background: linear-gradient(180deg, #fff, #f1ebfc, #c4adf1 52%, #9a73e6 74%, #8a62ce)
}

.solution__ribbon {
    inset: 22% 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 600;
    stroke-width: 30;
    opacity: .95;
    overflow: visible
}

.solution__title {
    max-width: 20ch
}

.solution__stage {
    position: relative;
    z-index: 1;
    margin: clamp(32px, 4vw, 80px) auto 0;
    width: min(100%, 1920px);
    overflow-x: clip
}

.solution__devices {
    width: 100%;
    -webkit-mask-image: linear-gradient(#000 60%, transparent 96%);
    mask-image: linear-gradient(#000 60%, transparent 96%)
}

.solution__icon {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    border-radius: 50%;
    filter: drop-shadow(0 14px 22px rgba(40, 20, 90, .35))
}

@media(max-width:760px) {
    .solution__devices {
        width: 150%;
        max-width: none;
        margin-left: -18%
    }
}

.identity {
    background: linear-gradient(180deg, #8a62ce, #a68bdb 28%, #ece6f7 70%, #fff);
    padding-top: clamp(40px, 4vw, 80px)
}

.identity__title {
    color: #fff
}

.identity .lead {
    color: #ffffffeb
}

.bento {
    display: grid;
    grid-template-columns: 401fr 401fr 401fr 459fr;
    grid-template-rows: 264fr 264fr 348fr;
    gap: clamp(8px, 1.1vw, 20px);
    margin-top: clamp(36px, 4vw, 72px);
    padding: clamp(10px, 1.1vw, 20px);
    border-radius: var(--radius-xl);
    background: var(--c-night);
    aspect-ratio: 1762 / 957;
    container-type: inline-size
}

.tile {
    position: relative;
    overflow: hidden;
    border-radius: clamp(16px, 2.2cqw, 40px);
    background: var(--c-purple);
    color: #fff;
    min-height: 0
}

.tile h3 {
    font-size: max(13px, 1.45cqw);
    font-weight: 500;
    line-height: 1.3;
    position: relative;
    z-index: 2
}

.tile p {
    font-size: max(11px, 1.04cqw);
    font-weight: 300;
    line-height: 1.4;
    margin-top: .7em;
    position: relative;
    z-index: 2;
    opacity: .92
}

.tile--a {
    grid-area: 1 / 1 / 3 / 2;
    padding: 2.6cqw 2.2cqw
}

.tile--b {
    grid-area: 1 / 2 / 2 / 3;
    background: var(--c-lime);
    display: grid;
    place-items: center
}

.tile--c {
    grid-area: 2 / 2 / 3 / 3;
    background: #e9e2d6
}

.tile--d {
    grid-area: 1 / 3 / 3 / 4;
    padding: 2.6cqw 2.3cqw
}

.tile--e {
    grid-area: 1 / 4 / 3 / 5;
    background: var(--c-lime);
    display: grid;
    place-items: center
}

.tile--f {
    grid-area: 3 / 1 / 4 / 2;
    background: linear-gradient(160deg, #ffd9b8, #ff9f5a);
    display: grid;
    place-items: center
}

.tile--g {
    grid-area: 3 / 2 / 4 / 3;
    background: var(--c-lime)
}

.tile--h {
    grid-area: 3 / 3 / 4 / 5;
    display: flex;
    align-items: center;
    padding: 0 2.4cqw
}

.tile__ribbon {
    stroke-width: 22;
    z-index: 1
}

.tile__ribbon--wide {
    stroke-width: 26
}

.tile__icon {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    z-index: 2;
    filter: drop-shadow(0 .6cqw .8cqw rgba(0, 0, 0, .25))
}

.tile__icon--round {
    border-radius: 50%;
    box-shadow: 0 0 0 .25cqw #fff
}

.tile__logo {
    width: 78%
}

.tile__photo {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.react {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 9%;
    z-index: 2;
    animation: bubble 3.6s var(--ease-in-out) var(--d) infinite
}

.react img {
    width: 100%
}

@keyframes bubble {

    0%,
    to {
        transform: translateY(0) scale(1)
    }

    50% {
        transform: translateY(-14%) scale(1.12)
    }
}

.tile__fold {
    position: absolute;
    left: -6%;
    bottom: -4%;
    width: 112%;
    max-width: none
}

.tile__pepsi {
    position: relative;
    left: 4%;
    width: 98%;
    max-width: none
}

.minipost {
    width: 84%;
    padding: 3.5%;
    background: #fff;
    border-radius: 1cqw;
    color: var(--c-ink);
    box-shadow: 0 1cqw 2cqw -1cqw #0006;
    rotate: -2deg
}

.minipost header,
.minipost footer {
    display: flex;
    align-items: center;
    gap: .6em;
    font-size: max(8px, .72cqw);
    font-weight: 600
}

.minipost header img {
    width: 1.9cqw;
    min-width: 16px;
    border-radius: 50%
}

.minipost header svg,
.minipost footer svg {
    width: max(12px, 1.3cqw);
    height: max(12px, 1.3cqw);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7
}

.minipost header svg {
    margin-left: auto
}

.minipost .push {
    margin-left: auto
}

.minipost .is-liked {
    fill: #ef2b45;
    stroke: #ef2b45
}

.minipost__photo {
    width: 100%;
    aspect-ratio: 401 / 250;
    object-fit: cover;
    border-radius: .7cqw;
    margin: 3% 0
}

.tile__appicon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom
}

.tile__copy {
    position: relative;
    z-index: 2;
    max-width: 34%
}

.tile__dancer {
    position: absolute;
    right: 5%;
    bottom: -16%;
    height: 116%;
    width: auto;
    z-index: 2
}

@media(max-width:900px) {
    .bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
        aspect-ratio: auto;
        container-type: normal;
        gap: 8px;
        padding: 8px;
        border-radius: 26px
    }

    .tile {
        border-radius: 18px
    }

    .tile h3 {
        font-size: 15px
    }

    .tile p {
        font-size: 12.5px
    }

    .tile--a,
    .tile--b,
    .tile--c,
    .tile--d,
    .tile--e,
    .tile--f,
    .tile--g,
    .tile--h {
        grid-area: auto
    }

    .tile--a {
        grid-column: 1 / -1;
        min-height: 250px;
        padding: 22px 20px
    }

    .tile--a p {
        max-width: 70%
    }

    .tile--a .tile__icon {
        --w: 13% !important
    }

    .tile--a .tile__ribbon {
        inset: auto 0 0 auto;
        width: 60%;
        height: 100%
    }

    .tile--b,
    .tile--c {
        aspect-ratio: 1
    }

    .tile--d {
        grid-column: 1 / -1;
        aspect-ratio: 1.15;
        padding: 22px 20px
    }

    .tile__fold {
        left: auto;
        right: -4%;
        width: min(80%, 440px)
    }

    .tile--e,
    .tile--f {
        aspect-ratio: 1
    }

    .minipost {
        width: 86%;
        border-radius: 10px
    }

    .minipost header img {
        width: 18px
    }

    .tile--g {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9
    }

    .tile--h .tile__ribbon {
        display: none
    }

    .tile--h {
        grid-column: 1 / -1;
        min-height: 240px;
        padding: 22px 20px;
        align-items: flex-start
    }

    .tile__copy {
        max-width: 56%
    }

    .tile__dancer {
        height: 86%;
        bottom: -14%;
        right: -8%
    }
}

.journey {
    position: relative;
    background: #fff;
    padding-top: clamp(20px, 3vw, 60px)
}

.journey__board {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-xl);
    margin-inline: clamp(0px, 1vw, 20px);
    padding-block: clamp(56px, 6vw, 130px) clamp(56px, 6vw, 130px);
    color: #fff;
    background: var(--g-night)
}

.weeks {
    position: relative;
    margin-top: clamp(40px, 5vw, 100px)
}

.weeks__head {
    list-style: none;
    margin: 0;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(var(--weeks), 1fr);
    border-block: 1px solid rgba(255, 255, 255, .22)
}

.weeks__head li {
    padding: clamp(14px, 1.6vw, 30px) 0;
    text-align: center;
    font-size: clamp(.8rem, .6rem + .7vw, 1.5625rem);
    font-weight: 300;
    color: #ffffff9e;
    transition: color .4s
}

.weeks__head li+li {
    border-left: 1px solid rgba(255, 255, 255, .22)
}

.weeks__head li.is-on {
    color: var(--c-lime)
}

.weeks__grid {
    position: absolute;
    inset: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(var(--weeks), 1fr);
    pointer-events: none
}

.weeks__grid i {
    border-left: 1px solid rgba(255, 255, 255, .14)
}

.weeks__grid i:first-child {
    border-left: 0
}

.weeks__now {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20%;
    background: linear-gradient(180deg, #dbff001f, #dbff0000 70%);
    opacity: 0
}

.notes {
    list-style: none;
    margin: 0;
    padding: clamp(28px, 3vw, 60px) var(--gutter) 0;
    display: grid;
    grid-template-columns: repeat(var(--weeks), 1fr);
    align-items: start
}

.note {
    grid-column: var(--c);
    grid-row: 1;
    margin-top: calc((var(--c) - 1) * clamp(34px, 6.2vw, 120px));
    width: 90%;
    justify-self: center;
    aspect-ratio: 1;
    padding: clamp(14px, 1.6vw, 30px);
    border-radius: 12px;
    rotate: var(--r);
    box-shadow: 0 24px 48px -18px #0009
}

.note h3 {
    font-size: clamp(.8rem, .5rem + .9vw, 1.5625rem);
    font-weight: 500;
    line-height: 1.25
}

.note p {
    margin-top: .7em;
    font-size: clamp(.68rem, .45rem + .55vw, 1.125rem);
    font-weight: 300;
    line-height: 1.35
}

.note--purple {
    background: var(--c-purple);
    color: #fff
}

.note--lime {
    background: var(--c-lime);
    color: var(--c-ink)
}

@media(max-width:760px) {
    .journey__board {
        margin-inline: 8px;
        border-radius: 28px
    }

    .weeks__head,
    .weeks__grid {
        display: none
    }

    .notes {
        display: block;
        position: relative;
        padding: 8px var(--gutter) 0 calc(var(--gutter) + 22px)
    }

    .notes:before {
        content: "";
        position: absolute;
        left: calc(var(--gutter) + 4px);
        top: 18px;
        bottom: 30px;
        width: 2px;
        background: linear-gradient(var(--c-lime) calc(var(--fill, 0) * 100%), rgba(255, 255, 255, .18) 0)
    }

    .note {
        width: 100%;
        aspect-ratio: auto;
        margin: 0 0 34px;
        rotate: calc(var(--r) * .5);
        padding: 18px 18px 20px
    }

    .note:before {
        content: attr(data-week);
        position: absolute;
        left: -30px;
        top: -26px;
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--c-lime);
        rotate: calc(var(--r) * -.5);
        white-space: nowrap
    }

    .note:after {
        content: "";
        position: absolute;
        left: -26px;
        top: 22px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--c-night);
        box-shadow: 0 0 0 2px var(--c-lime)
    }

    .note h3 {
        font-size: 16px
    }

    .note p {
        font-size: 13px
    }
}

.brand {
    color: #fff;
    background: linear-gradient(180deg, #7b50d8, #1c1a24 22%, #141318 58%, #2a1d4f 82%, #6c40c8)
}

.brand__label {
    margin: clamp(48px, 5vw, 100px) 0 clamp(18px, 2vw, 34px);
    font-size: clamp(1rem, .8rem + .6vw, 1.875rem);
    font-weight: 400
}

.swatches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 28px)
}

.swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    padding: clamp(12px, 1.2vw, 22px);
    border-radius: 20px;
    background: var(--sw);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .4s var(--ease-out), box-shadow .4s
}

.swatch:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -24px #dbff0073
}

.swatch--ink {
    color: var(--c-ink)
}

.swatch__name {
    font-size: clamp(.8rem, .55rem + .8vw, 1.875rem);
    font-weight: 300
}

.swatch__codes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: clamp(.62rem, .45rem + .4vw, 1.25rem);
    font-weight: 300
}

.swatch__codes span {
    display: grid
}

.swatch__codes small {
    font-size: .55em;
    opacity: .75;
    letter-spacing: .06em
}

.swatch__copied {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11px;
    background: #0000008c;
    color: #fff;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .25s
}

.swatch__copied svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5
}

.swatch.is-copied .swatch__copied {
    opacity: 1;
    transform: none
}

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

.specimen__name {
    display: grid;
    line-height: 1.05;
    min-width: 0
}

.specimen__family {
    font-size: clamp(2.4rem, 1.2rem + 4vw, 5rem);
    font-weight: 700;
    white-space: nowrap
}

.specimen__kind {
    font-size: clamp(1.8rem, 1rem + 3vw, 3.75rem);
    font-weight: 200;
    color: var(--c-lime)
}

.specimen__alpha {
    margin: 0;
    display: grid;
    gap: clamp(14px, 1.6vw, 30px);
    min-width: 0
}

.specimen__alpha dt {
    font-size: clamp(.85rem, .65rem + .6vw, 1.875rem);
    font-weight: 600
}

.specimen__alpha dd {
    margin: 0;
    font-size: clamp(.78rem, .5rem + .75vw, 1.875rem);
    font-weight: 400;
    overflow-wrap: anywhere
}

.weights {
    list-style: none;
    margin: clamp(48px, 5vw, 100px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .28)
}

.weights li {
    position: relative;
    padding: clamp(10px, 1vw, 18px) 0 0 clamp(8px, 1vw, 20px);
    border-left: 1px solid rgba(255, 255, 255, .22)
}

.weights li:first-child {
    border-left: 0
}

.weights span {
    display: block;
    font-size: clamp(.6rem, .45rem + .4vw, 1.25rem);
    font-weight: var(--w);
    white-space: nowrap
}

.weights b {
    display: block;
    font-size: clamp(3rem, 1rem + 6vw, 9.375rem);
    line-height: 1.3;
    font-weight: var(--w);
    font-variation-settings: "wght" var(--wv, var(--w));
    transition: font-variation-settings .6s var(--ease-out);
    cursor: default
}

.weights li:hover b {
    --wv: 900
}

.axis {
    margin-top: 28px;
    padding: 18px;
    border-radius: 22px;
    background: #ffffff0f;
    border: 1px solid rgba(255, 255, 255, .14)
}

.axis__sample {
    font-size: 34vw;
    line-height: 1.1;
    text-align: center;
    font-variation-settings: "wght" var(--axis, 500);
    color: #fff
}

.axis__sample:first-letter {
    color: var(--c-lime)
}

.axis__control {
    display: grid;
    gap: 10px;
    font-size: 13px
}

.axis__control span {
    display: flex;
    justify-content: space-between
}

.axis__control output {
    color: var(--c-lime);
    font-weight: 600
}

.axis input {
    width: 100%;
    accent-color: var(--c-lime);
    height: 28px
}

@media(max-width:760px) {
    .swatches {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .swatches li:first-child {
        grid-column: 1 / -1
    }

    .swatches li:first-child .swatch {
        aspect-ratio: 2.1 / 1
    }

    .swatch__name {
        font-size: 15px
    }

    .swatch__codes {
        font-size: 12px
    }

    .specimen {
        grid-template-columns: 1fr
    }

    .weights {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .weights li:nth-child(5) {
        border-left: 0
    }

    .weights li:nth-child(n+5) {
        border-top: 1px solid rgba(255, 255, 255, .22)
    }

    .weights b {
        font-size: 15vw
    }

    .weights span {
        font-size: 9.5px;
        white-space: normal
    }
}

.creatorapp__intro {
    position: relative;
    z-index: 2;
    color: #fff;
    background: linear-gradient(180deg, #6c40c8 0%, var(--c-purple-2) 100%);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl)
}

.creatorapp__intro .h2 {
    max-width: 18ch
}

.feature {
    position: relative;
    container-type: inline-size
}

.feature--hero {
    margin-top: clamp(20px, 3vw, 60px);
    aspect-ratio: 1782 / 990
}

.feature--social,
.feature--earn {
    aspect-ratio: 1782 / 1018;
    margin-top: clamp(60px, 7vw, 140px)
}

.feature__card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 73.6%;
    overflow: hidden;
    border-radius: 2.8cqw;
    background: var(--g-card)
}

.feature--social .feature__card,
.feature--earn .feature__card {
    height: 71.7%
}

.feature__card--violet {
    background: linear-gradient(135deg, #6e14d9, #fff, #6e14d9)
}

.feature--earn .feature__card {
    background: linear-gradient(135deg, #8757d7, #fff, #dbff00)
}

.feature__ribbon {
    stroke-width: 46
}

.feature__icon {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    z-index: 3;
    filter: drop-shadow(0 1cqw 1.4cqw rgba(40, 20, 90, .28))
}

.feature__copy {
    position: absolute;
    z-index: 4;
    left: 4.4cqw;
    bottom: 9%;
    max-width: 36cqw;
    color: var(--c-ink)
}

.feature__copy .eyebrow {
    font-size: max(12px, 1.4cqw)
}

.feature__title {
    font-size: max(22px, 3.6cqw);
    font-weight: 500;
    line-height: 1.12;
    color: var(--c-ink);
    text-wrap: balance
}

.feature__copy p {
    margin-top: .5em;
    font-size: max(13px, 1.8cqw);
    font-weight: 300;
    line-height: 1.4
}

.feature--social .feature__copy {
    top: 52%;
    bottom: auto
}

.feature--earn .feature__copy {
    left: auto;
    right: 4.4cqw;
    max-width: 32cqw
}

.cutout-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
    clip-path: inset(-60% 0 0 0 round 0 0 2.8cqw 2.8cqw)
}

.feature__person {
    position: absolute;
    left: 28%;
    bottom: -6%;
    width: 44.3%
}

.feature__stage--right .feature__hand {
    position: absolute;
    right: 0;
    bottom: -4%;
    width: 52.6%
}

.feature__stage--left .feature__hand {
    position: absolute;
    left: 0;
    bottom: -4%;
    width: 49.1%
}

.creatorapp__lime {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--radius-xl) * -1);
    padding: calc(var(--radius-xl) + clamp(56px, 6vw, 120px)) 0 var(--section-y);
    background: linear-gradient(180deg, #dbff00, #e8ff6e 40%, #f4fbd8 72%, #efe9fb)
}

.phones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 40px);
    align-items: start
}

.phone {
    margin: 0;
    text-align: center
}

.phone--center {
    margin-top: clamp(40px, 6vw, 115px)
}

.phone figcaption {
    min-height: 0
}

.phone__title {
    font-size: clamp(1rem, .7rem + 1.1vw, 2.2rem);
    font-weight: 500;
    color: var(--c-ink)
}

.phone figcaption p {
    margin: .4em auto 0;
    max-width: 17em;
    font-size: clamp(.8rem, .62rem + .6vw, 1.5625rem);
    font-weight: 300;
    line-height: 1.35;
    color: var(--c-ink)
}

.phone img {
    width: min(100%, 433px);
    margin: clamp(14px, 1.6vw, 30px) auto 0;
    filter: drop-shadow(0 30px 40px rgba(80, 90, 0, .25))
}

.phones__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px
}

.phones__dots i {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #14121c38;
    transition: width .35s var(--ease-out), background-color .35s
}

.phones__dots i.is-on {
    width: 26px;
    background: var(--c-ink)
}

@media(max-width:760px) {
    .feature--hero {
        aspect-ratio: .78
    }

    .feature--hero .feature__card {
        height: 66%;
        border-radius: 26px
    }

    .cutout-stage {
        clip-path: inset(-60% 0 0 0 round 0 0 26px 26px)
    }

    .feature--hero .feature__person {
        left: 12%;
        width: 76%;
        bottom: -4%
    }

    .feature--hero .feature__copy {
        left: 20px;
        bottom: 20px;
        max-width: 70%
    }

    .feature--hero .feature__copy {
        background: #ffffffb8;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        padding: 12px 14px;
        border-radius: 16px;
        z-index: 5
    }

    .feature__card .feature__icon {
        --w: 16% !important;
        left: var(--mx, var(--x));
        top: var(--my, var(--y))
    }

    .feature__title {
        font-size: 22px
    }

    .feature__copy p {
        font-size: 13.5px
    }

    .feature--social,
    .feature--earn {
        aspect-ratio: .82
    }

    .feature--social .feature__card,
    .feature--earn .feature__card {
        height: 74%;
        border-radius: 26px
    }

    .feature--social .feature__copy,
    .feature--earn .feature__copy {
        top: auto;
        bottom: 22px;
        left: 20px;
        right: 20px;
        max-width: none;
        z-index: 5
    }

    .feature__stage--right .feature__hand {
        width: 96%;
        right: -10%;
        bottom: 22%
    }

    .feature__stage--left .feature__hand {
        width: 90%;
        left: -6%;
        bottom: 22%
    }

    .phones {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(var(--gutter) * -1);
        padding: 4px var(--gutter) 8px;
        scrollbar-width: none
    }

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

    .phone {
        flex: 0 0 78%;
        scroll-snap-align: center
    }

    .phone--center {
        margin-top: 0
    }

    .phone img {
        width: 86%
    }

    .phone__title {
        font-size: 19px
    }
}

.platform {
    padding-bottom: 0;
    background: linear-gradient(180deg, #efe9fb, #c9b6f2 22%, #b79df0 70%, #a689ea);
    overflow: hidden
}

.insights {
    position: relative;
    overflow: hidden;
    margin-top: clamp(36px, 4vw, 80px);
    aspect-ratio: 1782 / 934;
    border-radius: var(--radius-xl);
    background: var(--g-card);
    container-type: inline-size
}

.insights__ribbon {
    stroke-width: 46
}

.insights__monitor {
    position: absolute;
    right: 0;
    top: 0;
    width: 72.3%
}

.insights__copy {
    position: absolute;
    z-index: 2;
    left: 4.5cqw;
    top: 70.6%;
    max-width: 36cqw
}

.insights__copy .eyebrow {
    font-size: max(12px, 1.12cqw)
}

.insights__pie {
    position: absolute;
    left: 7.2cqw;
    top: 12cqw;
    width: 6cqw;
    z-index: 2
}

.insights__arrow {
    position: absolute;
    left: 12.8cqw;
    top: 26cqw;
    width: 8.9cqw;
    z-index: 2
}

.trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 18px);
    margin-top: clamp(10px, 1vw, 18px)
}

.trio__card {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 582 / 594;
    border-radius: var(--radius-xl);
    background: #2a2233
}

.trio__card--grad {
    background: var(--g-card)
}

.trio__card svg {
    stroke-width: 26
}

.trio__card img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}

.trio__card .trio__photo {
    height: 100%;
    object-fit: cover
}

.trio__card--explore figcaption {
    position: absolute;
    z-index: 2;
    top: 10%;
    left: 0;
    right: 0;
    text-align: center
}

.trio__card--explore .eyebrow {
    font-size: clamp(.8rem, .6rem + .5vw, 1.25rem);
    margin: 0
}

.trio__card--explore h3 {
    font-size: clamp(1rem, .6rem + 1.2vw, 2.2rem);
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1.2
}

.trio__card--explore img {
    left: auto;
    right: 0;
    width: 97%
}

.screens {
    margin-top: clamp(60px, 6vw, 120px);
    padding: clamp(40px, 4vw, 80px) 0;
    background: linear-gradient(180deg, #dbff00, #e9ff7a);
    overflow: hidden
}

.screens {
    --gap: clamp(14px, 1.6vw, 30px)
}

.screens__track {
    display: flex;
    width: max-content;
    animation: screens-loop var(--loop, 60s) linear infinite
}

.screens:hover .screens__track,
.screens:focus-within .screens__track {
    animation-play-state: paused
}

.screens__set {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding-right: var(--gap)
}

.screens__set img {
    flex: none;
    width: clamp(280px, 40vw, 846px);
    border-radius: 18px;
    box-shadow: 0 30px 60px -30px #28320073
}

@keyframes screens-loop {
    0% {
        transform: translate(-50%)
    }

    to {
        transform: translate(0)
    }
}

@media(prefers-reduced-motion:reduce) {
    .screens__track {
        animation: none;
        width: auto;
        overflow-x: auto;
        padding-inline: var(--gutter)
    }

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

@media(max-width:760px) {
    .insights {
        aspect-ratio: .78;
        border-radius: 26px
    }

    .insights__monitor {
        width: 140%;
        max-width: none;
        right: -48%;
        top: 6%
    }

    .insights__copy {
        left: 20px;
        right: 20px;
        top: auto;
        bottom: 22px;
        max-width: none
    }

    .insights__pie {
        left: 6%;
        top: 6%;
        width: 16%
    }

    .insights__arrow {
        left: 8%;
        top: 36%;
        width: 22%
    }

    .trio {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .trio__card {
        border-radius: 26px;
        aspect-ratio: 1 / .96
    }

    .screens {
        --loop: 40s
    }

    .screens__set img {
        width: 78vw;
        border-radius: 14px
    }
}

.impact {
    background: linear-gradient(180deg, #fff, #fbf9ff 60%, #f1ebfc);
    overflow: hidden
}

.impact__stage {
    position: relative;
    margin: clamp(36px, 4vw, 72px) 0 0
}

.impact__devices {
    width: 100%;
    -webkit-mask-image: linear-gradient(#000 70%, transparent 98%);
    mask-image: linear-gradient(#000 70%, transparent 98%)
}

.callouts {
    list-style: none;
    margin: 0;
    padding: 0
}

.callout {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 18.2%;
    padding: clamp(10px, 1.1vw, 20px) clamp(12px, 1.1vw, 20px);
    border-radius: 20px;
    background: #ffffff8c;
    border: 1px solid rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: inset 1.5px 1.5px #ffffffe6, inset -1px -1px #ffffff59, 0 20px 40px -24px #5028a073
}

.callout h3 {
    font-size: clamp(.78rem, .5rem + .55vw, 1.25rem);
    font-weight: 600;
    background: linear-gradient(90deg, #6e14d9, #141414);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: fit-content;
    padding-bottom: .08em
}

.callout p {
    margin-top: .35em;
    font-size: clamp(.66rem, .45rem + .4vw, .95rem);
    line-height: 1.35;
    color: var(--c-ink)
}

@media(max-width:860px) {
    .impact__devices {
        width: 128%;
        max-width: none;
        margin-left: -14%
    }

    .callouts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 8px
    }

    .callout {
        position: static;
        width: auto
    }

    .callout h3 {
        font-size: 13px
    }

    .callout p {
        font-size: 12px
    }
}

.built {
    background: linear-gradient(180deg, #f1ebfc, #ddd0f8 60%, #c9b4f3);
    overflow: hidden
}

.built__inner {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(24px, 4vw, 80px);
    align-items: center
}

.built__title {
    font-size: clamp(1.7rem, 1rem + 2.7vw, 4rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--c-ink);
    text-wrap: balance
}

.built__title .grad-text {
    display: inline
}

.built .lead {
    margin-top: clamp(16px, 2vw, 34px);
    max-width: 26ch;
    color: var(--c-ink)
}

.built__tablet {
    margin: 0
}

.built__tablet img {
    width: 100%;
    filter: drop-shadow(0 40px 50px rgba(60, 30, 130, .3))
}

@media(max-width:860px) {
    .built__inner {
        grid-template-columns: 1fr
    }
}

.finale {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(60% 90% at 85% 100%, rgba(219, 255, 0, .35), transparent 70%), radial-gradient(50% 70% at 0% 0%, rgba(138, 80, 233, .55), transparent 70%), linear-gradient(180deg, #2a1b4d, #14121c)
}

.finale__ribbon {
    top: -3.2vw;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 600;
    stroke-width: 30;
    opacity: .14;
    overflow: visible
}

@media(min-width:861px) {

    .finale,
    .finale__inner {
        min-height: 60vw
    }
}

.finale__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    min-height: clamp(520px, 52vw, 1000px)
}

.finale__copy {
    padding-block: clamp(80px, 10vw, 180px)
}

.finale__title {
    font-size: clamp(2.3rem, 1rem + 4.6vw, 6.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: clamp(18px, 2vw, 36px);
    color: #fff
}

.finale__title .grad-text {
    background-image: var(--g-heading-light)
}

.finale__lede {
    font-size: clamp(1.05rem, .8rem + .9vw, 1.8rem);
    font-weight: 300;
    line-height: 1.4;
    max-width: 26ch
}

.finale__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: clamp(20px, 2.2vw, 40px);
    font-size: clamp(.95rem, .8rem + .4vw, 1.3rem)
}

.finale__contact a+a {
    border-left: 1.5px solid rgba(255, 255, 255, .5);
    padding-left: 20px
}

.finale__contact a:hover {
    color: var(--c-lime)
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    margin-top: clamp(24px, 2.4vw, 44px);
    padding: .95em 1.7em;
    border-radius: 999px;
    background: var(--c-lime);
    color: var(--c-ink);
    font-size: clamp(.95rem, .85rem + .35vw, 1.2rem);
    font-weight: 600;
    box-shadow: 0 14px 40px -10px #dbff0080;
    transition: transform .35s var(--ease-out), box-shadow .35s, background-color .25s
}

.cta svg {
    width: 1.2em;
    height: 1.2em
}

.cta__arrow {
    transition: transform .35s var(--ease-out)
}

.cta:hover {
    transform: translateY(-3px);
    background: #fff
}

.cta:hover .cta__arrow {
    transform: translate(4px)
}

.finale__social {
    display: flex;
    gap: 16px;
    margin-top: clamp(24px, 2.6vw, 44px)
}

.social {
    width: clamp(48px, 3.6vw, 62px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .4);
    background: #ffffff0d;
    transition: transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s
}

.social svg {
    width: 44%;
    height: 44%;
    fill: currentColor
}

.social:hover {
    transform: translateY(-4px);
    background: var(--c-lime);
    color: var(--c-ink);
    border-color: var(--c-lime)
}

.cta:focus-visible,
.social:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px
}

.finale__mark {
    display: grid;
    place-items: center
}

.finale__mark img {
    width: min(70%, 360px);
    filter: drop-shadow(0 0 60px rgba(219, 255, 0, .25))
}

@media(max-width:860px) {
    .finale__inner {
        grid-template-columns: 1fr
    }

    .finale__mark {
        padding-bottom: 80px;
        justify-items: start
    }

    .finale__mark img {
        width: 42%
    }
}