.home-surface-page {
    background-color: #25120e;
    background-image:
        radial-gradient(ellipse at 16% 9%, rgba(153, 80, 47, .3), transparent 34%),
        radial-gradient(ellipse at 80% 18%, rgba(20, 49, 75, .3), transparent 40%),
        repeating-linear-gradient(94deg, rgba(30, 12, 9, .95) 0, rgba(88, 42, 27, .92) 8px,
            rgba(43, 19, 14, .96) 16px, rgba(112, 55, 33, .88) 24px, rgba(35, 15, 12, .96) 35px);
    background-attachment: fixed;
}

.home-surface-page .site-header {
    color: #f4efe5;
    border-color: rgba(235, 223, 202, .23);
    background: linear-gradient(90deg, rgba(19, 8, 7, .38), rgba(8, 22, 36, .54));
}

.home-surface-page .brand span {
    color: #25130f;
    background: radial-gradient(circle at 35% 28%, #fffdf2, #d7c9b2 56%, #8b705d);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 0 0 2px rgba(159, 112, 255, .14), 0 0 14px rgba(154, 104, 224, .34);
}

.home-surface-page .hero {
    --halo-proximity: 0;
    --halo-light-x: 25%;
    --halo-light-y: 18%;
    --halo-center-x: 75%;
    --halo-center-y: 42%;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    color: #f5efe4;
    background: linear-gradient(180deg, rgba(8, 20, 33, .18), rgba(7, 20, 34, .82));
    box-shadow: inset 0 -90px 110px rgba(7, 20, 34, .46);
}
.home-surface-page .hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: calc(min(56vw, 850px) + 800px);
    aspect-ratio: 1;
    left: var(--halo-center-x);
    top: var(--halo-center-y);
    padding: 400px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--halo-light-x) var(--halo-light-y),
            rgb(246 251 248 / calc(.05 + var(--halo-proximity) * .75)) 0 2%,
            rgb(112 207 240 / calc(.03 + var(--halo-proximity) * .52)) 8%,
            transparent 28%),
        radial-gradient(circle at 50% 50%,
            rgb(214 104 69 / calc(.12 + var(--halo-proximity) * .12)) 23%,
            rgb(174 208 219 / calc(.07 + var(--halo-proximity) * .07)) 31%,
            rgb(151 120 181 / calc(.035 + var(--halo-proximity) * .04)) 39%,
            rgb(100 160 190 / calc(.012 + var(--halo-proximity) * .018)) 46%,
            transparent 50%);
    box-shadow:
        0 0 0 12px rgb(105 201 236 / calc(.012 + var(--halo-proximity) * .018)),
        0 0 0 32px rgb(151 120 181 / calc(.006 + var(--halo-proximity) * .01)),
        0 0 0 120px rgb(100 160 190 / calc(.003 + var(--halo-proximity) * .005)),
        0 0 0 200px rgb(151 120 181 / calc(.0015 + var(--halo-proximity) * .003)),
        0 0 calc(22px + var(--halo-proximity) * 30px) rgb(92 190 232 / calc(.03 + var(--halo-proximity) * .18));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: calc(.58 + var(--halo-proximity) * .34);
    filter:
        drop-shadow(0 0 calc(8px + var(--halo-proximity) * 10px) rgb(89 190 229 / calc(.08 + var(--halo-proximity) * .2)))
        drop-shadow(0 0 calc(18px + var(--halo-proximity) * 17px) rgb(178 104 222 / calc(.035 + var(--halo-proximity) * .11)));
    transform: translate(-50%, -50%);
}

.home-surface-page .hero h1 em {
    color: #d9bcff;
    text-shadow: 0 0 25px rgba(156, 97, 255, .34);
}

