:root {
            --blue: #2B78E4;
            --green: #289E68;
            --brown: #D97706;
            --ink: #1E293B;
            --beige: #F5EFEB;
            --head: 'Poppins', system-ui, sans-serif;
            --body: 'Montserrat', system-ui, sans-serif;
            --nav-h: 78px
        }

        [data-theme=light] {
            --bg: #F7F8FA;
            --surface: #fff;
            --alt: #EDE7DF;
            --text: #1F2933;
            --muted: #556270;
            --line: rgba(31, 41, 51, .12);
            --bt: #3E6B84;
            --gt: #4F6F5A;
            --rt: #8A6238;
            --l-dark: #1F2933;
            --l-blue: #3E6B84;
            --l-green: #4F6F5A;
            --l-brown: #A67C52;
            --wash: linear-gradient(90deg, rgba(247, 248, 250, .97) 0%, rgba(247, 248, 250, .82) 48%, rgba(247, 248, 250, .2) 100%), linear-gradient(0deg, rgba(247, 248, 250, 1) 0%, transparent 28%);
            --intro-bg: radial-gradient(circle at 50% 45%, #fff 0%, #EDE7DF 100%);
            --shadow: 0 24px 60px -24px rgba(31, 41, 51, .25);
            --net: 62, 107, 132
        }

        [data-theme=dark] {
            --bg: #121920;
            --surface: #1b252e;
            --alt: #172028;
            --text: #EDE7DF;
            --muted: rgba(237, 231, 223, .7);
            --line: rgba(237, 231, 223, .14);
            --bt: #6FA2C2;
            --gt: #7FA48B;
            --rt: #C79A6B;
            --l-dark: #EDE7DF;
            --l-blue: #6FA2C2;
            --l-green: #7FA48B;
            --l-brown: #A67C52;
            --wash: linear-gradient(90deg, rgba(18, 25, 32, .92) 0%, rgba(18, 25, 32, .6) 55%, rgba(18, 25, 32, .25) 100%), linear-gradient(0deg, rgba(18, 25, 32, 1) 0%, transparent 28%);
            --intro-bg: radial-gradient(circle at 50% 45%, #1d2832 0%, #10161c 75%);
            --shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
            --net: 111, 162, 194
        }

        * {
            box-sizing: border-box;
            margin: 0
        }

        html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-h);
      overflow-y: scroll;
    }

        body {
            font-family: var(--body);
            background: var(--bg);
            color: var(--text);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            transition: background .4s, color .4s
        }

        body.locked {
            overflow: hidden
        }

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

        :focus-visible {
            outline: 2px solid var(--brown);
            outline-offset: 3px
        }

        .wrap {
            width: min(1200px, 100% - 48px);
            margin-inline: auto
        }

        #progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0;
            z-index: 120;
            background: linear-gradient(90deg, var(--blue), var(--green), var(--brown))
        }

        /* logo */
        .lockup {
            display: flex;
            align-items: center;
            gap: 7px;
            white-space: nowrap
        }

        .lockup svg {
            height: 46px;
            width: auto;
            overflow: visible
        }

        .lockup .word {
            display: block;
            font: 600 25px/1 var(--head);
            letter-spacing: -.01em;
            color: var(--l-dark)
        }

        .lockup .word b {
            font-weight: 600;
            color: var(--l-blue)
        }

        .lockup .sub {
            display: block;
            margin-top: 3px;
            font: 500 9.5px/1 var(--body);
            letter-spacing: .32em;
            color: var(--l-brown)
        }

        .c-blue {
            fill: var(--l-blue)
        }

        .c-green {
            fill: var(--l-green)
        }

        .c-dark {
            fill: var(--l-dark)
        }

        .c-brown {
            fill: var(--l-brown)
        }

        .c-line {
            stroke: var(--l-brown)
        }

        .c-hub {
            fill: #EDE7DF;
            stroke: var(--l-brown);
            stroke-opacity: .7;
            stroke-width: 3
        }

        /* nav - floating pill capsule */
        nav {
            position: fixed;
            top: 18px;
            left: 50%;
            transform: translateX(-50%);
            width: min(1200px, calc(100% - 40px));
            height: 66px;
            z-index: 50;
            display: flex;
            align-items: center;
            padding: 0 12px 0 22px;
            border-radius: 9999px;
            background: color-mix(in srgb, var(--surface) 0%, transparent);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid var(--line);
            box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .15);
            transition: background .4s, box-shadow .4s, border-color .4s, top .3s
        }

        nav.solid {
            background: var(--surface);
            box-shadow: 0 20px 48px -10px rgba(0, 0, 0, .22);
            border-color: color-mix(in srgb, var(--line) 160%, transparent)
        }

        nav .wrap {
            width: 100%;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px
        }

        nav ul {
            display: flex;
            gap: 34px;
            list-style: none;
            font: 500 14px var(--head)
        }

        nav ul a {
            color: var(--muted);
            transition: color .2s;
            position: relative
        }

        nav ul a:hover {
            color: var(--text)
        }

        nav ul a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            height: 2px;
            width: 0;
            background: var(--brown);
            transition: width .3s
        }

        nav ul a:hover::after {
            width: 100%
        }

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

        .theme {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid var(--line);
            background: var(--surface);
            color: var(--text);
            cursor: pointer;
            display: grid;
            place-items: center;
            transition: transform .3s
        }

        .theme:hover {
            transform: rotate(25deg)
        }

        .theme svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round
        }

        [data-theme=light] .i-sun {
            display: none
        }

        [data-theme=dark] .i-moon {
            display: none
        }

        .btn {
            display: inline-block;
            padding: 15px 30px;
            border-radius: 999px;
            font: 600 14px var(--head);
            border: 1.5px solid transparent;
            cursor: pointer;
            transition: transform .25s, background .25s, box-shadow .25s
        }

        .btn-primary {
            background: var(--ink);
            color: #fff
        }

        [data-theme=dark] .btn-primary {
            background: var(--brown)
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 28px -10px rgba(31, 41, 51, .5);
            background: var(--blue)
        }

        .btn-ghost {
            border-color: var(--line);
            background: var(--surface)
        }

        .btn-ghost:hover {
            border-color: var(--text);
            transform: translateY(-3px)
        }

        nav .btn {
            padding: 11px 22px
        }

        .hidden-brand {
            visibility: hidden
        }

        .burger {
            display: none;
            background: none;
            border: 0;
            color: inherit;
            font: 600 14px var(--head);
            cursor: pointer
        }

        /* hero */
        .hero {
            position: relative;
            min-height: 100svh;
            display: flex;
            align-items: center;
            overflow: hidden;
            background: var(--alt)
        }

        .hero video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--wash);
            pointer-events: none;
            z-index: 1
        }

        .hero .wrap {
            position: relative;
            z-index: 2;
            padding: calc(var(--nav-h) + 30px) 0 170px
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: color-mix(in srgb, var(--surface) 92%, transparent);
            backdrop-filter: blur(8px);
            font: 500 13px var(--head);
            color: var(--muted)
        }

        .pill i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 0 0 rgba(79, 111, 90, .6);
            animation: pulse 2s infinite
        }

        @keyframes pulse {
            70% {
                box-shadow: 0 0 0 10px rgba(79, 111, 90, 0)
            }

            100% {
                box-shadow: 0 0 0 0 rgba(79, 111, 90, 0)
            }
        }

        .hero h1 {
            font: 600 clamp(2.5rem, 5.7vw, 5.1rem)/1.05 var(--head);
            letter-spacing: -.03em;
            max-width: none;
            margin: 26px 0 0
        }

        .hero h1 .w {
            display: inline-block;
            overflow: hidden;
            vertical-align: top;
            padding-bottom: .2em;
            margin-bottom: -.12em
        }

        .hero h1 .w span {
            display: inline-block;
            transform: translateY(110%);
            padding-bottom: .2em;
            margin-bottom: -.2em
        }

        .hero h1 .g span {
            color: var(--l-blue);
            background: none;
            -webkit-background-clip: unset;
            background-clip: unset
        }

        .ready .hero h1 .w span {
            transform: none;
            transition: transform 1s cubic-bezier(.2, .8, .2, 1);
            transition-delay: calc(var(--i)*.09s + .1s)
        }

        .hero p.sub {
            max-width: 50ch;
            margin: 28px 0 38px;
            font-size: 1.1rem;
            color: var(--muted)
        }

        .rise {
            opacity: 0;
            transform: translateY(24px)
        }

        .ready .rise {
            opacity: 1;
            transform: none;
            transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
            transition-delay: var(--d, .6s)
        }

        .actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap
        }

        .stats {
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            margin-inline: auto;
            bottom: 44px;
            width: min(1200px, 100% - 48px);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: color-mix(in srgb, var(--surface) 94%, transparent);
            backdrop-filter: blur(18px);
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: var(--shadow)
        }

        .ch {
            display: inline-block;
            font-style: normal
        }

        .stats {
            overflow: hidden
        }

        .qk {
            display: grid;
            grid-template-columns: 44px 1fr;
            column-gap: 14px;
            align-items: center;
            padding: 22px 26px;
            border-right: 1px solid var(--line);
            transition: background .25s;
            --c: var(--blue);
            --ct: var(--bt)
        }

        .qk:last-child {
            border: 0
        }

        .qk:hover {
            background: color-mix(in srgb, var(--c) 8%, transparent)
        }

        .qk:nth-child(2) {
            --c: var(--green);
            --ct: var(--gt)
        }

        .qk:nth-child(3) {
            --c: var(--brown);
            --ct: var(--rt)
        }

        .qk:nth-child(4) {
            --c: var(--ink);
            --ct: var(--text)
        }

        .qk svg {
            grid-row: 1/3;
            width: 44px;
            height: 44px;
            padding: 11px;
            border-radius: 14px;
            background: color-mix(in srgb, var(--c) 14%, transparent);
            color: var(--ct);
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .qk b {
            font: 600 .98rem var(--head)
        }

        .qk span {
            font-size: .8rem;
            color: var(--muted);
            line-height: 1.4
        }

        .step b svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        /* sections */
        section.block {
            padding: clamp(80px, 11vw, 150px) 0
        }

        .kicker {
            font: 600 .9rem var(--head);
            color: var(--rt);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .kicker::before {
            content: "";
            width: 34px;
            height: 2px;
            background: var(--brown)
        }

        h2 {
            font: 600 clamp(2rem, 4vw, 3.2rem)/1.1 var(--head);
            letter-spacing: -.025em;
            max-width: 19ch
        }

        .lead {
            max-width: 58ch;
            margin-top: 20px;
            color: var(--muted);
            font-size: 1.05rem
        }

        .head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 40px;
            flex-wrap: wrap
        }

        .marquee {
            border-block: 1px solid var(--line);
            background: var(--surface);
            overflow: hidden;
            padding: 26px 0
        }

        .track {
            display: flex;
            width: max-content;
            animation: scroll 40s linear infinite
        }

        .track span {
            font: 500 1.15rem var(--head);
            color: var(--muted);
            padding: 0 34px;
            display: flex;
            align-items: center;
            gap: 68px
        }

        .track span::after {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--brown);
            opacity: .7
        }

        .marquee:hover .track {
            animation-play-state: paused
        }

        @keyframes scroll {
            to {
                transform: translateX(-50%)
            }
        }

        .bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 20px;
            margin-top: 60px
        }

        .card {
            --a: var(--blue);
            --at: var(--bt);
            position: relative;
            grid-column: span 4;
            padding: 34px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 26px;
            overflow: hidden;
            transition: transform .35s, box-shadow .35s, border-color .35s
        }

        .card:nth-child(2n) {
            --a: var(--green);
            --at: var(--gt)
        }

        .card:nth-child(3n) {
            --a: var(--brown);
            --at: var(--rt)
        }

        .card.s6 {
            grid-column: span 6
        }

        .card.s3 {
            grid-column: span 3
        }

        .card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--a) 16%, transparent), transparent 60%);
            opacity: 0;
            transition: opacity .3s
        }

        .card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow);
            border-color: color-mix(in srgb, var(--a) 50%, var(--line))
        }

        .card:hover::before {
            opacity: 1
        }

        .card>* {
            position: relative
        }

        .ico {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: color-mix(in srgb, var(--a) 14%, transparent);
            color: var(--at);
            margin-bottom: 26px
        }

        .ico svg {
            width: 26px;
            height: 26px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .card h3 {
            font: 600 1.35rem var(--head);
            margin-bottom: 10px
        }

        .card p {
            color: var(--muted);
            font-size: .97rem
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 22px
        }

        .tags em {
            font: 500 .78rem var(--head);
            font-style: normal;
            padding: 5px 12px;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--muted)
        }

        .dark-panel {
            background: #1F2933;
            color: #EDE7DF;
            border-radius: 36px;
            padding: clamp(40px, 6vw, 84px);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            position: relative;
            overflow: hidden
        }

        .dark-panel::before {
            content: "";
            position: absolute;
            width: 560px;
            height: 560px;
            right: -160px;
            top: -200px;
            background: radial-gradient(circle, rgba(111, 162, 194, .28), transparent 65%)
        }

        .dark-panel::after {
            content: "";
            position: absolute;
            width: 420px;
            height: 420px;
            left: -120px;
            bottom: -200px;
            background: radial-gradient(circle, rgba(166, 124, 82, .25), transparent 65%)
        }

        .dark-panel>* {
            position: relative;
            z-index: 1
        }

        .dark-panel .kicker {
            color: #C79A6B
        }

        .dark-panel .lead {
            color: rgba(237, 231, 223, .72)
        }

        .why {
            display: grid;
            gap: 26px;
            align-content: center
        }

        .why div {
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 18px;
            padding-bottom: 26px;
            border-bottom: 1px solid rgba(237, 231, 223, .14)
        }

        .why div:last-child {
            border: 0;
            padding: 0
        }

        .why svg {
            width: 44px;
            height: 44px;
            padding: 10px;
            border-radius: 14px;
            background: rgba(237, 231, 223, .08);
            fill: none;
            stroke: #7FA48B;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .why h4 {
            font: 600 1.1rem var(--head);
            margin-bottom: 4px
        }

        .why p {
            font-size: .93rem;
            color: rgba(237, 231, 223, .7)
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            margin-top: 64px;
            position: relative
        }

        .steps::before {
            content: "";
            position: absolute;
            top: 21px;
            left: 0;
            height: 2px;
            width: calc(var(--p, 0)*100%);
            background: linear-gradient(90deg, var(--blue), var(--green), var(--brown));
            transition: width 1.6s cubic-bezier(.3, .7, .2, 1)
        }

        .steps::after {
            content: "";
            position: absolute;
            top: 21px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--line);
            z-index: -1
        }

        .step b {
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--surface);
            border: 2px solid var(--a, var(--blue));
            font: 600 .95rem var(--head);
            color: var(--at, var(--bt));
            margin-bottom: 24px
        }

        .step:nth-child(2) {
            --a: var(--green);
            --at: var(--gt)
        }

        .step:nth-child(3) {
            --a: var(--brown);
            --at: var(--rt)
        }

        .step:nth-child(4) {
            --a: var(--ink);
            --at: var(--text)
        }

        .step h3 {
            font: 600 1.2rem var(--head);
            margin-bottom: 8px
        }

        .step p {
            font-size: .95rem;
            color: var(--muted)
        }

        .alt {
            background: var(--alt)
        }

        .contact {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 70px;
            align-items: start
        }

        .info {
            margin-top: 36px;
            display: grid;
            gap: 18px
        }

        .info a,
        .info span {
            display: flex;
            align-items: center;
            gap: 14px;
            font-weight: 500
        }

        .info svg {
            width: 44px;
            height: 44px;
            padding: 11px;
            border-radius: 14px;
            background: var(--surface);
            border: 1px solid var(--line);
            fill: none;
            stroke: var(--bt);
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        form {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 28px;
            padding: clamp(26px, 4vw, 44px);
            box-shadow: var(--shadow);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px
        }

        form .full {
            grid-column: 1/-1
        }

        label {
            display: grid;
            gap: 7px;
            font: 500 .85rem var(--head);
            color: var(--muted)
        }

        input,
        select,
        textarea {
            font: 400 .98rem var(--body);
            padding: 14px 16px;
            border-radius: 14px;
            border: 1.5px solid var(--line);
            background: var(--bg);
            color: var(--text);
            transition: border-color .2s, box-shadow .2s;
            width: 100%
        }

        input:focus,
        select:focus,
        textarea:focus {
            outline: 0;
            border-color: var(--blue);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent)
        }

        textarea {
            min-height: 130px;
            resize: vertical
        }

        #fmsg {
            font: 500 .9rem var(--head);
            color: var(--gt);
            min-height: 1.4em
        }

        footer {
            background: #1F2933;
            color: rgba(237, 231, 223, .7);
            padding: 70px 0 30px
        }

        .fgrid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1fr;
            gap: 40px
        }

        footer .lockup .word {
            color: #EDE7DF
        }

        footer .lockup .word b {
            color: #6FA2C2
        }

        footer h5 {
            font: 600 .95rem var(--head);
            color: #EDE7DF;
            margin-bottom: 16px
        }

        footer li {
            list-style: none;
            margin-bottom: 10px;
            font-size: .92rem
        }

        footer li a:hover {
            color: #fff
        }

        footer p {
            margin-top: 18px;
            font-size: .92rem;
            max-width: 34ch
        }

        .legal {
            margin-top: 50px;
            padding-top: 24px;
            border-top: 1px solid rgba(237, 231, 223, .14);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            font-size: .85rem
        }

        /* intro */
        #intro {
            position: fixed;
            inset: 0;
            z-index: 100;
            background: var(--intro-bg);
            transition: opacity .9s ease
        }

        #intro.out {
            opacity: 0;
            pointer-events: none
        }

        #introVideo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity .6s
        }

        #introVideo.on {
            opacity: 1
        }

        #flyLogo {
            position: fixed;
            z-index: 101;
            transform-origin: center
        }

        #skip {
            position: fixed;
            right: 24px;
            bottom: 22px;
            z-index: 102;
            background: none;
            border: 0;
            color: var(--muted);
            font: 500 13px var(--head);
            cursor: pointer
        }

        #skip:hover {
            color: var(--text)
        }

        .tag {
            position: fixed;
            left: 0;
            right: 0;
            top: calc(50% + 95px);
            z-index: 101;
            text-align: center;
            font: 500 12px var(--body);
            letter-spacing: .38em;
            color: var(--muted);
            opacity: 0;
            transition: opacity .8s;
            padding: 0 16px
        }

        .tag.on {
            opacity: 1
        }

        /* doodle logo build */
        #flyLogo .c-line {
            stroke-width: 9;
            stroke-linecap: round;
            fill: none;
            stroke-dasharray: 1;
            stroke-dashoffset: 1
        }

        #flyLogo circle:not(.ripple),
        #flyLogo .hubshape {
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0);
            opacity: 0
        }

        .ripple {
            opacity: 0;
            fill: none
        }

        #flyLogo .ripple {
            transform-box: fill-box;
            transform-origin: center;
            stroke: var(--l-brown);
            stroke-width: 5
        }

        #flyLogo .mono path {
            transform-box: fill-box;
            transform-origin: center;
            opacity: 0
        }

        #flyLogo .ch {
            opacity: 0
        }

        #flyLogo .sub {
            opacity: 0;
            letter-spacing: .1em
        }

        #flyLogo.build .c-line {
            animation: draw .55s ease forwards
        }

        #flyLogo.build circle:not(.ripple) {
            animation: bop .75s cubic-bezier(.3, 1, .4, 1) forwards
        }

        #flyLogo.build .hubshape {
            animation: bop .75s cubic-bezier(.3, 1, .4, 1) forwards, fire .6s ease 1.15s
        }

        #flyLogo.build .ripple {
            animation: ripple 1s ease-out 1.15s
        }

        #flyLogo.build .mono path {
            animation: snap .95s cubic-bezier(.3, .9, .3, 1) both
        }

        #flyLogo.build svg {
            animation: thud .6s ease 2.15s
        }

        #flyLogo.build .ch {
            animation: letter .8s cubic-bezier(.3, .9, .3, 1) both;
            animation-delay: calc(1.9s + var(--k)*.05s)
        }

        #flyLogo.build .sub {
            animation: track 1s ease 2.6s forwards
        }

        @keyframes draw {
            to {
                stroke-dashoffset: 0
            }
        }

        @keyframes bop {
            0% {
                transform: scale(0);
                opacity: 0
            }

            55% {
                transform: scale(1.45);
                opacity: 1
            }

            78% {
                transform: scale(.88)
            }

            100% {
                transform: scale(1);
                opacity: 1
            }
        }

        @keyframes fire {

            0%,
            100% {
                transform: scale(1)
            }

            40% {
                transform: scale(1.35)
            }
        }

        @keyframes ripple {
            0% {
                transform: scale(.4);
                opacity: .9
            }

            100% {
                transform: scale(5.5);
                opacity: 0
            }
        }

        @keyframes snap {
            0% {
                opacity: 0;
                transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(.3)
            }

            40% {
                opacity: 1
            }

            65% {
                transform: translate(0, 0) rotate(calc(var(--r)*-.12)) scale(1.12)
            }

            82% {
                transform: rotate(calc(var(--r)*.05)) scale(.97)
            }

            100% {
                opacity: 1;
                transform: none
            }
        }

        @keyframes thud {

            0%,
            100% {
                transform: scale(1)
            }

            30% {
                transform: scale(1.08, .9)
            }

            60% {
                transform: scale(.97, 1.05)
            }
        }

        @keyframes letter {
            0% {
                opacity: 0;
                transform: translateY(60px) scale(.3) rotate(var(--rot, 0deg))
            }

            60% {
                opacity: 1;
                transform: translateY(-12px) scale(1.2) rotate(calc(var(--rot, 0deg)*-.3))
            }

            80% {
                transform: translateY(3px) scale(.96)
            }

            100% {
                opacity: 1;
                transform: none
            }
        }

        @keyframes track {
            to {
                opacity: 1;
                letter-spacing: .32em
            }
        }

        .bit {
            position: fixed;
            z-index: 103;
            pointer-events: none;
            font: 600 17px var(--head);
            line-height: 1
        }

        /* aurora + intro scene (timeline phase) */
        .aurora {
            position: absolute;
            inset: -12%;
            pointer-events: none;
            animation: drift 16s ease-in-out infinite alternate;
            background:
                radial-gradient(40% 38% at 36% 6%, rgba(166, 124, 82, .85), transparent 72%),
                radial-gradient(38% 42% at 76% 16%, rgba(79, 111, 90, .8), transparent 72%),
                radial-gradient(34% 34% at 12% 10%, rgba(62, 107, 132, .65), transparent 72%)
        }

        @keyframes drift {
            to {
                transform: translate3d(3%, 2%, 0) scale(1.08)
            }
        }

        .hero .aurora {
            opacity: .55
        }

        #intro .aurora {
            opacity: .6
        }

        #intro.idark .aurora {
            opacity: 1
        }

        .idark {
            --l-dark: #EDE7DF;
            --l-blue: #6FA2C2;
            --l-green: #7FA48B;
            --text: #EDE7DF;
            --muted: rgba(237, 231, 223, .72)
        }

        #intro.idark {
            background: #10161c
        }

        #flyLogo * {
            transition: fill 1.1s ease, color 1.1s ease, stroke 1.1s ease
        }

        #scene {
            position: absolute;
            inset: 0;
            color: var(--text);
            transition: opacity .8s
        }

        #scene.gone {
            opacity: 0
        }

        .yr {
            position: absolute;
            left: max(24px, 7vw);
            top: 50%;
            translate: 0 -50%
        }

        #yy {
            display: block;
            font: 600 clamp(1rem, 1.8vw, 1.5rem) var(--head);
            letter-spacing: .35em;
            color: var(--rt);
            margin-bottom: 6px;
            transition: opacity .2s
        }

        #yrbox {
            display: grid;
            font: 600 clamp(3rem, 7.4vw, 7rem)/1.08 var(--head);
            letter-spacing: -.04em;
            white-space: nowrap
        }

        #yrbox span {
            grid-area: 1/1;
            transition: transform .2s cubic-bezier(.3, .8, .3, 1), opacity .2s
        }

        #yrbox .in {
            transform: translateY(55%);
            opacity: 0
        }

        #yrbox .out {
            transform: translateY(-55%);
            opacity: 0
        }

        .yt {
            position: absolute;
            left: calc(50% + 5vw);
            top: 50%;
            translate: 0 -50%;
            max-width: 20ch;
            font: 600 clamp(1.3rem, 2.7vw, 2.5rem)/1.25 var(--head);
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 1s, transform 1s
        }

        .yt.on {
            opacity: 1;
            transform: none
        }

        .vline {
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 2px;
            margin-left: -1px;
            height: calc(var(--p, 0)*82%);
            background: linear-gradient(to top, transparent, var(--text) 75%)
        }

        .mk {
            position: absolute;
            top: -24px;
            left: 50%;
            width: 48px;
            height: 48px;
            margin-left: -24px;
            border-radius: 15px;
            display: grid;
            place-items: center;
            background: #1d2832;
            border: 1.5px solid var(--brown);
            box-shadow: 0 0 0 7px rgba(166, 124, 82, .2), 0 0 40px 8px rgba(166, 124, 82, .45)
        }

        .mk svg {
            grid-area: 1/1;
            width: 24px;
            height: 24px;
            fill: none;
            stroke: #EDE7DF;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: 0;
            transform: scale(.5) rotate(-25deg);
            transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1)
        }

        .mk svg.on {
            opacity: 1;
            transform: none
        }

        @media (max-width:700px) {
            .yr {
                top: 36%;
                left: 24px
            }

            .yt {
                left: 24px;
                top: 62%;
                translate: 0 0;
                max-width: 22ch
            }

            .vline {
                left: auto;
                right: 30px
            }
        }

        .rv {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .8s, transform .8s cubic-bezier(.2, .7, .2, 1)
        }

        .rv.in {
            opacity: 1;
            transform: none
        }

        @media (max-width:980px) {

            .card,
            .card.s6,
            .card.s3 {
                grid-column: span 6
            }

            .dark-panel,
            .contact {
                grid-template-columns: 1fr
            }

            .steps {
                grid-template-columns: 1fr 1fr;
                row-gap: 40px
            }

            .steps::before,
            .steps::after {
                display: none
            }

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

        @media (max-width:860px) {

            nav ul,
            nav .btn {
                display: none
            }

            .burger {
                display: block
            }

            nav.open ul {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: calc(100% + 12px);
                left: 0;
                right: 0;
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 24px;
                padding: 22px 28px;
                gap: 18px;
                box-shadow: 0 24px 44px -14px rgba(0, 0, 0, .35)
            }

            .lockup svg {
                height: 38px
            }

            .lockup .word {
                font-size: 20px
            }

            .lockup .sub {
                font-size: 8px
            }

            .stats {
                grid-template-columns: 1fr 1fr;
                bottom: 24px
            }

            .qk {
                padding: 16px 18px
            }

            .qk:nth-child(2) {
                border-right: 0
            }

            .qk:nth-child(-n+2) {
                border-bottom: 1px solid var(--line)
            }

            .hero .wrap {
                padding-bottom: 300px
            }
        }

        @media (max-width:620px) {
            .qk span {
                display: none
            }

            .qk {
                grid-template-columns: 36px 1fr;
                column-gap: 10px
            }

            .qk svg {
                width: 36px;
                height: 36px;
                padding: 8px;
                grid-row: auto
            }

            .card,
            .card.s6,
            .card.s3 {
                grid-column: span 12
            }

            form {
                grid-template-columns: 1fr
            }

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

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

        @media (prefers-reduced-motion:reduce) {
            * {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important
            }
        }