:root {
            --blue: #2B78E4;
            --green: #289E68;
            --brown: #D97706;
            --ink: #1E293B;
            --red: #E0795A;
            --head: 'Poppins', system-ui, sans-serif;
            --body: 'Montserrat', system-ui, sans-serif;
            --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            --nav-h: 78px;
            --a: var(--blue);
            --at: var(--bt)
        }

        [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;
            --shadow: 0 24px 60px -24px rgba(31, 41, 51, .25)
        }

        [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;
            --shadow: 0 24px 60px -24px rgba(0, 0, 0, .6)
        }

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

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

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

        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))
        }

        /* curtain */
        #curtain {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: #1F2933;
            display: grid;
            place-items: center;
            transform-origin: top;
            transition: transform .75s cubic-bezier(.7, 0, .2, 1)
        }

        #curtain .ci {
            width: 86px;
            height: 86px;
            border-radius: 26px;
            display: grid;
            place-items: center;
            background: rgba(237, 231, 223, .08);
            border: 1.5px solid rgba(237, 231, 223, .18);
            transition: opacity .3s, transform .5s
        }

        #curtain svg {
            width: 40px;
            height: 40px;
            fill: none;
            stroke: #EDE7DF;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        body.loaded #curtain {
            transform: scaleY(0)
        }

        body.loaded #curtain .ci {
            opacity: 0;
            transform: scale(.6)
        }

        body.leaving #curtain {
            transform: scaleY(1);
            transform-origin: bottom
        }

        /* 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 */
        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: 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);
            color: var(--text);
            transition: background .4s, box-shadow .4s
        }

        nav.solid {
            background: var(--surface);
            box-shadow: 0 20px 48px -10px rgba(0, 0, 0, .22)
        }

        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);
            padding: 0
        }

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

        nav ul a:hover,
        nav ul a.on {
            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,
        nav ul a.on::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
        }

        .p-dark nav:not(.solid) {
            --l-dark: #EDE7DF;
            --l-blue: #6FA2C2;
            --text: #EDE7DF;
            --muted: rgba(237, 231, 223, .7);
            --line: rgba(237, 231, 223, .16);
            --surface: #16202a
        }

        .p-dark nav:not(.solid) .btn-primary {
            background: var(--brown)
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            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;
            color: inherit
        }

        .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)
        }

        .btn-sm {
            padding: 9px 18px;
            font-size: 13px
        }

        nav .btn {
            padding: 11px 22px
        }

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

        /* shared hero */
        .hero {
            position: relative;
            overflow: hidden;
            background: var(--alt);
            padding: calc(var(--nav-h) + 90px) 0 80px
        }

        .hero .in {
            position: relative;
            z-index: 2
        }

        .gridbg {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
            background-size: 56px 56px;
            -webkit-mask-image: radial-gradient(ellipse at 72% 40%, #000 0%, transparent 65%);
            mask-image: radial-gradient(ellipse at 72% 40%, #000 0%, transparent 65%);
            animation: gridmove 18s linear infinite
        }

        @keyframes gridmove {
            to {
                background-position: 56px 56px
            }
        }

        .aurora {
            position: absolute;
            inset: -12%;
            pointer-events: none;
            opacity: .5;
            animation: drift 16s ease-in-out infinite alternate;
            background: radial-gradient(40% 38% at 36% 6%, rgba(166, 124, 82, .8), transparent 72%), radial-gradient(38% 42% at 80% 20%, rgba(79, 111, 90, .7), transparent 72%), radial-gradient(34% 34% at 10% 12%, rgba(62, 107, 132, .6), transparent 72%)
        }

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

        .split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: center
        }

        .crumb {
            display: flex;
            gap: 10px;
            align-items: center;
            font: 500 13px var(--head);
            color: var(--muted)
        }

        .crumb a:hover {
            color: var(--text)
        }

        .crumb b {
            font-weight: 600;
            color: var(--at)
        }

        .h1 {
            font: 600 clamp(2.4rem, 5vw, 4.4rem)/1.05 var(--head);
            letter-spacing: -.03em;
            margin-top: 24px
        }

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

        .h1 .w span {
            display: inline-block;
            transform: translateY(110%)
        }

        .h1 .g span {
            color: var(--at)
        }

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

        p.sub {
            max-width: 50ch;
            margin: 26px 0 36px;
            font-size: 1.08rem;
            color: var(--muted)
        }

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

        .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)
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 13px;
            border-radius: 99px;
            background: var(--surface);
            border: 1px solid var(--line);
            font: 600 12px var(--head);
            color: var(--text)
        }

        .pill i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--green);
            animation: pulse 2s infinite
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(40, 158, 104, .6)
            }

            70%,
            100% {
                box-shadow: 0 0 0 8px rgba(40, 158, 104, 0)
            }
        }

        /* stats */
        .sstats {
            position: relative;
            z-index: 2;
            margin-top: 70px;
            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);
            overflow: hidden
        }

        .st {
            padding: 26px 28px;
            border-right: 1px solid var(--line)
        }

        .st:last-child {
            border-right: 0
        }

        .st b {
            display: block;
            font: 600 clamp(1.5rem, 3vw, 2.3rem)/1.1 var(--head);
            letter-spacing: -.02em;
            color: var(--bt)
        }

        .st:nth-child(2) b {
            color: var(--gt)
        }

        .st:nth-child(3) b {
            color: var(--rt)
        }

        .st:nth-child(4) b {
            color: var(--text)
        }

        .st span {
            font-size: .85rem;
            color: var(--muted)
        }

        /* switcher */
        .switch {
            padding: 22px 0;
            border-block: 1px solid var(--line);
            background: var(--surface)
        }

        .switch .wrap {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            scrollbar-width: none;
            align-items: center
        }

        .switch .wrap::-webkit-scrollbar {
            display: none
        }

        .switch small {
            flex: none;
            font: 600 .8rem var(--head);
            color: var(--rt);
            margin-right: 8px
        }

        .switch a {
            flex: none;
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 10px 18px;
            border-radius: 999px;
            border: 1px solid var(--line);
            font: 500 14px var(--head);
            color: var(--muted);
            transition: color .2s, border-color .2s, background .2s, transform .2s
        }

        .switch a svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .switch a:hover {
            color: var(--text);
            border-color: var(--text);
            transform: translateY(-2px)
        }

        .switch a.on {
            background: var(--ink);
            color: #fff;
            border-color: var(--ink)
        }

        [data-theme=dark] .switch a.on {
            background: var(--brown);
            border-color: var(--brown)
        }

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

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

        .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
        }

        .duo {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center
        }

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

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

        .ln {
            display: block;
            height: 6px;
            border-radius: 4px;
            background: var(--line);
            flex: none
        }

        .dot {
            width: 14px;
            height: 14px;
            border-radius: 5px;
            background: var(--a);
            flex: none
        }

        .tag {
            display: inline-block;
            font: 600 11px var(--head);
            padding: 4px 10px;
            border-radius: 99px;
            background: color-mix(in srgb, var(--c, var(--a)) 16%, transparent);
            color: var(--ct, var(--at));
            font-style: normal;
            white-space: nowrap
        }

        .bar {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 13px 18px;
            border-bottom: 1px solid var(--line)
        }

        .bar i {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #C79A6B
        }

        .bar i:nth-child(2) {
            background: #6FA2C2
        }

        .bar i:nth-child(3) {
            background: #7FA48B
        }

        .bar span {
            margin-left: auto;
            font: 500 12px var(--head);
            color: var(--muted)
        }

        .win {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 20px;
            box-shadow: var(--shadow);
            overflow: hidden
        }

        input[type=range] {
            width: 100%;
            accent-color: var(--a);
            margin: 14px 0 6px;
            cursor: pointer
        }

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

        .card {
            --c: var(--blue);
            --ct: 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(3n+2) {
            --c: var(--green);
            --ct: var(--gt)
        }

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

        .card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 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(--c) 50%, var(--line))
        }

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

        .card>* {
            position: relative
        }

        .card>.num {
            position: absolute;
            right: 26px;
            top: 16px;
            font: 600 4.6rem/1 var(--head);
            color: transparent;
            -webkit-text-stroke: 1px var(--line);
            transition: transform .4s, -webkit-text-stroke-color .4s
        }

        .card:hover>.num {
            -webkit-text-stroke-color: color-mix(in srgb, var(--c) 60%, transparent);
            transform: translateY(-4px)
        }

        .card:hover .ico {
            transform: rotate(-8deg) scale(1.08)
        }

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

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

        /* dark panel + terminal */
        .dark-panel {
            background: #1F2933;
            color: #EDE7DF;
            border-radius: 36px;
            padding: clamp(36px, 6vw, 80px);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            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)
        }

        .outs {
            list-style: none;
            padding: 0;
            margin-top: 30px;
            display: grid;
            gap: 14px
        }

        .outs li {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            font-size: .97rem;
            opacity: 0;
            transform: translateX(-16px);
            transition: opacity .6s, transform .6s;
            transition-delay: calc(var(--k)*.12s + .3s)
        }

        .in .outs li {
            opacity: 1;
            transform: none
        }

        .outs svg {
            flex: none;
            width: 26px;
            height: 26px;
            padding: 5px;
            border-radius: 50%;
            background: rgba(127, 164, 139, .18);
            fill: none;
            stroke: #7FA48B;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .term {
            background: #0f151b;
            border: 1px solid rgba(237, 231, 223, .12);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
            font: 500 .88rem/1.9 var(--mono)
        }

        .term .bar,
        .ide .bar {
            border-color: rgba(237, 231, 223, .08)
        }

        .term .bar span,
        .ide .bar span {
            color: rgba(237, 231, 223, .5)
        }

        .term pre {
            padding: 22px 24px;
            min-height: 240px;
            white-space: pre-wrap;
            color: #EDE7DF;
            margin: 0;
            font: inherit
        }

        .term .cmd {
            color: #6FA2C2
        }

        .term .ok {
            color: #7FA48B
        }

        .term .warn {
            color: #C79A6B
        }

        .term .dim {
            color: rgba(237, 231, 223, .6)
        }

        .caret {
            display: inline-block;
            width: 9px;
            height: 1.1em;
            background: #C79A6B;
            vertical-align: -3px;
            animation: blink 1s steps(1) infinite
        }

        @keyframes blink {
            50% {
                opacity: 0
            }
        }

        /* horizontal steps */
        .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(--sa, var(--blue));
            color: var(--sat, var(--bt));
            margin-bottom: 24px;
            position: relative;
            z-index: 1
        }

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

        .step:nth-child(2) {
            --sa: var(--green);
            --sat: var(--gt)
        }

        .step:nth-child(3) {
            --sa: var(--brown);
            --sat: var(--rt)
        }

        .step:nth-child(4) {
            --sa: var(--ink);
            --sat: var(--text)
        }

        .step small {
            display: block;
            font: 600 .75rem var(--head);
            letter-spacing: .2em;
            color: var(--muted);
            margin-bottom: 6px
        }

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

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

        /* stack */
        .stack {
            padding: 60px 0 0
        }

        .stack .kicker {
            justify-content: center
        }

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

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

        .track {
            display: flex;
            width: max-content;
            animation: scroll 36s 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%)
            }
        }

        /* faq */
        .faq {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 60px;
            align-items: start
        }

        details {
            border-bottom: 1px solid var(--line);
            padding: 24px 0
        }

        details:first-child {
            border-top: 1px solid var(--line)
        }

        summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            font: 600 1.1rem var(--head)
        }

        summary::-webkit-details-marker {
            display: none
        }

        summary i {
            flex: none;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid var(--line);
            display: grid;
            place-items: center;
            font-style: normal;
            font-size: 1.2rem;
            transition: transform .35s, background .35s, color .35s
        }

        summary i::before {
            content: "+"
        }

        details[open] summary i {
            transform: rotate(45deg);
            background: var(--ink);
            color: #fff;
            border-color: transparent
        }

        details p {
            color: var(--muted);
            margin-top: 12px;
            max-width: 62ch;
            animation: fadeup .45s ease
        }

        @keyframes fadeup {
            from {
                opacity: 0;
                transform: translateY(-8px)
            }
        }

        /* next + cta + footer */
        .next {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            padding: clamp(34px, 5vw, 60px);
            border-radius: 32px;
            background: var(--surface);
            border: 1px solid var(--line);
            position: relative;
            overflow: hidden
        }

        .next::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 10%, transparent), color-mix(in srgb, var(--green) 10%, transparent), color-mix(in srgb, var(--brown) 10%, transparent));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .7s cubic-bezier(.3, .7, .2, 1)
        }

        .next:hover::before {
            transform: none
        }

        .next>* {
            position: relative
        }

        .next small {
            font: 600 .85rem var(--head);
            color: var(--rt);
            letter-spacing: .15em
        }

        .next h3 {
            font: 600 clamp(1.8rem, 4.2vw, 3.4rem)/1.1 var(--head);
            letter-spacing: -.025em;
            margin-top: 8px
        }

        .next .arr {
            flex: none;
            width: clamp(64px, 8vw, 92px);
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--ink);
            color: #fff;
            display: grid;
            place-items: center;
            transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), background .3s
        }

        .next .arr svg {
            width: 40%;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .next:hover .arr {
            transform: rotate(-45deg) scale(1.08);
            background: var(--blue)
        }

        .cta {
            text-align: center;
            justify-items: center;
            grid-template-columns: 1fr
        }

        .cta h2 {
            max-width: 22ch;
            margin-inline: auto
        }

        .cta .lead {
            margin-inline: auto
        }

        .cta .actions {
            justify-content: center;
            margin-top: 34px
        }

        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 ul {
            padding: 0
        }

        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
        }

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

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

        /* ===================== RESPONSIVE ===================== */
        @media (max-width:980px) {

            .split,
            .duo,
            .show,
            .layers,
            .mat,
            .dark-panel,
            .faq {
                grid-template-columns: 1fr
            }

            .card {
                grid-column: span 6
            }

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

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

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

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

            .ide pre {
                min-height: 200px
            }

            .kb,
            .esteps {
                grid-template-columns: 1fr 1fr
            }

            .stages {
                grid-template-columns: repeat(3, 1fr)
            }

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

            .edgrid .memo {
                grid-column: 1/-1;
                max-width: 460px
            }

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

            .elist,
            .sl {
                grid-template-columns: 1fr
            }

            .sl article:nth-child(odd) {
                border-right: 0
            }

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

            .row {
                grid-template-columns: 60px 54px 1fr
            }

            .row p {
                grid-column: 3
            }
        }

        @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
            }

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

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

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

            .hud .pill:last-child {
                display: none
            }
        }

        @media (max-width:620px) {
            .card {
                grid-column: span 12
            }

            .steps,
            .fgrid,
            .kb,
            .esteps,
            .cg,
            .edgrid {
                grid-template-columns: 1fr
            }

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

            .st {
                padding: 18px
            }

            .next {
                flex-direction: column;
                align-items: flex-start
            }

            .row {
                grid-template-columns: 54px 1fr;
                padding-inline: 0
            }

            .row .n {
                display: none
            }

            .row p {
                grid-column: 1/-1
            }

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

            .kpis .kpi:last-child {
                display: none
            }

            .sys {
                grid-template-columns: 100px 1fr 46px;
                padding-inline: 16px
            }

            .sla>div {
                grid-template-columns: 44px 1fr
            }

            .sla em {
                grid-column: 2
            }

            .fan {
                transform: scale(.78);
                height: 300px
            }

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

            .m-tl {
                grid-template-columns: 70px 1fr
            }

            .stage {
                min-height: 440px
            }

            .cells {
                gap: 4px
            }
        }

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