.home-surface-page .hero-bottom {
    margin-top: auto;
    padding-top: clamp(150px, 21vh, 280px);
}
.home-surface-page .hero-bottom > p { color: #c8d1d5; }
.home-surface-page .circle-link {
    --surface-proximity: 0;
    border-width: 2px;
    border-color: rgb(218 205 235 / calc(.42 + var(--surface-proximity) * .5));
    color: #f5efe4;
    background: rgba(5, 15, 25, .04);
    box-shadow:
        0 0 0 1px rgb(112 197 255 / calc(.04 + var(--surface-proximity) * .2)),
        0 0 calc(8px + var(--surface-proximity) * 22px) rgb(136 93 255 / calc(.08 + var(--surface-proximity) * .42)),
        inset 0 0 calc(4px + var(--surface-proximity) * 9px) rgb(112 197 255 / calc(.03 + var(--surface-proximity) * .16));
    transition: color .24s ease, background .24s ease, border-color .3s ease, box-shadow .38s ease, transform .3s ease;
}
.home-surface-page .circle-link:hover {
    color: #f5efe4;
    background: rgba(5, 15, 25, .12);
    transform: translateY(-2px);
}
.home-surface-page .circle-link.is-surface-clicked {
    box-shadow: 0 0 0 1px rgba(222, 205, 255, .7), 0 0 36px rgba(164, 102, 255, .78), inset 0 0 14px rgba(190, 225, 255, .3);
}

.home-surface-page .hero-object {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 28% 20%, rgba(255, 255, 255, .93) 0 2%, rgba(190, 212, 215, .58) 6%, transparent 17%),
        radial-gradient(ellipse at 67% 30%, transparent 0 20%, rgba(118, 212, 255, .38) 21%, rgba(4, 85, 137, .38) 27%, transparent 36%),
        radial-gradient(ellipse at 34% 72%, transparent 0 18%, rgba(208, 221, 220, .65) 20%, rgba(42, 54, 59, .85) 29%, transparent 38%),
        conic-gradient(from 224deg at 47% 49%, #060a0e, #343d40 11%, #aeb8b8 16%, #262e31 22%,
            #05080b 31%, #536267 41%, #cad1cf 47%, #222b30 54%, #04080c 66%, #456574 78%, #929c9d 88%, #080d11);
    border: 1px solid rgba(204, 220, 219, .62);
    border-radius: 46% 54% 61% 39% / 44% 39% 61% 56%;
    box-shadow: inset -38px -40px 90px rgba(0, 4, 8, .78), inset 22px 18px 48px rgba(255, 255, 255, .14),
                inset 0 0 0 8px rgba(3, 8, 12, .3), 0 0 0 1px rgba(100, 188, 226, .14), 0 0 48px rgba(21, 133, 205, .24),
                24px 28px 65px rgba(0, 0, 0, .34);
}
.home-surface-page .hero-object::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    inset: 7%;
    border-radius: 48% 52% 43% 57% / 58% 39% 61% 42%;
    border: clamp(8px, 1vw, 14px) solid rgba(5, 10, 14, .76);
    background:
        radial-gradient(ellipse at 66% 31%, rgba(20, 161, 229, .78) 0 5%, rgba(3, 55, 91, .58) 11%, transparent 20%),
        radial-gradient(ellipse at 32% 69%, rgba(168, 185, 188, .84) 0 5%, rgba(34, 43, 47, .9) 12%, transparent 22%),
        repeating-radial-gradient(ellipse at 48% 54%, transparent 0 17px, rgba(219, 226, 224, .24) 19px,
            rgba(8, 12, 16, .72) 25px, transparent 31px);
    box-shadow: inset 12px 8px 18px rgba(218, 228, 226, .27), inset -14px -16px 28px rgba(0, 0, 0, .82),
                0 0 0 2px rgba(181, 194, 194, .32), 0 0 0 7px rgba(4, 8, 12, .58),
                12px 8px 0 -7px rgba(132, 82, 49, .76), -13px -6px 0 -8px rgba(172, 190, 190, .48);
    transform: rotate(-12deg);
    opacity: .9;
}
.home-surface-page .hero-object::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 82%;
    height: 42%;
    left: 8%;
    top: 19%;
    border-radius: 48% 52% 62% 38% / 60% 44% 56% 40%;
    border-top: 5px solid rgba(235, 241, 238, .7);
    border-bottom: 9px solid rgba(3, 7, 11, .75);
    background: linear-gradient(168deg, rgba(2, 7, 11, .18), rgba(176, 190, 191, .24) 46%, rgba(3, 68, 108, .32) 64%, transparent 78%);
    box-shadow: inset 0 8px 12px rgba(255, 255, 255, .08), 0 -3px 12px rgba(177, 224, 235, .18);
    transform: rotate(-16deg);
    filter: blur(.15px);
}
.home-surface-page .hero-object .hero-reflection {
    position: absolute;
    z-index: 2;
    width: 72%;
    height: auto;
    aspect-ratio: auto;
    left: 2%;
    top: 58%;
    border: 0;
    border-radius: 0;
    color: rgba(211, 233, 239, .3);
    background: linear-gradient(104deg, rgba(237, 246, 246, .5), rgba(83, 181, 220, .2) 48%, transparent 82%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    box-shadow: none;
    font-size: clamp(18px, 2.2vw, 34px);
    font-weight: 650;
    line-height: .86;
    letter-spacing: -.065em;
    text-align: center;
    text-shadow: 0 -1px rgba(255, 255, 255, .12), 0 3px 7px rgba(42, 167, 218, .16);
    mix-blend-mode: screen;
    opacity: .36;
    filter: blur(.45px);
    transform: perspective(260px) rotateX(52deg) rotateZ(-22deg) skewX(-13deg) scaleX(.92);
    transform-origin: 50% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 62%, transparent 94%);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 62%, transparent 94%);
}
.home-surface-page .hero-object .hero-core {
    z-index: 2;
    width: 42%;
    left: 29%;
    top: 29%;
    border-color: rgba(155, 210, 226, .78);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 91%, rgba(46, 197, 255, .92) 0 4%, rgba(4, 102, 160, .62) 16%, transparent 43%),
        radial-gradient(circle at 46% 43%, #0a2533 0 12%, #06141c 40%, #010407 76%);
    box-shadow: inset 4px 5px 11px rgba(200, 231, 237, .25), inset -9px -12px 22px rgba(0, 0, 0, .94),
                0 0 0 9px rgba(4, 9, 13, .88), 0 0 0 12px rgba(190, 205, 204, .54),
                0 0 0 17px rgba(5, 10, 14, .82), 0 9px 32px rgba(15, 149, 221, .5);
}
.home-surface-page .hero-object .hero-core b {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    padding-bottom: 4%;
    color: rgba(213, 231, 232, .9);
    font-size: clamp(25px, 3.9vw, 59px);
    font-weight: 760;
    letter-spacing: -.17em;
    line-height: 1;
    text-indent: -.08em;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .5), 2px 3px 2px rgba(0, 0, 0, .88),
                 0 8px 14px rgba(36, 184, 240, .38);
    transform: perspective(160px) rotateX(10deg) skewX(-7deg);
}
.home-surface-page .hero-object .hero-core::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 10%;
    right: 10%;
    bottom: -5%;
    height: 48%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 100%, rgba(101, 222, 255, .96), rgba(9, 127, 198, .5) 35%, transparent 72%);
    filter: blur(4px);
}
.home-surface-page .hero-object .hero-core::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 5% 9% 42% 11%;
    border-radius: 50% 50% 42% 48%;
    background: linear-gradient(155deg, rgba(255, 255, 255, .72), rgba(191, 227, 235, .24) 28%, rgba(255, 255, 255, .03) 62%, transparent 75%);
    filter: blur(.35px);
    transform: rotate(-8deg);
}

.home-surface-page .hero-object:hover .hero-core {
    box-shadow: inset 4px 5px 11px rgba(220, 241, 244, .3), inset -9px -12px 22px rgba(0, 0, 0, .94),
                0 0 0 9px rgba(4, 9, 13, .88), 0 0 0 12px rgba(207, 217, 213, .62),
                0 0 0 17px rgba(5, 10, 14, .82), 0 10px 40px rgba(20, 164, 229, .68);
}

/* A sculpted MM chassis: one upper-left key light, with illumination contained in the lower glass recess. */
.home-surface-page .hero-object {
    width: min(36vw, 540px);
    aspect-ratio: 1.24;
    top: 36vh;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(148deg, rgba(239, 242, 238, .88) 0 3%, rgba(93, 102, 103, .88) 11%, #20262a 27%, #080c10 54%, #020508 78%),
        #090d11;
    clip-path: polygon(5% 24%, 18% 8%, 39% 15%, 50% 5%, 62% 15%, 83% 8%, 96% 25%, 88% 48%, 96% 74%, 79% 92%, 61% 84%, 50% 96%, 38% 84%, 20% 92%, 4% 74%, 12% 49%);
    box-shadow: 18px 26px 48px rgba(0, 0, 0, .42);
    transform: rotate(6deg);
}
.home-surface-page .hero-object::before {
    z-index: 0;
    inset: 6%;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(153deg, rgba(255, 255, 255, .36), transparent 15%),
        linear-gradient(168deg, #616a6c 0 4%, #141a1e 17%, #04080b 53%, #20292d 77%, #080c10 100%);
    clip-path: polygon(1% 24%, 18% 3%, 40% 14%, 50% 1%, 61% 14%, 83% 3%, 99% 25%, 85% 49%, 99% 76%, 78% 99%, 60% 84%, 50% 99%, 39% 84%, 20% 99%, 1% 76%, 15% 49%);
    box-shadow: none;
    opacity: 1;
    transform: none;
}
.home-surface-page .hero-object::after {
    z-index: 1;
    width: 86%;
    height: 45%;
    left: 7%;
    top: 28%;
    border: 0;
    border-radius: 42% 58% 46% 54% / 55% 46% 54% 45%;
    background:
        linear-gradient(158deg, rgba(224, 230, 228, .7) 0 3%, rgba(81, 91, 94, .9) 12%, #11171b 31%, #03070a 68%, #26343a 92%);
    box-shadow: inset 7px 7px 10px rgba(255, 255, 255, .12), inset -10px -12px 18px rgba(0, 0, 0, .8),
                0 0 0 7px rgba(2, 5, 8, .74);
    filter: none;
    transform: rotate(-4deg);
}
.home-surface-page .hero-object .hero-core {
    z-index: 3;
    width: 66%;
    height: 38%;
    aspect-ratio: auto;
    left: 17%;
    top: 31%;
    border: 1px solid rgba(181, 199, 201, .56);
    border-radius: 34% 66% 38% 62% / 58% 40% 60% 42%;
    background:
        linear-gradient(160deg, rgba(206, 229, 234, .2), transparent 27%),
        linear-gradient(180deg, #0c171d 0, #061017 56%, #052e47 83%, #0876ad 100%);
    box-shadow: inset 8px 7px 14px rgba(218, 233, 233, .13), inset -10px -12px 20px rgba(0, 0, 0, .86),
                0 0 0 8px rgba(3, 7, 10, .9), 0 0 0 10px rgba(118, 130, 131, .48),
                0 14px 24px rgba(0, 83, 133, .22);
    transform: rotate(-3deg);
}
.home-surface-page .hero-object .hero-core::before {
    left: 9%;
    right: 9%;
    bottom: -8%;
    height: 38%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 100%, rgba(83, 210, 255, .92), rgba(5, 105, 166, .44) 42%, transparent 76%);
    filter: blur(5px);
}
.home-surface-page .hero-object .hero-core::after {
    inset: 5% 12% 54% 9%;
    border-radius: 70% 40% 50% 34%;
    background: linear-gradient(153deg, rgba(255, 255, 255, .5), rgba(192, 222, 227, .12) 42%, transparent 76%);
    filter: blur(.3px);
    transform: none;
}
.home-surface-page .hero-object .hero-core b {
    color: rgba(199, 215, 216, .94);
    font-size: clamp(30px, 4.5vw, 70px);
    letter-spacing: -.18em;
    text-shadow: -1px -1px rgba(255, 255, 255, .42), 3px 5px 3px rgba(0, 0, 0, .9),
                 0 10px 12px rgba(14, 144, 207, .3);
    transform: perspective(180px) rotateX(8deg) skewX(-8deg);
}
.home-surface-page .hero-object .hero-reflection {
    z-index: 4;
    width: 58%;
    left: 19%;
    top: 73%;
    font-size: clamp(13px, 1.45vw, 22px);
    opacity: .2;
    transform: perspective(260px) rotateX(55deg) rotateZ(-9deg) skewX(-9deg) scaleX(.94);
}
.home-surface-page .hero-object:hover .hero-core {
    box-shadow: inset 8px 7px 14px rgba(218, 233, 233, .15), inset -10px -12px 20px rgba(0, 0, 0, .86),
                0 0 0 8px rgba(3, 7, 10, .9), 0 0 0 10px rgba(137, 149, 149, .55),
                0 16px 34px rgba(5, 126, 190, .46);
}

/* Typographic metal nameplate, illuminated with the same proximity curve as the scrollbars. */
.home-surface-page .hero-wordmark {
    --wordmark-proximity: 0;
    --wordmark-pulse: 0;
    --wordmark-light-x: 25%;
    --wordmark-light-y: 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, .65vw, 11px);
    width: min(60vw, 980px);
    aspect-ratio: 1.72;
    right: 8vw;
    top: 22vh;
    padding: clamp(30px, 3.2vw, 52px);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    clip-path: none;
    box-shadow: none;
    transform: none;
    transition: border-color 180ms ease, box-shadow 220ms ease, transform 260ms ease;
}
.home-surface-page .hero-wordmark::before {
    content: none;
}
.home-surface-page .hero-wordmark::after {
    content: none;
}
.home-surface-page .hero-wordmark .wordmark-name,
.home-surface-page .hero-wordmark .wordmark-designs {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    inset: auto;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at var(--wordmark-light-x) var(--wordmark-light-y),
            rgb(255 255 255 / calc(.03 + var(--wordmark-proximity) * .97)) 0 1.5%,
            rgb(207 239 247 / calc(.02 + var(--wordmark-proximity) * .98)) 8%,
            rgb(80 194 239 / calc(var(--wordmark-proximity) * .48)) 15%,
            transparent 23%),
        radial-gradient(circle at var(--wordmark-light-x) var(--wordmark-light-y),
            rgb(89 199 239 / calc(var(--wordmark-proximity) * .58)) 0,
            transparent 48%),
        linear-gradient(180deg,
            rgb(235 246 245 / calc(.07 + var(--wordmark-proximity) * .4)) 0,
            rgb(104 151 164 / calc(.025 + var(--wordmark-proximity) * .16)) 48%,
            rgb(19 46 59 / calc(.025 + var(--wordmark-proximity) * .12)) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    box-shadow: none;
    line-height: .82;
    -webkit-text-stroke: 1px rgba(197, 229, 235, .3);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .2), 0 -1px 0 rgba(0, 0, 0, .72),
        3px 5px 2px rgba(0, 0, 0, .78);
    filter: none;
    opacity: calc(.25 + var(--wordmark-proximity) * .75);
    transform: none;
    transition: opacity 190ms ease, text-shadow 220ms ease;
}
.home-surface-page .hero-wordmark .wordmark-name {
    font-size: clamp(80px, 11vw, 176px);
    font-weight: 700;
    letter-spacing: -.075em;
}
.home-surface-page .hero-wordmark .wordmark-designs {
    background:
        radial-gradient(circle at var(--wordmark-light-x) var(--wordmark-light-y),
            rgb(255 250 255 / calc(.03 + var(--wordmark-proximity) * .97)) 0 1.5%,
            rgb(226 198 255 / calc(.02 + var(--wordmark-proximity) * .98)) 8%,
            rgb(185 105 255 / calc(var(--wordmark-proximity) * .5)) 15%,
            transparent 23%),
        radial-gradient(circle at var(--wordmark-light-x) var(--wordmark-light-y),
            rgb(183 111 255 / calc(var(--wordmark-proximity) * .6)) 0,
            transparent 49%),
        linear-gradient(180deg,
            rgb(225 207 247 / calc(.07 + var(--wordmark-proximity) * .42)),
            rgb(130 86 178 / calc(.025 + var(--wordmark-proximity) * .17)) 53%,
            rgb(49 29 76 / calc(.025 + var(--wordmark-proximity) * .13)));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke-color: rgba(218, 191, 246, .32);
    font-size: clamp(80px, 11vw, 176px);
    font-weight: 650;
    letter-spacing: .06em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .18), 0 -1px 0 rgba(0, 0, 0, .74),
        3px 5px 2px rgba(0, 0, 0, .78);
}
.home-surface-page .hero-wordmark .wordmark-name::before,
.home-surface-page .hero-wordmark .wordmark-designs::before {
    content: none;
}
.home-surface-page .hero-wordmark .wordmark-designs::after {
    content: none;
}
.home-surface-page .hero-wordmark.is-wordmark-pressed { --wordmark-pulse: 1; }

.home-surface-page .public-stats {
    --halo-proximity: 0;
    --halo-stats-x: 75%;
    --halo-stats-y: -400px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: 42px;
    background: linear-gradient(180deg, rgba(7, 20, 34, .95), rgba(12, 31, 48, .92));
}
.home-surface-page .public-stats::before {
    content: none;
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle 1025px at var(--halo-stats-x) var(--halo-stats-y),
        transparent 0 425px,
        rgb(214 104 69 / calc(.18 + var(--halo-proximity) * .15)) 485px,
        rgb(174 208 219 / calc(.13 + var(--halo-proximity) * .11)) 595px,
        rgb(151 120 181 / calc(.075 + var(--halo-proximity) * .075)) 710px,
        rgb(100 160 190 / calc(.035 + var(--halo-proximity) * .04)) 825px,
        rgb(100 160 190 / calc(.016 + var(--halo-proximity) * .018)) 905px,
        rgb(151 120 181 / calc(.006 + var(--halo-proximity) * .009)) 975px,
        transparent 1025px);
}
.home-surface-page .public-stats > * { position: relative; z-index: 2; }
.home-surface-page .public-stats div {
    --surface-proximity: 0;
    background: rgba(255, 255, 255, .025);
    border-color: rgb(218 205 235 / calc(.2 + var(--surface-proximity) * .38));
    box-shadow:
        0 0 0 1px rgb(112 197 255 / calc(.04 + var(--surface-proximity) * .2)),
        0 0 calc(8px + var(--surface-proximity) * 22px) rgb(136 93 255 / calc(.08 + var(--surface-proximity) * .4));
    transition: border-color .3s ease, box-shadow .38s ease, transform .38s ease;
}
.home-surface-page .public-stats div:hover { transform: translateY(-2px); }
.home-surface-page .public-stats div.is-surface-clicked {
    box-shadow: 0 0 0 1px rgba(222, 205, 255, .62), 0 0 34px rgba(164, 102, 255, .7);
}

.home-surface-page .intro {
    --halo-proximity: 0;
    --halo-intro-x: 75%;
    --halo-intro-y: -700px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(145deg, #0c2234, #162b38 58%, #2e1a16);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), inset 0 -70px 90px rgba(26, 14, 12, .3);
}
.home-surface-page .intro::before {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle 1025px at var(--halo-intro-x) var(--halo-intro-y),
        transparent 0 425px,
        rgb(214 104 69 / calc(.16 + var(--halo-proximity) * .14)) 485px,
        rgb(174 208 219 / calc(.11 + var(--halo-proximity) * .1)) 595px,
        rgb(151 120 181 / calc(.064 + var(--halo-proximity) * .064)) 710px,
        rgb(100 160 190 / calc(.029 + var(--halo-proximity) * .035)) 825px,
        rgb(100 160 190 / calc(.012 + var(--halo-proximity) * .016)) 905px,
        transparent 1025px);
}
.home-surface-page .intro > * { position: relative; z-index: 2; }

.home-surface-page .selected {
    position: relative;
    margin-top: -1px;
    padding-top: clamp(260px, 20vw, 340px);
    padding-bottom: clamp(270px, 21vw, 355px);
    background:
        radial-gradient(circle at 90% 7%, rgba(255, 255, 255, .72), transparent 31%),
        radial-gradient(circle at 8% 94%, rgba(117, 82, 67, .16), transparent 31%),
        linear-gradient(145deg, #e1ded4, #f5f2eb 56%, #d6d8d3);
}
.home-surface-page .selected::before,
.home-surface-page .selected::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0;
    left: 0;
    height: clamp(285px, 24vw, 410px);
    pointer-events: none;
}
.home-surface-page .selected::before {
    top: 0;
    background:
        radial-gradient(ellipse at 72% 0, rgba(116, 77, 54, .18), transparent 58%),
        linear-gradient(145deg, #0c2234, #162b38 58%, #2e1a16);
    -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .96) 14%, rgba(0, 0, 0, .72) 40%, rgba(0, 0, 0, .34) 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .96) 14%, rgba(0, 0, 0, .72) 40%, rgba(0, 0, 0, .34) 70%, transparent 100%);
}
.home-surface-page .selected::after {
    bottom: 0;
    background:
        linear-gradient(to top left,
            rgba(9, 48, 73, .76) 0%,
            rgba(10, 47, 70, .5) 25%,
            rgba(12, 43, 62, .2) 49%,
            transparent 72%),
        linear-gradient(110deg, rgba(7, 22, 35, .86), rgba(54, 24, 17, .78)),
        repeating-linear-gradient(94deg, #2b130f 0, #693421 11px, #26110e 22px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .12) 20%, rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, .78) 74%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .12) 20%, rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, .78) 74%, #000 100%);
}
.home-surface-page .selected > * { position: relative; z-index: 1; }
.home-surface-page .selected .project-card {
    --card-proximity: 0;
    padding: 12px;
    border: 1px solid rgba(113, 67, 49, .2);
    background: rgba(255, 255, 255, .18);
    color: #16201d;
    box-shadow: 0 0 0 1px rgb(214 104 69 / calc(.04 + var(--card-proximity) * .17)),
                0 0 calc(8px + var(--card-proximity) * 20px) rgb(214 104 69 / calc(.08 + var(--card-proximity) * .3));
}
.home-surface-page .selected .project-summary,
.home-surface-page .selected .project-meta p { color: #59635f; }
.home-surface-page .selected .project-reveal { color: #16201d; }

.home-surface-page .cults-callout-band {
    position: relative;
    isolation: isolate;
    padding-top: 1px;
    margin-top: -1px;
}
.home-surface-page .cults-callout-band::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(7, 29, 45, .98) 0%,
        rgba(7, 30, 47, .92) 24%,
        rgba(8, 32, 49, .68) 51%,
        rgba(9, 34, 52, .3) 76%,
        transparent 100%);
}

.home-surface-page .cults-callout {
    --surface-proximity: 0;
    z-index: 1;
    margin-top: -2px;
    color: #f5efe4;
    border: 1px solid rgb(147 204 235 / calc(.18 + var(--surface-proximity) * .36));
    border-top-color: transparent;
    background:
        radial-gradient(ellipse at 82% 38%, rgba(89, 158, 196, .15), transparent 34%),
        radial-gradient(ellipse at 96% 100%, rgba(123, 72, 62, .12), transparent 42%),
        linear-gradient(180deg,
            transparent 0%,
            rgba(7, 29, 45, .22) 15%,
            rgba(9, 34, 52, .72) 34%,
            #102c40 55%,
            #172d3d 100%);
    box-shadow:
        0 0 0 1px rgb(112 197 255 / calc(.04 + var(--surface-proximity) * .2)),
        0 0 calc(10px + var(--surface-proximity) * 28px) rgb(136 93 255 / calc(.08 + var(--surface-proximity) * .4)),
        0 20px 55px rgba(0, 10, 18, .24),
        inset 0 1px rgba(255, 255, 255, .05);
    transition: border-color .3s ease, box-shadow .38s ease;
}
.home-surface-page .cults-callout.is-surface-clicked {
    box-shadow: 0 0 0 1px rgba(222, 205, 255, .62), 0 0 42px rgba(164, 102, 255, .7), 0 20px 55px rgba(0, 0, 0, .24);
}
.home-surface-page .cults-callout .button { color: #16201d; }
.home-surface-page .selected .project-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 14px);
    justify-self: center;
}
.home-surface-page .cults-callout {
    min-height: clamp(520px, 46vw, 700px);
    overflow: hidden;
    isolation: isolate;
}
.home-surface-page .cults-callout::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 68%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 78% 5%, rgba(76, 147, 188, .09), transparent 42%),
        linear-gradient(180deg,
            rgba(3, 16, 27, .82) 0%,
            rgba(4, 20, 33, .66) 24%,
            rgba(5, 24, 39, .42) 51%,
            rgba(7, 29, 45, .15) 78%,
            transparent 100%);
}
.home-surface-page .cults-callout::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: -2px;
    right: -2px;
    left: -2px;
    height: clamp(230px, 22vw, 350px);
    pointer-events: none;
    background:
        linear-gradient(110deg, rgba(7, 22, 35, .48), rgba(54, 24, 17, .34)),
        repeating-linear-gradient(94deg, #2b130f 0, #693421 11px, #26110e 22px);
    -webkit-mask-image: linear-gradient(180deg,
        #000 0%,
        rgba(0, 0, 0, .96) 18%,
        rgba(0, 0, 0, .72) 42%,
        rgba(0, 0, 0, .34) 70%,
        transparent 100%);
    mask-image: linear-gradient(180deg,
        #000 0%,
        rgba(0, 0, 0, .96) 18%,
        rgba(0, 0, 0, .72) 42%,
        rgba(0, 0, 0, .34) 70%,
        transparent 100%);
}
.home-surface-page .cults-callout-copy {
    position: relative;
    z-index: 5;
    width: min(58%, 820px);
}
.home-surface-page .cults-tile-fan {
    position: absolute;
    z-index: 3;
    top: 70%;
    right: clamp(36px, 6vw, 96px);
    width: min(46vw, 680px);
    height: min(34vw, 480px);
    transform: translateY(-48%);
    pointer-events: none;
}
.home-surface-page .cults-product-tile {
    --tile-x: 0px;
    --tile-y: 0px;
    --tile-rotate: 0deg;
    position: absolute;
    inset: 12% 8% 11% 10%;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(225, 238, 244, .52);
    background: #18242a;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .45), 0 0 24px rgba(115, 178, 220, .12);
    opacity: 0;
    transform: translate(var(--tile-x), calc(var(--tile-y) + 42px)) rotate(var(--tile-rotate)) scale(.86);
    transition: opacity .48s ease, transform .72s cubic-bezier(.2,.78,.22,1), border-color .25s ease, box-shadow .3s ease;
    pointer-events: auto;
}
.home-surface-page .cults-product-tile img { transition: transform .55s cubic-bezier(.2,.72,.2,1), filter .45s ease; }
.home-surface-page .cults-product-tile span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 38px 16px 14px;
    color: #fff;
    background: linear-gradient(transparent, rgba(5, 12, 17, .9));
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}
.home-surface-page .cults-product-tile-1 {
    --tile-x: -5%; --tile-y: 11%; --tile-rotate: -8deg;
    inset: 18% auto auto 0;
    width: 48%; height: 66%;
    z-index: 1; transition-delay: .04s;
}
.home-surface-page .cults-product-tile-2 {
    --tile-x: 0%; --tile-y: -5%; --tile-rotate: 2.5deg;
    inset: 5% auto auto 26%;
    width: 54%; height: 78%;
    z-index: 3; transition-delay: .17s;
}
.home-surface-page .cults-product-tile-3 {
    --tile-x: 6%; --tile-y: 13%; --tile-rotate: 9deg;
    inset: 22% 0 auto auto;
    width: 43%; height: 62%;
    z-index: 2; transition-delay: .3s;
}
.home-surface-page .cults-callout.is-tiles-revealed .cults-product-tile,
.home-surface-page .cults-callout:focus-within .cults-product-tile {
    opacity: 1;
    transform: translate(var(--tile-x), var(--tile-y)) rotate(var(--tile-rotate)) scale(1);
}
.home-surface-page .cults-product-tile:hover,
.home-surface-page .cults-product-tile:focus-visible {
    z-index: 6;
    border-color: rgba(223, 242, 255, .95);
    box-shadow: 0 26px 55px rgba(0, 0, 0, .52), 0 0 30px rgba(125, 195, 243, .5);
    outline: none;
}
.home-surface-page .cults-product-tile:hover img,
.home-surface-page .cults-product-tile:focus-visible img { transform: scale(1.055); filter: brightness(1.08); }
.home-surface-page .site-footer {
    color: #c3bdb3;
    border-color: rgba(235, 223, 202, .2);
    background: rgba(18, 8, 7, .76);
}

@media (min-width:1100px) {
    .home-surface-page .cults-tile-fan {
        top: 50%;
        right: auto;
        left: 67%;
        width: min(40vw, 590px);
        transform: translate(-50%, -48%);
    }
}

@media (max-width:760px) {
    .home-surface-page .site-nav { color:#f4efe5; background:rgba(17,18,25,.97); border-color:rgba(235,223,202,.2); }
    .home-surface-page .hero-bottom { margin-top:auto; padding-top:clamp(160px,24vh,230px); }
    .home-surface-page .hero-object { width:58vw; right:-7vw; top:18vh; }
    .home-surface-page .hero-wordmark {
        width:min(92vw,680px);
        aspect-ratio:auto;
        left:50%;
        right:auto;
        top:calc(136px + 42vw);
        padding:clamp(18px,4vw,30px);
        transform:translateX(-50%);
    }
    .home-surface-page .hero::after { width:calc(100vw + 800px); }
    .home-surface-page .hero-wordmark .wordmark-name,
    .home-surface-page .hero-wordmark .wordmark-designs { font-size:clamp(46px,14vw,84px); }
    .home-surface-page .selected .project-card:last-child:nth-child(odd) { grid-column:auto; width:100%; }
    .home-surface-page .cults-callout { min-height:720px; padding-bottom:330px; }
    .home-surface-page .cults-callout-copy { width:100%; }
    .home-surface-page .cults-tile-fan {
        top:auto;
        right:50%;
        bottom:50px;
        width:min(82vw,430px);
        height:270px;
        transform:translateX(50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-surface-page .cults-product-tile,
    .home-surface-page .cults-product-tile img { transition:none; }
}