@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@300;400;500&family=Inter:wght@400;500;700&display=swap');

:root {
    --bg: #070807;
    --ink: #f4f1e8;
    --acid: #b7ff00;
    --pink: #ff3ca6;
    --line: #282a27;
    --muted: #81847f
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, Arial;
    overflow-x: hidden
}

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

::selection {
    background: var(--acid);
    color: #000
}

.noise {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #050505;
    display: grid;
    place-content: center;
    text-align: center;
    transition: .65s
}

.loader.off {
    opacity: 0;
    visibility: hidden
}

.load-word {
    font: clamp(45px, 8vw, 100px) Archivo Black
}

.load-word span,
.logo span,
footer span {
    color: var(--acid)
}

.load-track {
    width: min(320px, 65vw);
    height: 2px;
    background: #222;
    margin: 22px auto 14px
}

.load-track i {
    display: block;
    height: 100%;
    background: var(--acid);
    box-shadow: 0 0 20px var(--acid);
    animation: loading 1.55s ease forwards
}

.loader small {
    font: 9px DM Mono;
    color: #ffffff;
    letter-spacing: 2px
}

.site-nav {
    height: 72px;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    background: #070807dd;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #ffffff12
}

.logo {
    font: 20px Archivo Black
}

.available {
    margin-left: 32px;
    font: 9px DM Mono;
    color: #ffffff;
    letter-spacing: 1px
}

.available i {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 9px var(--acid);
    margin-right: 7px
}

.site-nav nav {
    margin-left: auto;
    display: flex;
    gap: 28px
}

.site-nav nav a {
    font: 9px DM Mono;
    color: #ffffff;
    letter-spacing: 1px;
    position: relative
}

.site-nav nav a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -9px;
    height: 1px;
    background: var(--acid);
    transition: .3s
}

.site-nav nav a:hover,
.site-nav nav a.active {
    color: var(--acid)
}

.site-nav nav a:hover:after,
.site-nav nav a.active:after {
    right: 0
}

.menu {
    display: none
}

.hero {
    min-height: 100vh;
    padding: 130px 5vw 65px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#fff06 1px, transparent 1px), linear-gradient(90deg, #fff06 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: radial-gradient(circle at 45% 45%, black, transparent 75%)
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none
}

.g1 {
    width: 480px;
    height: 480px;
    background: #b7ff0012;
    right: -100px;
    top: 5%;
    animation: float 9s ease-in-out infinite
}

.g2 {
    width: 300px;
    height: 300px;
    background: #ff3ca60b;
    left: 25%;
    bottom: 0;
    animation: float 12s ease-in-out reverse infinite
}

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: 1100px
}

.kicker,
.mini {
    font: 9px DM Mono;
    letter-spacing: 2px;
    /* color: #777; */
    color: #ffffff
}

.kicker b {
    color: var(--acid);
    padding: 0 8px
}

.hero h1 {
    font: clamp(72px, 11vw, 165px)/.78 Archivo Black;
    /* font: clamp(55px, 8vw, 125px) / .78 "Archivo Black"; */
    /* font: clamp(45px, 7vw, 105px) / .78 "Archivo Black"; */
    letter-spacing: -.075em;
    margin: 18px 0 30px
}

.hero h1 span {
    display: block
}

.hero .outline {
    color: transparent;
    -webkit-text-stroke: 1.5px #e8e7df
}

.hero .acid {
    color: var(--acid)
}

.intro {
    max-width: 550px;
    color: #ffffff;
    ;
    /* color: #ffffff; */
    font-size: 16px;
    line-height: 1.8;

}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 28px
}

.primary {
    background: var(--acid);
    color: #000;
    padding: 14px 17px;
    font: 700 9px DM Mono;
    display: inline-flex;
    gap: 35px;
    transition: .3s
}

.primary:hover {
    gap: 55px;
    box-shadow: 0 0 35px #b7ff0030
}

.textlink {
    font: 9px DM Mono;
    color: #ffffff;
}

.hero-side {
    position: absolute;
    right: 5vw;
    top: 22%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px
}

.orbit {
    width: 160px;
    height: 160px;
    border: 1px solid #2a2c29;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative
}

.orbit:before,
.orbit:after {
    content: "";
    position: absolute;
    border: 1px solid #252725;
    border-radius: 50%
}

.orbit:before {
    inset: 20%
}

.orbit:after {
    inset: 38%
}

.orbit i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 47%;
    height: 1px;
    background: linear-gradient(90deg, var(--acid), transparent);
    transform-origin: left;
    animation: spin 4s linear infinite
}

.orbit span {
    text-align: center;
    font: 6px/1.7 DM Mono;
    color: #ffffff
}

.hero-side>p {
    font: 6px/1.8 DM Mono;
    color: #ffffff
}

.marquee {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background: #0b0c0b
}

.marquee div {
    width: max-content;
    padding: 14px 0;
    font: 9px DM Mono;
    letter-spacing: 2px;
    animation: marquee 25s linear infinite
}

.marquee b {
    color: var(--acid);
    padding: 0 20px
}

.section {
    padding: 110px 5vw;
    border-bottom: 1px solid var(--line)
}

.section-tag {
    font: 9px DM Mono;
    /* color: #5e615d; */
    color: #ffffff;

    letter-spacing: 2px;
    margin-bottom: 65px
}

.about-grid {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 8vw;
    align-items: center
}

.portrait-wrap {
    max-width: 430px
}

.portrait-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid #353733
}

.portrait-frame img {
    width: 100%;
    display: block;
    filter: saturate(.82) contrast(1.03);
    transition: .5s
}

.portrait-frame:hover img {
    transform: scale(1.025);
    filter: saturate(1)
}

.portrait-frame .scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--acid), transparent);
    box-shadow: 0 0 15px var(--acid);
    animation: scan 5s linear infinite;
    opacity: .6
}

.portrait-frame i {
    position: absolute;
    width: 30px;
    height: 30px
}

.c1 {
    left: 8px;
    top: 8px;
    border-left: 2px solid var(--acid);
    border-top: 2px solid var(--acid)
}

.c2 {
    right: 8px;
    top: 8px;
    border-right: 2px solid var(--acid);
    border-top: 2px solid var(--acid)
}

.c3 {
    left: 8px;
    bottom: 8px;
    border-left: 2px solid var(--acid);
    border-bottom: 2px solid var(--acid)
}

.c4 {
    right: 8px;
    bottom: 8px;
    border-right: 2px solid var(--acid);
    border-bottom: 2px solid var(--acid)
}

.photo-meta {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    font: 9px DM Mono;
    color: #ffffff
}

.about-copy h2 {
    font: clamp(42px, 5.8vw, 88px)/.91 Archivo Black;
    letter-spacing: -.055em;
    margin: 15px 0 25px
}

.about-copy h2 em {
    font-style: normal;
    color: var(--pink)
}

.about-copy h2 span {
    color: var(--acid)
}

.about-text {
    max-width: 650px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 28px
}

.chips b {
    border: 1px solid #30322f;
    padding: 8px 10px;
    font: 9px DM Mono;
    color: #ffffff;
    transition: .25s
}

.chips b:hover {
    border-color: var(--acid);
    color: var(--acid);
    transform: translateY(-3px)
}

.work-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 85px
}

.work-title h2 {
    font: clamp(55px, 8vw, 120px)/.84 Archivo Black;
    letter-spacing: -.065em;
    margin: 0
}

.work-title h2 span {
    color: var(--acid)
}

.work-title p {
    max-width: 300px;
    color: #ffffff;
    font: 9px/1.7 DM Mono
}

.case {
    display: grid;
    grid-template-columns: .38fr .62fr;
    gap: 4vw;
    align-items: center;
    margin-bottom: 130px
}

.case-right {
    grid-template-columns: .62fr .38fr
}

.case-copy {
    padding: 25px
}

.case-no {
    font: 8px DM Mono;
    color: var(--acid)
}

.case-copy>p {
    font: 6px DM Mono;
    color: #ffffff;
    letter-spacing: 1px;
    margin-top: 45px
}

.case-copy h3 {
    font: clamp(34px, 4vw, 62px)/.9 Archivo Black;
    letter-spacing: -.04em;
    margin: 15px 0
}

.case-copy small {
    display: block;
    max-width: 300px;
    color: #ffffff;
    font-size: 9px;
    line-height: 1.6
}

.case-copy a {
    display: inline-block;
    margin-top: 28px;
    font: 9px DM Mono;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    transition: .3s
}

.case-copy a:hover {
    color: var(--acid);
    border-color: var(--acid)
}

.device-scene {
    min-height: 520px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #272927
}

.warm {
    background: radial-gradient(circle at 70% 20%, #e0c8a250, transparent 35%), linear-gradient(135deg, #574b3d, #c49b69)
}

.red {
    background: radial-gradient(circle, #ff4050, #7d0710)
}

.aqua {
    background: radial-gradient(circle at 30% 30%, #74f2ff, #047c93 50%, #073b38)
}

.laptop {
    width: 78%;
    position: relative;
    transition: transform .2s ease;
    transform-style: preserve-3d
}

.laptop .screen {
    background: #080808;
    padding: 10px;
    border-radius: 15px 15px 4px 4px;
    box-shadow: 0 30px 55px #0008
}

.laptop .screen img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    border-radius: 5px
}

.laptop .base {
    height: 24px;
    background: linear-gradient(#666, #242424);
    margin: 0 -5%;
    clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
    border-radius: 0 0 10px 10px;
    position: relative
}

.laptop .base i {
    position: absolute;
    width: 15%;
    height: 3px;
    background: #888;
    left: 42.5%;
    top: 0;
    border-radius: 0 0 5px 5px
}

.float-label {
    position: absolute;
    background: #080808;
    color: var(--acid);
    border: 1px solid #ffffff20;
    padding: 8px 10px;
    font: 6px DM Mono;
    letter-spacing: 1px;
    z-index: 4;
    box-shadow: 0 10px 25px #0005;
    animation: bob 4s ease-in-out infinite
}

.l1 {
    left: 7%;
    top: 15%
}

.l2 {
    right: 5%;
    bottom: 16%;
    animation-delay: -2s
}

.l3 {
    right: 8%;
    top: 14%
}

.l4 {
    left: 5%;
    bottom: 15%;
    animation-delay: -1.5s
}

.services-title,
.tool-lab h2 {

    font: clamp(40px, 5.5vw, 82px)/.85 "Archivo Black", sans-serif;
    /* font: clamp(52px, 7.5vw, 112px)/.85 Archivo Black; */
    letter-spacing: -.065em;
    margin: 0 0 70px
}

.services-title span,
.tool-lab h2 span {
    color: var(--acid)
}

.services-title em {
    font-style: normal;
    color: var(--pink)
}

.service-list {
    border-top: 1px solid var(--line)
}

.service-list article {
    display: grid;
    grid-template-columns: 60px 1fr 1fr 40px;
    gap: 25px;
    align-items: center;
    padding: 30px 5px;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    transition: .35s
}

.service-list article:before {
    content: "";
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--acid);
    transition: .4s
}

.service-list article>* {
    position: relative;
    z-index: 2
}

.service-list article>b {
    font: 9px DM Mono;
    color: var(--acid)
}

.service-list h3 {
    font: clamp(12px, 1.5vw, 22px) "Archivo Black", sans-serif;
    /* font: clamp(18px, 2.2vw, 34px) Archivo Black; */
    margin: 0
}

.service-list p {
    font-size: 15px;
    line-height: 1.6;
    color: #ffffff
}

.service-list i {
    font-style: normal;
    font-size: 20px
}

.service-list article:hover:before {
    right: 0
}

.service-list article:hover {
    color: #000;
    padding-left: 14px
}

.service-list article:hover>b,
.service-list article:hover p {
    color: #182000
}

.lab-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 7vw;
    align-items: center
}

.tool-lab h2 {
    font: clamp(40px, 5.5vw, 82px)/.85 "Archivo Black", sans-serif;
    /* font-size: clamp(45px, 6vw, 88px); */
    margin: 15px 0
}

.tool-window {
    border: 1px solid #333;
    background: #0a0b0a;
    box-shadow: 0 35px 90px #000
}

.window-bar {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border-bottom: 1px solid #292b29
}

.window-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #444
}

.window-bar i:first-child {
    background: var(--pink)
}

.window-bar span {
    margin-left: auto;
    font: 6px DM Mono;
    color: #ffffff
}

.terminal {
    padding: 45px 35px;
    font: 9px/1.8 DM Mono;
    color: #ffffff
}

.terminal p {
    padding: 10px 0;
    border-bottom: 1px dashed #262826
}

.terminal b {
    color: var(--acid);
    margin-right: 15px
}

.terminal-status {
    margin-top: 35px;
    color: var(--acid)
}

.terminal-status i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 10px var(--acid);
    margin-right: 8px
}

.contact {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-top: 150px;
    padding-bottom: 150px
}

.contact-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: var(--acid);
    filter: blur(190px);
    opacity: .07;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 5s ease-in-out infinite
}

.contact>*:not(.contact-glow) {
    position: relative
}

.contact h2 {
    font: clamp(40px, 5.5vw, 82px)/.85 "Archivo Black", sans-serif;
    /* font: clamp(60px, 9vw, 135px)/.82 Archivo Black; */
    letter-spacing: -.07em;
    margin: 20px 0 45px
}

.contact h2 span {
    color: var(--acid)
}

.mail {
    display: inline-flex;
    background: var(--acid);
    color: #000;
    padding: 16px 20px;
    gap: 50px;
    font: 700 15px DM Mono;
    transition: .3s
}

.mail:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 45px #b7ff0035
}

.note {
    display: block;
    font: 6px DM Mono;
    color: #ffffff;
    margin-top: 10px
}

footer {
    height: 120px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 9px DM Mono;
    color: #ffffff
}

footer>a {
    font: 18px Archivo Black;
    color: #fff
}

.reveal {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(4px);
    transition: opacity .75s, transform .75s, filter .75s
}

.reveal.visible {
    opacity: 1;
    transform: none;
    filter: none
}

.cursor,
.cursor-ring {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

.cursor {
    width: 4px;
    height: 4px;
    background: var(--acid)
}

.cursor-ring {
    width: 28px;
    height: 28px;
    border: 1px solid #b7ff0080
}

@keyframes loading {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

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

@keyframes scan {
    from {
        top: 0
    }

    to {
        top: 100%
    }
}

@keyframes float {
    50% {
        transform: translate(25px, -25px) scale(1.08)
    }
}

@keyframes bob {
    50% {
        transform: translateY(-12px) rotate(2deg)
    }
}

@keyframes pulse {
    50% {
        opacity: .12;
        transform: translate(-50%, -50%) scale(1.2)
    }
}

@media(max-width:820px) {

    .cursor,
    .cursor-ring {
        display: none
    }

    .site-nav {
        height: 62px;
        padding: 0 18px
    }

    .available {
        display: none
    }

    .menu {
        display: block;
        margin-left: auto;
        background: none;
        border: 1px solid #333;
        color: #fff;
        padding: 8px 10px;
        font: 9px DM Mono
    }

    .site-nav nav {
        display: none;
        position: absolute;
        top: 62px;
        left: 0;
        right: 0;
        background: #070807f8;
        padding: 12px 18px;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid #333
    }

    .site-nav nav.open {
        display: flex
    }

    .site-nav nav a {
        padding: 15px 0;
        border-bottom: 1px solid #1e201e
    }

    .hero {
        min-height: 100svh;
        padding: 110px 20px 70px;
        align-items: flex-start
    }

    .hero h1 {
        font-size: 17vw;
        line-height: .8
    }

    .intro {
        font-size: 11px;
        max-width: 80%
    }

    .hero-side {
        right: -35px;
        top: 18%;
        opacity: .55
    }

    .orbit {
        width: 120px;
        height: 120px
    }

    .hero-side>p {
        display: none
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px
    }

    .section {
        padding: 80px 20px
    }

    .section-tag {
        margin-bottom: 45px
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .portrait-wrap {
        max-width: 310px
    }

    .about-copy h2 {
        font-size: 11.5vw
    }

    .work-title {
        display: block
    }

    .work-title h2 {
        font-size: 14vw
    }

    .work-title p {
        margin-top: 25px
    }

    .case,
    .case-right {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 85px
    }

    .case-right .device-scene {
        order: 2
    }

    .case-right .case-copy {
        order: 1
    }

    .case-copy {
        padding: 0;
        width: 100%
    }

    .case-copy>p {
        margin-top: 20px
    }

    .device-scene {
        min-height: 330px;
        width: 100%
    }

    .laptop {
        width: 86%
    }

    .float-label {
        font-size: 5px
    }

    .services-title,
    .tool-lab h2 {
        font-size: 13vw
    }

    .service-list article {
        grid-template-columns: 30px 1fr 24px;
        gap: 10px;
        padding: 25px 0
    }

    .service-list p {
        grid-column: 2
    }

    .service-list i {
        grid-column: 3;
        grid-row: 1
    }

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

    .terminal {
        padding: 28px 20px;
        font-size: 8px
    }

    .contact {
        padding-top: 110px;
        padding-bottom: 110px
    }

    .contact h2 {
        font-size: 15vw
    }

    .mail {
        gap: 20px;
        font-size: 9px
    }

    footer {
        height: auto;
        min-height: 150px;
        padding: 30px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px
    }
}

@media(max-width:390px) {
    .hero h1 {
        font-size: 16.5vw
    }

    .intro {
        max-width: 90%
    }

    .device-scene {
        min-height: 285px
    }

    .portrait-wrap {
        max-width: 270px
    }
}

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

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }
}

/* ===== V7 FIXED LEFT NAVIGATION ===== */
:root {
    --rail: 178px
}

.site-nav {
    display: none !important
}

.left-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--rail);
    z-index: 150;
    background: #080908eF;
    backdrop-filter: blur(18px);
    border-right: 1px solid #252724;
    padding: 28px 22px;
    display: flex;
    flex-direction: column
}

.left-nav .logo {
    font: 19px Archivo Black;
    letter-spacing: -1px
}

.left-nav .nav-line {
    height: 1px;
    background: #272927;
    margin: 30px 0
}

.left-nav nav {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.left-nav nav a {
    position: relative;
    display: grid;
    grid-template-columns: 25px 1fr;
    align-items: center;
    gap: 8px;
    padding: 13px 0;
    font: 9px DM Mono;
    letter-spacing: 1.3px;
    color: #ffffff;
    /* color: #ffffff; */
    transition: .28s
}

.left-nav nav a:before {
    content: "";
    position: absolute;
    left: -22px;
    width: 2px;
    height: 0;
    background: var(--acid);
    box-shadow: 0 0 12px var(--acid);
    transition: .28s
}

.left-nav nav a b {
    font: 9px DM Mono;
    color: #ffffff;
    /* color: #ffffff; */
    font-weight: 400
}

.left-nav nav a:hover,
.left-nav nav a.active {
    color: var(--acid);
    transform: translateX(5px)
}

.left-nav nav a.active:before,
.left-nav nav a:hover:before {
    height: 18px
}

.left-nav nav a.active b,
.left-nav nav a:hover b {
    color: var(--acid)
}

.left-bottom {
    margin-top: auto;
    border-top: 1px solid #252724;
    padding-top: 20px
}

.left-bottom .available {
    margin: 0;
    display: flex;
    align-items: flex-start;
    font: 9px/1.55 DM Mono;
    color: #ffffff;
    letter-spacing: 1px
}

.left-bottom .available i {
    margin-top: 3px;
    flex: none
}

.left-bottom small {
    display: block;
    margin-top: 16px;
    font: 9px DM Mono;
    color: #ffffff;
    letter-spacing: 1px
}

.mobile-nav {
    display: none
}

@media(min-width:821px) {
    body {
        padding-left: var(--rail)
    }

    .hero {
        padding-left: 4vw
    }

    .section {
        padding-left: 4vw
    }

    footer {
        padding-left: 4vw
    }
}

@media(max-width:820px) {
    body {
        padding-left: 0
    }

    .left-nav {
        display: none
    }

    .mobile-nav {
        height: 62px;
        position: fixed;
        z-index: 160;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 18px;
        display: flex;
        align-items: center;
        background: #070807ee;
        backdrop-filter: blur(14px);
        border-bottom: 1px solid #ffffff12
    }

    .mobile-nav .logo {
        font: 18px Archivo Black
    }

    .mobile-nav .menu {
        display: block;
        margin-left: auto;
        background: none;
        border: 1px solid #333;
        color: #fff;
        padding: 8px 10px;
        font: 9px DM Mono
    }

    .mobile-nav nav {
        display: none;
        position: absolute;
        top: 62px;
        left: 0;
        right: 0;
        background: #070807fa;
        padding: 10px 18px;
        border-bottom: 1px solid #333
    }

    .mobile-nav nav.open {
        display: flex;
        flex-direction: column
    }

    .mobile-nav nav a {
        padding: 15px 0;
        border-bottom: 1px solid #1e201e;
        font: 9px DM Mono;
        color: #ffffff;
        letter-spacing: 1px
    }
}

/* ===== V8 MOTION UPGRADE ===== */
.mouse-light {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, #b7ff0015 0, transparent 65%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: left .12s linear, top .12s linear
}

.spark-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.spark {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--acid);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--acid);
    opacity: 0;
    animation: sparkRise var(--dur) linear infinite;
    animation-delay: var(--delay)
}

.hero-cross {
    position: absolute;
    color: #ffffff;
    font: 18px DM Mono;
    animation: crossSpin 8s linear infinite
}

.cross-a {
    left: 42%;
    top: 18%
}

.cross-b {
    right: 14%;
    bottom: 23%;
    animation-direction: reverse
}

.hero-ring {
    position: absolute;
    border: 1px solid #b7ff0024;
    border-radius: 50%;
    pointer-events: none;
    animation: ringPulse 5s ease-in-out infinite
}

.ring-a {
    width: 230px;
    height: 230px;
    right: 7%;
    top: 30%
}

.ring-b {
    width: 90px;
    height: 90px;
    left: 38%;
    bottom: 12%;
    animation-delay: -2s
}

.hero h1 span {
    will-change: transform
}

.hero h1 .acid {
    text-shadow: 0 0 35px #b7ff0018;
    animation: acidBreath 3.5s ease-in-out infinite
}

.primary b {
    animation: arrowDance 1.2s ease-in-out infinite
}

.left-nav:after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    width: 1px;
    height: 90px;
    background: linear-gradient(transparent, var(--acid), transparent);
    animation: railScan 5s linear infinite
}

.left-nav .logo span {
    animation: logoPulse 2s ease-in-out infinite
}

.left-nav nav a.active span {
    text-shadow: 0 0 12px #b7ff0055
}

.portrait-frame:after {
    content: "";
    position: absolute;
    inset: -100% -40%;
    background: linear-gradient(110deg, transparent 42%, #ffffff18 50%, transparent 58%);
    transform: translateX(-60%);
    animation: portraitShine 7s ease-in-out infinite
}

.case {
    perspective: 1200px
}

.device-scene {
    isolation: isolate
}

.device-scene:before {
    content: "";
    position: absolute;
    width: 65%;
    height: 65%;
    border: 1px solid #ffffff18;
    border-radius: 50%;
    animation: sceneCircle 12s linear infinite;
    z-index: 0
}

.device-scene:after {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid #ffffff10;
    transform: rotate(4deg);
    animation: frameDrift 6s ease-in-out infinite;
    z-index: 0
}

.laptop {
    z-index: 3;
    animation: laptopFloat 5s ease-in-out infinite
}

.case:nth-of-type(even) .laptop {
    animation-delay: -2s
}

.laptop .screen {
    position: relative;
    overflow: hidden
}

.laptop .screen:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, #ffffff1f 47%, transparent 62%);
    transform: translateX(-130%);
    animation: screenGlint 6s ease-in-out infinite
}

.scene-orbit {
    position: absolute;
    width: 80%;
    aspect-ratio: 1;
    border: 1px dashed #ffffff25;
    border-radius: 50%;
    animation: spin 25s linear infinite;
    z-index: 1
}

.scene-orbit:before,
.scene-orbit:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 15px var(--acid)
}

.scene-orbit:before {
    width: 7px;
    height: 7px;
    left: 50%;
    top: -4px
}

.scene-orbit:after {
    width: 4px;
    height: 4px;
    right: 5%;
    bottom: 23%
}

.case-copy h3 {
    transition: .35s
}

.case:hover .case-copy h3 {
    color: var(--acid);
    transform: translateX(7px)
}

.case-no {
    display: inline-block;
    animation: numberBlink 3s steps(1) infinite
}

.service-list article i {
    transition: .35s
}

.service-list article:hover i {
    transform: rotate(45deg) scale(1.3)
}

.chips b:nth-child(odd) {
    animation: chipFloat 4s ease-in-out infinite
}

.chips b:nth-child(even) {
    animation: chipFloat 4s ease-in-out -2s infinite
}

.tool-window {
    animation: windowFloat 5s ease-in-out infinite
}

.terminal-status {
    animation: terminalGlow 1.6s ease-in-out infinite
}

.contact h2 span {
    display: inline-block;
    animation: contactGlow 3s ease-in-out infinite
}

.contact .mail b {
    animation: arrowDance 1s ease-in-out infinite
}

.reveal.visible {
    animation: revealSettle .75s cubic-bezier(.2, .8, .2, 1)
}

@keyframes sparkRise {
    0% {
        transform: translateY(100vh) scale(.4);
        opacity: 0
    }

    15% {
        opacity: .65
    }

    80% {
        opacity: .3
    }

    100% {
        transform: translateY(-20vh) translateX(40px) scale(1.3);
        opacity: 0
    }
}

@keyframes crossSpin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes ringPulse {
    50% {
        transform: scale(1.22);
        opacity: .25
    }
}

@keyframes acidBreath {
    50% {
        text-shadow: 0 0 50px #b7ff0060;
        transform: translateX(4px)
    }
}

@keyframes arrowDance {
    50% {
        transform: translate(4px, 3px)
    }
}

@keyframes railScan {
    from {
        top: -100px
    }

    to {
        top: 100%
    }
}

@keyframes logoPulse {
    50% {
        text-shadow: 0 0 14px var(--acid)
    }
}

@keyframes portraitShine {

    0%,
    55% {
        transform: translateX(-65%)
    }

    75%,
    100% {
        transform: translateX(65%)
    }
}

@keyframes sceneCircle {
    to {
        transform: rotate(360deg) scale(1.06)
    }
}

@keyframes frameDrift {
    50% {
        transform: rotate(-3deg) scale(.97)
    }
}

@keyframes laptopFloat {
    50% {
        translate: 0 -9px
    }
}

@keyframes screenGlint {

    0%,
    58% {
        transform: translateX(-130%)
    }

    78%,
    100% {
        transform: translateX(130%)
    }
}

@keyframes numberBlink {

    0%,
    92% {
        opacity: 1
    }

    93%,
    95% {
        opacity: .15
    }

    96% {
        opacity: 1
    }
}

@keyframes chipFloat {
    50% {
        transform: translateY(-4px)
    }
}

@keyframes windowFloat {
    50% {
        transform: translateY(-7px);
        box-shadow: 0 45px 110px #000
    }
}

@keyframes terminalGlow {
    50% {
        filter: drop-shadow(0 0 8px #b7ff0077)
    }
}

@keyframes contactGlow {
    50% {
        text-shadow: 0 0 45px #b7ff0066;
        transform: scale(1.015)
    }
}

@keyframes revealSettle {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(.985)
    }

    70% {
        opacity: 1;
        transform: translateY(-3px) scale(1)
    }

    100% {
        transform: none
    }
}

@media(max-width:820px) {

    .mouse-light,
    .hero-ring,
    .hero-cross,
    .scene-orbit {
        opacity: .35
    }

    .laptop {
        animation: laptopFloat 5s ease-in-out infinite
    }

    .device-scene:after {
        inset: 4%
    }
}

@media(prefers-reduced-motion:reduce) {
    .mouse-light {
        display: none
    }
}

/* ======================================================
   PREMIUM CURVED WORK SHOWCASE
====================================================== */

.work-showcase {

    --green: #b7ff00;
    --green-soft: rgba(183, 255, 0, .12);
    --black: #050505;

    position: relative;

    height: 450vh;

    background: #050505;

    color: #fff;
}


/* ======================================================
   STICKY VIEWPORT
====================================================== */

.work-sticky {

    position: sticky;

    top: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    isolation: isolate;

    background:

        radial-gradient(ellipse at 50% 55%,
            #1a220f 0%,
            #0d1009 27%,
            #070807 52%,
            #030303 78%,
            #000 100%);
}


/* ======================================================
   MOVING GRID
====================================================== */

.work-sticky::before {

    content: "";

    position: absolute;

    inset: -20%;

    z-index: -5;

    background-image:

        linear-gradient(rgba(183, 255, 0, .032) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(183, 255, 0, .032) 1px,
            transparent 1px);

    background-size:
        55px 55px;

    transform:

        perspective(700px) rotateX(7deg) scale(1.15);

    mask-image:

        radial-gradient(ellipse at center,
            black 15%,
            transparent 70%);

    animation:
        gridFloat 12s linear infinite;
}


@keyframes gridFloat {

    to {

        background-position:
            55px 55px;

    }

}


/* ======================================================
   CINEMATIC EDGE SHADOW
====================================================== */

.work-sticky::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 100;

    pointer-events: none;

    background:

        linear-gradient(90deg,

            rgba(0, 0, 0, .95) 0%,

            rgba(0, 0, 0, .35) 10%,

            transparent 25%,

            transparent 75%,

            rgba(0, 0, 0, .35) 90%,

            rgba(0, 0, 0, .95) 100%),

        linear-gradient(0deg,

            rgba(0, 0, 0, .85),

            transparent 23%,

            transparent 78%,

            rgba(0, 0, 0, .35));
}


/* ======================================================
   AMBIENT GREEN GLOW
====================================================== */

.work-ambient {

    position: absolute;

    left: 50%;
    top: 53%;

    width: 55vw;
    height: 48vw;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(183, 255, 0, .10),

            rgba(183, 255, 0, .035) 40%,

            transparent 70%);

    filter:
        blur(70px);

    pointer-events: none;

    animation:

        ambientBreath 5s ease-in-out infinite alternate;
}


@keyframes ambientBreath {

    from {

        opacity: .55;

        transform:
            translate(-50%, -50%) scale(.92);

    }


    to {

        opacity: 1;

        transform:
            translate(-50%, -50%) scale(1.08);

    }

}


/* ======================================================
   HUGE BACKGROUND TYPOGRAPHY
====================================================== */

.work-background-type {

    position: absolute;

    inset: 0;

    z-index: -2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    pointer-events: none;

    will-change: transform;
}


.work-background-type span {

    position: relative;

    display: block;

    font-family:
        "Archivo Black",
        sans-serif;

    font-size:
        clamp(140px, 22vw, 390px);

    font-weight: 900;

    line-height: .57;

    letter-spacing: -18px;

    color: transparent;

    -webkit-text-stroke:

        1px rgba(183, 255, 0, .075);

    white-space: nowrap;
}


.work-background-type span:first-child {

    transform:
        translateX(-11%);
}


.work-background-type span:last-child {

    transform:
        translateX(35%);
}


/* TYPOGRAPHY GLOW */

.work-background-type span::after {

    content:
        attr(data-text);

    position: absolute;

    left: 0;
    top: 0;

    color: transparent;

    -webkit-text-stroke:

        8px rgba(183, 255, 0, .015);

    filter:
        blur(12px);
}


/* ======================================================
   TOP LEFT HEADING
====================================================== */

.work-title {

    position: absolute;

    left: 4vw;
    top: 4vh;

    z-index: 120;
}


.work-title>span {

    /* color: #696d65; */
    color: #ffffff;

    font:

        9px "DM Mono",
        monospace;

    letter-spacing:
        3px;
}


.work-title h2 {

    margin:
        7px 0 0;

    color: #efefec;

    font:

        clamp(29px, 3vw, 47px)/.88 "Archivo Black",
        sans-serif;

    letter-spacing:
        -2.5px;
}


.work-title h2 span {

    color:
        var(--green);

    text-shadow:

        0 0 25px rgba(183, 255, 0, .25);
}


/* small green underline */

.work-title::after {

    content: "";

    display: block;

    width: 34px;
    height: 2px;

    margin-top: 13px;

    background:
        var(--green);

    box-shadow:

        0 0 10px rgba(183, 255, 0, .5);
}


/* ======================================================
   SIDE LABEL
====================================================== */

.work-side-label {

    position: absolute;

    right: 2vw;
    top: 50%;

    z-index: 120;

    color: #ffffff;

    font:

        9px "DM Mono",
        monospace;

    letter-spacing:
        4px;

    transform:

        translateY(-50%) rotate(90deg);

    white-space:
        nowrap;
}


/* ======================================================
   3D CURVED STAGE
====================================================== */

.curve-stage {

    position: absolute;

    inset: 0;

    perspective:
        820px;

    perspective-origin:
        50% 54%;

    transform-style:
        preserve-3d;
}


.curve-track {

    position: absolute;

    inset: 0;

    transform-style:
        preserve-3d;
}


/* ======================================================
   PROJECT
====================================================== */

.curve-project {

    position: absolute;

    left: 50%;
    top: 50%;

    width:
        min(54vw, 800px);

    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;

    will-change:
        transform,
        opacity,
        filter;

    transform-origin:
        center center;
}


/* ======================================================
   PROJECT FRAME
====================================================== */

.project-frame {

    position: relative;

    padding: 7px;

    overflow: visible;

    background:

        linear-gradient(145deg,
            rgba(20, 23, 16, .96),
            rgba(8, 9, 7, .96));

    border:

        1px solid rgba(183, 255, 0, .14);

    box-shadow:

        0 55px 130px rgba(0, 0, 0, .8),

        0 10px 35px rgba(0, 0, 0, .55),

        inset 0 1px 0 rgba(255, 255, 255, .04);

    transition:

        border-color .5s ease,

        box-shadow .5s ease;

    backdrop-filter:
        blur(10px);
}


/* ACTIVE PROJECT */

.curve-project.is-active .project-frame {

    border-color:
        rgba(183, 255, 0, .55);

    box-shadow:

        0 65px 160px rgba(0, 0, 0, .9),

        0 0 80px rgba(183, 255, 0, .07),

        0 0 0 1px rgba(183, 255, 0, .05),

        inset 0 1px 0 rgba(255, 255, 255, .07);
}


/* ======================================================
   GLOW LINE
====================================================== */

.project-frame::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -2px;

    width: 0;
    height: 2px;

    transform:
        translateX(-50%);

    background:

        linear-gradient(90deg,
            transparent,
            var(--green),
            transparent);

    box-shadow:

        0 0 20px var(--green);

    transition:

        width .8s cubic-bezier(.16, 1, .3, 1);
}


.curve-project.is-active .project-frame::after {

    width: 80%;
}


/* ======================================================
   BROWSER TOP BAR
====================================================== */

.project-topbar {

    position: relative;

    height: 30px;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    padding:
        0 8px;

    color: #ffffff;

    font:

        9px "DM Mono",
        monospace;

    letter-spacing:
        1.5px;
}


.project-topbar span:first-child {

    color:
        var(--green);
}


/* fake browser dots */

.project-topbar::before {

    content: "●  ●  ●";

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    color: #ffffff;

    font-size: 6px;

    letter-spacing: 4px;
}


/* ======================================================
   PROJECT IMAGE
====================================================== */

.project-image {

    position: relative;

    overflow: hidden;

    background: #080808;

    isolation: isolate;
}


.project-image img {

    display: block;

    width: 100%;
    height: auto;

    transform:
        scale(1.012);

    filter:

        saturate(.94) contrast(1.02);

    transition:

        transform 1.2s cubic-bezier(.16, 1, .3, 1),

        filter .7s ease;
}


.curve-project.is-active .project-image img {

    filter:

        saturate(1.05) contrast(1.03);
}


/* ======================================================
   IMAGE OVERLAY
====================================================== */

.project-image::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:

        linear-gradient(115deg,
            rgba(255, 255, 255, .025),
            transparent 35%),

        linear-gradient(0deg,
            rgba(0, 0, 0, .12),
            transparent 30%);
}


/* ======================================================
   GLASS REFLECTION
====================================================== */

.image-glare {

    position: absolute;

    z-index: 8;

    top: -60%;
    left: -80%;

    width: 32%;
    height: 220%;

    transform:
        rotate(20deg);

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .13),

            transparent);

    pointer-events: none;

    opacity: 0;
}


.curve-project.is-active .image-glare {

    animation:

        screenGlare 1.8s cubic-bezier(.16, 1, .3, 1);
}


@keyframes screenGlare {

    0% {

        left: -70%;

        opacity: 0;

    }


    15% {

        opacity: .8;

    }


    100% {

        left: 150%;

        opacity: 0;

    }

}


/* ======================================================
   FLOATING TAGS
====================================================== */

.float-tag {

    position: absolute;

    z-index: 15;

    padding:
        8px 11px;

    color: #050505;

    background:
        var(--green);

    font:

        9px "Archivo Black",
        sans-serif;

    letter-spacing:
        1.3px;

    box-shadow:

        5px 6px 0 rgba(0, 0, 0, .65);

    opacity: 0;

    transition:

        opacity .45s ease,

        transform .7s cubic-bezier(.16, 1, .3, 1);
}


.tag-a {

    left: 4%;
    top: 8%;

    transform:

        translate(-20px, 15px) rotate(-8deg) scale(.8);
}


.tag-b {

    right: 4%;
    bottom: 8%;

    transform:

        translate(20px, 15px) rotate(8deg) scale(.8);
}


.curve-project.is-active .tag-a {

    opacity: 1;

    transform:

        translate(0, 0) rotate(-3deg) scale(1);
}


.curve-project.is-active .tag-b {

    opacity: 1;

    transform:

        translate(0, 0) rotate(3deg) scale(1);
}


/* ======================================================
   PROJECT INFORMATION
====================================================== */

.project-text {

    position: relative;

    padding-top: 18px;

    transform:
        translateZ(28px);

    transition:
        opacity .5s ease;
}


.project-text>span {

    color: #ffffff;

    font:

        9px "DM Mono",
        monospace;

    letter-spacing:
        2.3px;
}


.project-text h3 {

    margin:
        10px 0 10px;

    color: #e9e9e6;

    font:

        clamp(27px, 3.1vw, 47px)/.86 "Archivo Black",
        sans-serif;

    letter-spacing:
        -2.5px;

    transition:

        color .45s ease,

        transform .6s cubic-bezier(.16, 1, .3, 1);
}


.curve-project.is-active .project-text h3 {

    color:
        var(--green);

    text-shadow:

        0 0 35px rgba(183, 255, 0, .08);
}


.project-text p {

    max-width:
        370px;

    margin: 0;

    color: #ffffff;

    font:

        15px/1.75 "DM Mono",
        monospace;
}


/* ======================================================
   VIEW PROJECT
====================================================== */

.project-text a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 16px;

    color: #ddd;

    text-decoration: none;

    font:

        9px "DM Mono",
        monospace;

    letter-spacing:
        2px;

    transition:

        color .3s,

        gap .3s;
}


.project-text a b {

    color:
        var(--green);

    font-size:
        12px;

    font-weight: 400;
}


.project-text a:hover {

    color:
        var(--green);

    gap: 14px;
}


/* ======================================================
   PROJECT COUNTER
====================================================== */

.project-counter {

    position: absolute;

    right: 4vw;
    top: 4vh;

    z-index: 120;

    display: flex;

    align-items: baseline;

    gap: 7px;

    color: #ffffff;

    font:

        9px "DM Mono",
        monospace;
}


.project-counter strong {

    color:
        var(--green);

    font-weight: 400;

    font-size: 18px;

    text-shadow:

        0 0 15px rgba(183, 255, 0, .3);
}


/* ======================================================
   BOTTOM PROGRESS
====================================================== */

.work-progress {

    position: absolute;

    z-index: 120;

    left: 4vw;
    right: 4vw;
    bottom: 3vh;

    display: flex;

    align-items: center;

    gap: 18px;

    color: #ffffff;

    font:

        9px "DM Mono",
        monospace;

    letter-spacing:
        2.5px;
}


.work-progress>div {

    flex: 1;

    height: 1px;

    overflow: visible;

    background: #292d27;
}


.work-progress i {

    position: relative;

    display: block;

    width: 0%;
    height: 1px;

    background:
        var(--green);

    box-shadow:

        0 0 10px rgba(183, 255, 0, .7);
}


.work-progress i::after {

    content: "";

    position: absolute;

    right: -3px;
    top: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--green);

    box-shadow:

        0 0 16px var(--green);
}


/* ======================================================
   MOBILE
====================================================== */

@media(max-width:768px) {

    .work-showcase {

        height: 410vh;

    }


    .curve-stage {

        perspective:
            650px;

    }


    .curve-project {

        width: 80vw;

    }


    .work-title {

        left: 20px;
        top: 25px;

    }


    .work-title h2 {

        font-size:
            27px;

    }


    .work-background-type span {

        font-size:
            45vw;

        letter-spacing:
            -8px;

    }


    .project-topbar {

        height: 25px;

        font-size: 9px;

    }


    .project-text h3 {

        font-size:
            clamp(24px,
                8vw,
                36px);

    }


    .project-text p {

        max-width: 85%;

        font-size: 9px;

    }


    .project-text a {

        font-size: 9px;

    }


    .float-tag {

        padding:
            6px 8px;

        font-size: 9px;

    }


    .work-side-label {

        display: none;

    }


    .project-counter {

        right: 20px;
        top: 25px;

    }


    .work-progress {

        left: 20px;
        right: 20px;
        bottom: 20px;

    }

}


/* ======================================================
   REDUCED MOTION
====================================================== */

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

    .work-ambient,
    .work-sticky::before {

        animation: none;

    }

}

/* =====================================================
   WORK ENTRY EXPERIENCE
===================================================== */

.work-entry {

    position: absolute;
    inset: 0;

    z-index: 500;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(ellipse at center,
            #11170b 0%,
            #080a06 35%,
            #030303 70%,
            #000 100%);

    transform-style: preserve-3d;

    perspective: 900px;

    pointer-events: none;

    will-change:
        opacity,
        transform,
        clip-path;
}


/* =====================================================
   BACKGROUND NUMBER
===================================================== */

.entry-number {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    color: transparent;

    -webkit-text-stroke:
        1px rgba(183, 255, 0, .06);

    font:
        min(70vw, 900px)/.7 "Archivo Black",
        sans-serif;

    letter-spacing: -40px;

    opacity: .8;

    will-change: transform;
}


/* =====================================================
   PORTAL RINGS
===================================================== */

.entry-rings {

    position: absolute;

    left: 50%;
    top: 50%;

    width: min(70vw, 900px);
    aspect-ratio: 1;

    transform:
        translate(-50%, -50%);

    transform-style: preserve-3d;
}


.entry-rings i {

    position: absolute;

    left: 50%;
    top: 50%;

    border:

        1px solid rgba(183, 255, 0, .14);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    box-shadow:

        inset 0 0 50px rgba(183, 255, 0, .015),

        0 0 30px rgba(183, 255, 0, .02);
}


.entry-rings i:nth-child(1) {

    width: 100%;
    height: 100%;
}


.entry-rings i:nth-child(2) {

    width: 72%;
    height: 72%;

    border-color:
        rgba(183, 255, 0, .20);
}


.entry-rings i:nth-child(3) {

    width: 43%;
    height: 43%;

    border-color:
        rgba(183, 255, 0, .30);

    box-shadow:
        0 0 50px rgba(183, 255, 0, .07);
}


/* =====================================================
   CENTRAL FRAME
===================================================== */

.entry-frame {

    position: relative;

    z-index: 5;

    width: min(74vw, 1000px);

    padding:
        clamp(45px, 7vw, 100px) 40px;

    text-align: center;

    transform-style: preserve-3d;

    will-change:
        transform,
        opacity;
}


/* =====================================================
   FOUR CORNERS
===================================================== */

.entry-corner {

    position: absolute;

    width: 45px;
    height: 45px;

    opacity: .8;
}


.corner-tl {

    left: 0;
    top: 0;

    border-left:
        1px solid var(--green);

    border-top:
        1px solid var(--green);
}


.corner-tr {

    right: 0;
    top: 0;

    border-right:
        1px solid var(--green);

    border-top:
        1px solid var(--green);
}


.corner-bl {

    left: 0;
    bottom: 0;

    border-left:
        1px solid var(--green);

    border-bottom:
        1px solid var(--green);
}


.corner-br {

    right: 0;
    bottom: 0;

    border-right:
        1px solid var(--green);

    border-bottom:
        1px solid var(--green);
}


/* =====================================================
   ENTRY TEXT
===================================================== */

.entry-eyebrow {

    display: block;

    margin-bottom: 22px;

    color: var(--green);

    font:
        9px "DM Mono",
        monospace;

    letter-spacing: 6px;
}


.entry-frame h2 {

    margin: 0;

    font-family:
        "Archivo Black",
        sans-serif;
    font: clamp(40px, 5.5vw, 82px)/.85 "Archivo Black", sans-serif;
    /* font-size:
        clamp(75px, 12vw, 190px); */

    line-height: .73;

    letter-spacing:
        clamp(-10px, -.65vw, -4px);
}


.entry-frame h2 span {

    display: block;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(240, 240, 235, .55);
}


.entry-frame h2 strong {

    display: block;

    color: var(--green);

    font-weight: inherit;

    text-shadow:

        0 0 30px rgba(183, 255, 0, .10),

        0 0 90px rgba(183, 255, 0, .06);
}


/* =====================================================
   GREEN LINE
===================================================== */

.entry-line {

    width: 0;

    max-width: 320px;

    height: 1px;

    margin:
        30px auto 22px;

    background:

        linear-gradient(90deg,
            transparent,
            var(--green),
            transparent);

    box-shadow:
        0 0 15px rgba(183, 255, 0, .7);
}


/* =====================================================
   DESCRIPTION
===================================================== */

.entry-frame p {

    margin: 0;

    color: #ffffff;

    font:
        8px "DM Mono",
        monospace;

    letter-spacing: 4px;
}


/* =====================================================
   BOTTOM SCROLL INDICATOR
===================================================== */

.entry-scroll {

    position: absolute;

    left: 4vw;
    right: 4vw;
    bottom: 4vh;

    display: flex;

    align-items: center;

    gap: 15px;

    color: #ffffff;

    font:
        6px "DM Mono",
        monospace;

    letter-spacing: 3px;
}


.entry-scroll>div {

    position: relative;

    flex: 1;

    height: 1px;

    overflow: hidden;

    background: #252824;
}


.entry-scroll>div i {

    position: absolute;

    left: -20%;
    top: 0;

    width: 20%;
    height: 1px;

    background: var(--green);

    box-shadow:
        0 0 12px var(--green);

    animation:
        entryScan 2s ease-in-out infinite;
}


@keyframes entryScan {

    0% {
        left: -20%;
    }

    100% {
        left: 110%;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px) {

    .entry-frame {

        width: 86vw;

        padding:
            60px 15px;

    }


    .entry-frame h2 {

        /* font-size:
            clamp(70px, 21vw, 120px); */
        font: clamp(40px, 5.5vw, 82px)/.85 "Archivo Black", sans-serif;

        letter-spacing: -5px;

    }


    .entry-eyebrow {

        font-size: 5px;

        letter-spacing: 4px;

    }


    .entry-frame p {

        font-size: 5px;

        line-height: 2;

        letter-spacing: 2px;

    }


    .entry-rings {

        width: 120vw;

    }


    .entry-number {

        font-size: 100vw;

    }


    .entry-scroll {

        left: 20px;
        right: 20px;

    }

}

/* =========================================
   SIMPLE LETTER-BY-LETTER REVEAL
========================================= */

.hero-typing>span {
    display: block;
    min-height: 0.9em;
}

/* blinking cursor while typing */

.hero-typing .typing-cursor::after {
    content: "";
    display: inline-block;

    width: 0.045em;
    height: 0.75em;

    margin-left: 8px;

    background: #b7ff00;

    vertical-align: 0;

    animation: cursorBlink 0.65s steps(1) infinite;

    box-shadow:
        0 0 12px rgba(183, 255, 0, .7);
}

@keyframes cursorBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }

}


/* KEEP OUTLINE TEXT STYLE */

.hero-typing .outline {
    color: transparent;
    -webkit-text-stroke: 1px #f1f1ed;
}


/* KEEP GREEN TEXT STYLE */

.hero-typing .acid {
    color: #b7ff00;
}



/* =========================================================
   WEBSITE PRICING TEASER
========================================================= */

.pricing-teaser {
    min-height: 100vh;

    position: relative;

    overflow: hidden;

    background: #0a0a0a;

    color: #f3efe7;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}


/* GRID BACKGROUND */

.pricing-teaser-grid {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .16;

    background-image:
        linear-gradient(#555 1px, transparent 1px),
        linear-gradient(90deg, #555 1px, transparent 1px);

    background-size: 70px 70px;

    mask-image:
        linear-gradient(to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent);
}


/* GLOW */

.pricing-teaser-glow {
    width: 600px;
    height: 600px;

    position: absolute;

    right: -200px;
    top: -150px;

    border-radius: 50%;

    background: #caff00;

    opacity: .08;

    filter: blur(100px);

    pointer-events: none;
}


/* TOP */

.pricing-teaser-top {
    position: relative;

    z-index: 2;

    padding-bottom: 25px;

    border-bottom: 1px solid #292929;

    display: flex;

    justify-content: space-between;

    color: #ffffff;

    font-size: 6px;

    letter-spacing: 2px;
}

.pricing-teaser-top span:last-child {
    color: #caff00;
}


/* MAIN */

.pricing-teaser-content {
    position: relative;

    z-index: 2;

    margin: auto 0;

    padding: 80px 0;

    display: grid;

    grid-template-columns:
        1.3fr .7fr;

    gap: 80px;

    align-items: center;
}


.pricing-teaser-title small {
    color: #caff00;

    font-size: 7px;

    letter-spacing: 2px;
}


.pricing-teaser-title h2 {
    margin-top: 18px;

    font:
        clamp(58px, 7.5vw, 118px)/.79 "Archivo Black",
        sans-serif;

    letter-spacing: -7px;
}


.pricing-teaser-title h2 em {
    color: #caff00;

    font-style: normal;
}


/* RIGHT */

.pricing-teaser-right {
    display: flex;

    flex-direction: column;

    align-items: center;
}


.pricing-teaser-right>p {
    max-width: 360px;

    margin-top: 40px;

    color: #ffffff;

    font-size: 9px;

    line-height: 1.8;
}


/* =========================================================
   ORBIT
========================================================= */

.price-orbit {
    width: min(330px, 80%);

    aspect-ratio: 1;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}


.orbit-line {
    position: absolute;

    border-radius: 50%;

    border: 1px solid #333;
}


.orbit-one {
    inset: 0;

    animation:
        pricingOrbit 15s linear infinite;
}


.orbit-two {
    inset: 17%;

    border-color: #222;

    animation:
        pricingOrbitReverse 10s linear infinite;
}


.orbit-one::before {
    content: "";

    width: 8px;

    height: 8px;

    position: absolute;

    top: 18%;

    left: 7%;

    border-radius: 50%;

    background: #caff00;

    box-shadow:
        0 0 20px #caff00;
}


.orbit-two::before {
    content: "";

    width: 5px;

    height: 5px;

    position: absolute;

    right: 5%;

    bottom: 25%;

    border-radius: 50%;

    background: white;
}


@keyframes pricingOrbit {

    to {
        transform: rotate(360deg);
    }

}


@keyframes pricingOrbitReverse {

    to {
        transform: rotate(-360deg);
    }

}


/* CENTER */

.orbit-core {
    width: 48%;

    aspect-ratio: 1;

    position: relative;

    z-index: 2;

    border-radius: 50%;

    background: #caff00;

    color: #080808;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition:
        transform .4s ease;
}


.pricing-teaser:hover .orbit-core {
    transform: scale(1.07);
}


.orbit-core span,
.orbit-core small {
    font-size: 5px;

    letter-spacing: 1.5px;
}


.orbit-core strong {
    margin: 5px 0;

    font:
        clamp(20px, 2.5vw, 36px) "Archivo Black";

    letter-spacing: -2px;
}


/* =========================================================
   LARGE CTA
========================================================= */

.pricing-explore {
    position: relative;

    z-index: 4;

    min-height: 145px;

    padding: 25px 30px;

    border-top: 1px solid #333;

    border-bottom: 1px solid #333;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition:
        background .4s ease,
        color .4s ease,
        padding .4s ease;
}


.pricing-explore::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background: #caff00;

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1);
}


.pricing-explore:hover::before {
    transform: scaleX(1);
}


.pricing-explore:hover {
    color: #080808;

    padding-left: 45px;
}


.pricing-explore div {
    display: flex;

    align-items: center;

    gap: 60px;
}


.pricing-explore small {
    color: #ffffff;

    font-size: 6px;

    letter-spacing: 2px;
}


.pricing-explore:hover small {
    color: #445400;
}


.pricing-explore strong {
    font:
        clamp(25px, 3vw, 42px)/.9 "Archivo Black";

    letter-spacing: -2px;
}


.pricing-explore>span {
    color: #caff00;

    font-size: 55px;

    transition:
        transform .4s ease;
}


.pricing-explore:hover>span {
    color: #080808;

    transform:
        translate(7px, -7px);
}


/* =========================================================
   BOTTOM
========================================================= */

.pricing-teaser-bottom {
    position: relative;

    z-index: 2;

    padding-top: 25px;

    display: flex;

    justify-content: center;

    gap: 25px;

    color: #ffffff;

    font-size: 6px;

    letter-spacing: 1.5px;
}


.pricing-teaser-bottom b {
    color: #caff00;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 750px) {

    .pricing-teaser {
        min-height: auto;

        padding-top: 70px;

        padding-bottom: 70px;
    }


    .pricing-teaser-content {
        padding: 65px 0;

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .pricing-teaser-title h2 {
        font-size: 52px;

        letter-spacing: -4px;
    }


    .pricing-teaser-right {
        align-items: flex-start;
    }


    .price-orbit {
        width: 240px;

        align-self: center;
    }


    .pricing-teaser-right>p {
        max-width: 100%;
    }


    .pricing-explore {
        min-height: 125px;

        padding: 20px;
    }


    .pricing-explore div {
        display: block;
    }


    .pricing-explore small {
        display: block;

        margin-bottom: 12px;
    }


    .pricing-explore strong {
        font-size: 25px;
    }


    .pricing-explore>span {
        font-size: 35px;
    }


    .pricing-teaser-bottom {
        flex-wrap: wrap;

        gap: 10px 15px;
    }

}

/* ==========================================================
   SERVICES + PRICING
========================================================== */

.services-pricing {
    position: relative;
    overflow: hidden;

    padding: 100px clamp(22px, 5vw, 80px);

    background: #050505;
    color: #fff;

    isolation: isolate;
}


/* BACKGROUND GRID */

.sp-grid {
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px);

    background-size: 70px 70px;

    pointer-events: none;
}


/* GREEN GLOW */

.sp-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    right: -300px;
    top: 250px;

    z-index: -2;

    border-radius: 50%;

    background: rgba(202, 255, 0, .09);

    filter: blur(150px);

    pointer-events: none;
}



/* ==========================================================
   TOP
========================================================== */

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

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.sp-top span {
    color: #caff00;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}



/* ==========================================================
   HEADING
========================================================== */

.sp-heading {
    padding: 65px 0 75px;
}

.sp-heading small {
    display: block;

    margin-bottom: 18px;

    color: #caff00;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}

.sp-heading h2 {
    max-width: 1050px;

    color: white;

    font-size: clamp(48px, 6.5vw, 100px);

    font-weight: 900;

    line-height: .92;

    letter-spacing: -.055em;
}

.sp-heading h2 span {
    color: #caff00;
}

.sp-heading h2 em {
    color: #caff00;

    font-style: normal;
}



/* ==========================================================
   SERVICES
========================================================== */

.sp-services {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid rgba(255, 255, 255, .15);

    border-bottom:
        1px solid rgba(255, 255, 255, .15);
}


.sp-service {
    position: relative;

    min-height: 340px;

    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right:
        1px solid rgba(255, 255, 255, .15);

    transition:
        background .4s ease,
        transform .4s ease;
}

.sp-service:last-child {
    border-right: none;
}


/* NUMBER */

.sp-number {
    color: #caff00;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;
}


/* LABEL */

.sp-label {
    display: block;

    margin-bottom: 12px;

    color: #caff00;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* TITLE */

.sp-service h3 {
    margin-bottom: 18px;

    color: white;

    font-size: clamp(25px, 2.4vw, 38px);

    font-weight: 900;

    line-height: .95;

    letter-spacing: -.04em;
}


/* TEXT */

.sp-service p {
    max-width: 350px;

    color: rgba(255, 255, 255, .62);

    font-size: 14px;

    line-height: 1.7;
}


/* ARROW */

.sp-arrow {
    position: absolute;

    right: 25px;
    top: 25px;

    color: #caff00;

    font-size: 25px;

    transition:
        transform .35s ease;
}



/* SERVICE HOVER */

.sp-service::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(202, 255, 0, .08),
            transparent 60%);

    opacity: 0;

    transition: opacity .4s ease;

    pointer-events: none;
}

.sp-service:hover::before {
    opacity: 1;
}

.sp-service:hover .sp-arrow {
    transform:
        translate(4px, -4px) rotate(45deg);
}



/* ==========================================================
   PRICING FEATURE
========================================================== */

.sp-pricing {
    position: relative;

    margin-top: 70px;

    min-height: 420px;

    display: grid;

    grid-template-columns:
        1.25fr .8fr 1fr;

    align-items: center;

    border:
        1px solid rgba(255, 255, 255, .15);

    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, .025),
            rgba(202, 255, 0, .035));

    overflow: hidden;
}



/* ==========================================================
   PRICING LEFT
========================================================== */

.sp-pricing-left {
    height: 100%;

    padding: 45px;

    display: flex;

    gap: 30px;

    align-items: flex-start;

    border-right:
        1px solid rgba(255, 255, 255, .12);
}

.sp-pricing-number {
    color: #caff00;

    font-size: 11px;
    font-weight: 800;
}

.sp-pricing-left h3 {
    color: white;

    font-size: clamp(35px, 4vw, 62px);

    line-height: .92;

    letter-spacing: -.05em;

    font-weight: 900;
}

.sp-pricing-left h3 em {
    color: #caff00;

    font-style: normal;
}



/* ==========================================================
   ORBIT
========================================================== */

.sp-pricing-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


.price-orbit {
    position: relative;

    width: 240px;
    height: 240px;

    display: grid;
    place-items: center;
}


/* RINGS */

.orbit-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(202, 255, 0, .28);
}

.ring-one {
    width: 100%;
    height: 100%;

    animation:
        orbitSpin 12s linear infinite;
}

.ring-two {
    width: 72%;
    height: 72%;

    border-style: dashed;

    animation:
        orbitSpinReverse 8s linear infinite;
}


/* CORE */

.orbit-core {
    width: 125px;
    height: 125px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #caff00;

    color: #050505;

    box-shadow:
        0 0 50px rgba(202, 255, 0, .18);
}

.orbit-core small {
    font-size: 8px;
    font-weight: 800;
}

.orbit-core strong {
    margin: 3px 0;

    font-size: 29px;
    font-weight: 900;
}

.orbit-core span {
    font-size: 7px;
    font-weight: 800;
}


/* DOTS */

.orbit-dot {
    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #caff00;

    box-shadow:
        0 0 15px #caff00;
}

.dot-one {
    top: 22px;
    right: 44px;

    animation:
        dotPulse 2s ease-in-out infinite;
}

.dot-two {
    bottom: 35px;
    left: 30px;

    animation:
        dotPulse 2s .7s ease-in-out infinite;
}



/* ==========================================================
   PRICING RIGHT
========================================================== */

.sp-pricing-right {
    padding: 45px;
}

.sp-pricing-right>p {
    max-width: 420px;

    margin-bottom: 28px;

    color: rgba(255, 255, 255, .65);

    font-size: 14px;

    line-height: 1.8;
}



/* ==========================================================
   PRICING BUTTON
========================================================== */

.sp-pricing-button {
    width: 100%;

    min-height: 105px;

    padding: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #caff00;

    color: #050505;

    transition:
        transform .35s ease,
        background .35s ease;
}

.sp-pricing-button small {
    display: block;

    margin-bottom: 6px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.sp-pricing-button strong {
    font-size: 16px;

    line-height: 1.2;
}

.sp-pricing-button>span {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #050505;

    color: #caff00;

    font-size: 23px;

    transition:
        transform .4s cubic-bezier(.16, 1, .3, 1);
}

.sp-pricing-button:hover {
    background: white;

    transform: translateY(-4px);
}

.sp-pricing-button:hover>span {
    transform:
        rotate(45deg) scale(1.08);
}



/* ==========================================================
   MARQUEE
========================================================== */

.sp-marquee {
    width: 100%;

    margin-top: 35px;

    overflow: hidden;

    border-top:
        1px solid rgba(255, 255, 255, .12);

    border-bottom:
        1px solid rgba(255, 255, 255, .12);
}


.sp-marquee-track {
    width: max-content;

    padding: 16px 0;

    display: flex;
    align-items: center;

    gap: 30px;

    animation:
        spMarquee 24s linear infinite;
}


.sp-marquee span {
    color: white;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;

    white-space: nowrap;
}

.sp-marquee b {
    color: #caff00;

    font-size: 9px;
}



/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes orbitSpin {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes orbitSpinReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }

}


@keyframes dotPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .5;
    }

    50% {
        transform: scale(1.7);
        opacity: 1;
    }

}


@keyframes spMarquee {

    from {
        transform: translateX(0);
    }

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

}



/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .sp-services {
        grid-template-columns: 1fr;
    }

    .sp-service {
        min-height: 230px;

        border-right: none;

        border-bottom:
            1px solid rgba(255, 255, 255, .12);
    }

    .sp-service:last-child {
        border-bottom: none;
    }


    .sp-pricing {
        grid-template-columns:
            1fr 1fr;
    }

    .sp-pricing-left {
        grid-column: 1 / -1;

        min-height: 270px;

        border-right: none;

        border-bottom:
            1px solid rgba(255, 255, 255, .12);
    }

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    .services-pricing {
        padding:
            70px 18px;
    }


    .sp-top span:last-child {
        display: none;
    }


    .sp-heading {
        padding:
            45px 0 50px;
    }


    .sp-heading h2 {
        font-size:
            clamp(42px, 13vw, 65px);
    }


    .sp-service {
        min-height: 260px;

        padding: 25px 15px;
    }


    .sp-service h3 {
        font-size: 30px;
    }


    .sp-pricing {
        margin-top: 45px;

        display: block;
    }


    .sp-pricing-left {
        min-height: auto;

        padding: 35px 22px;
    }


    .sp-pricing-left h3 {
        font-size: 42px;
    }


    .sp-pricing-center {
        padding: 45px 20px;

        border-bottom:
            1px solid rgba(255, 255, 255, .12);
    }


    .price-orbit {
        width: 210px;
        height: 210px;
    }


    .sp-pricing-right {
        padding: 30px 22px;
    }


    .sp-pricing-button {
        min-height: 95px;
    }

}


/* ==========================================================
   V9 REFINEMENT — CLEANER, EVEN, LESS CROWDED
========================================================== */

/* calmer global reading scale */
.about-text,
.project-text p,
.service-list p,
.contact p {
    font-size: 13px;
    line-height: 1.65;
}

.about-text {
    max-width: 520px;
}

.chips {
    gap: 7px;
}

.chips b {
    padding: 7px 10px;
    font-size: 9px;
}

/* compact services + pricing */
.services-pricing {
    position: relative;
    overflow: hidden;
    padding: 82px clamp(22px, 5vw, 76px) 88px;
    background: #050505;
    color: #fff;
}

.services-pricing::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(202, 255, 0, .025), transparent);
}

.sp-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.sp-top span,
.sp-heading small,
.sp-label,
.sp-price-copy>span {
    /* color: var(--acid); */
    color: #ffffff;
    ;

    font: 700 9px/1.3 "DM Mono", monospace;
    letter-spacing: 1.5px;
}

.sp-heading {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    column-gap: 70px;
    align-items: end;
    padding: 46px 0 52px;
}

.sp-heading small {
    grid-column: 1 / -1;
    margin-bottom: 13px;
}

.sp-heading h2 {
    margin: 0;
    max-width: 780px;
    color: #fff;
    font: clamp(42px, 5.2vw, 76px)/.9 "Archivo Black", sans-serif;
    letter-spacing: -.055em;
}

.sp-heading h2 span {
    color: var(--acid);
}

.sp-intro {
    max-width: 360px;
    margin: 0 0 4px;
    /* color: rgba(255, 255, 255, .58); */
    color: #ffffff;
    font-size: 13px;
    line-height: 1.65;
}

.sp-services {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.sp-service {
    position: relative;
    min-height: 245px;
    padding: 24px 26px 27px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(255, 255, 255, .13);
    overflow: hidden;
    transition: background .35s ease, transform .35s ease;
}

.sp-service:last-child {
    border-right: 0;
}

.sp-service::before {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--acid);
    transition: right .45s cubic-bezier(.16, 1, .3, 1);
}

.sp-service:hover {
    background: rgba(255, 255, 255, .025);
    transform: translateY(-3px);
}

.sp-service:hover::before {
    right: 0;
}

.sp-number {
    color: rgba(255, 255, 255, .35);
    font: 8px "DM Mono", monospace;
}

.sp-label {
    display: block;
    margin-bottom: 10px;
}

.sp-service h3 {
    margin: 0 0 13px;
    color: #fff;
    font: clamp(22px, 2vw, 31px)/.95 "Archivo Black", sans-serif;
    letter-spacing: -.035em;
}

.sp-service p {
    max-width: 285px;
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    line-height: 1.6;
}

.sp-arrow {
    position: absolute;
    top: 22px;
    right: 24px;
    color: var(--acid);
    font-size: 18px;
    transition: transform .35s ease;
}

.sp-service:hover .sp-arrow {
    transform: translate(3px, -3px);
}

/* pricing becomes one clean, useful CTA instead of another large section */
.sp-price-strip {
    position: relative;
    margin-top: 32px;
    min-height: 155px;
    padding: 27px 30px;
    display: grid;
    grid-template-columns: 1fr auto 54px;
    gap: 36px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .018);
    color: #fff;
    overflow: hidden;
    transition: border-color .35s ease, background .35s ease, transform .35s ease;
}

.sp-price-strip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--acid);
}

.sp-price-strip:hover {
    transform: translateY(-3px);
    border-color: rgba(202, 255, 0, .35);
    background: rgba(202, 255, 0, .035);
}

.sp-price-copy h3 {
    margin: 8px 0 6px;
    max-width: 650px;
    color: #fff;
    font: clamp(20px, 2.1vw, 31px)/1 "Archivo Black", sans-serif;
    letter-spacing: -.035em;
}

.sp-price-copy p {
    margin: 0;
    max-width: 650px;
    color: rgba(255, 255, 255, .52);
    font-size: 12px;
    line-height: 1.55;
}

.sp-price-start {
    min-width: 110px;
    text-align: right;
}

.sp-price-start small {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .42);
    font: 7px "DM Mono", monospace;
    letter-spacing: 1px;
}

.sp-price-start strong {
    color: var(--acid);
    font: 30px "Archivo Black", sans-serif;
}

.sp-price-arrow {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--acid);
    color: #050505;
    font-size: 18px;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.sp-price-strip:hover .sp-price-arrow {
    transform: translate(3px, -3px) rotate(45deg);
}

/* keep reveals clean — no blur-heavy movement in this section */
.services-pricing .reveal {
    filter: none;
    transform: translateY(22px);
}

.services-pricing .reveal.visible {
    transform: none;
}

/* slightly calmer contact */
.contact {
    padding-top: 110px;
    padding-bottom: 110px;
}

.contact h2 {
    margin: 16px 0 34px;
}

@media (max-width:900px) {
    .sp-heading {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .sp-intro {
        max-width: 520px;
    }

    .sp-services {
        grid-template-columns: 1fr;
    }

    .sp-service {
        min-height: 190px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .sp-service:last-child {
        border-bottom: 0;
    }

    .sp-price-strip {
        grid-template-columns: 1fr auto 46px;
        gap: 20px;
    }
}

@media (max-width:620px) {
    .services-pricing {
        padding: 64px 18px 68px;
    }

    .sp-top span:last-child {
        display: none;
    }

    .sp-heading {
        padding: 35px 0 40px;
    }

    .sp-heading h2 {
        font-size: clamp(38px, 12vw, 54px);
    }

    .sp-intro {
        font-size: 12px;
    }

    .sp-service {
        min-height: 180px;
        padding: 22px 18px;
    }

    .sp-service h3 {
        font-size: 25px;
    }

    .sp-service p {
        font-size: 11.5px;
    }

    .sp-price-strip {
        padding: 23px 20px;
        grid-template-columns: 1fr 44px;
        gap: 18px;
    }

    .sp-price-start {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }

    .sp-price-arrow {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .sp-price-copy h3 {
        font-size: 22px;
    }

    .contact {
        padding-top: 85px;
        padding-bottom: 85px;
    }
}



/* =========================================
   LIVE PROJECTS
========================================= */

.live-projects {
    position: relative;
    z-index: 20;
    padding: 120px 6%;
    background: #080808;
    color: #fff;
}

.live-projects-header {
    max-width: 800px;
    margin-bottom: 60px;
}

.live-projects-header>span {
    display: block;
    margin-bottom: 20px;

    font-size: 11px;
    letter-spacing: 0.22em;
    opacity: 0.55;
}

.live-projects-header h2 {
    margin: 0;

    font-size: clamp(42px, 6vw, 85px);
    line-height: 0.95;
    font-weight: 300;
    letter-spacing: -0.04em;
}

.live-projects-header h2 strong {
    font-weight: 700;
}

.live-projects-header p {
    margin-top: 25px;
    font-size: 14px;
    opacity: 0.55;
}


/* GRID */

.live-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* CARD */

.live-project-card {
    display: block;
    color: inherit;
    text-decoration: none;

    position: relative;
    cursor: pointer;

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    padding-top: 15px;

    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

.live-project-card:hover {
    transform: translateY(-8px);
}


/* IMAGE */

.live-project-image {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 10;

    background: #111;
}

.live-project-image img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform 0.7s cubic-bezier(.2, .8, .2, 1);
}

.live-project-card:hover img {
    transform: scale(1.05);
}


/* HOVER OVERLAY */

.visit-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.65);

    opacity: 0;

    transition: opacity 0.35s ease;

    pointer-events: none;
}

.visit-overlay span {
    font-size: 11px;
    letter-spacing: 0.18em;

    border: 1px solid rgba(255, 255, 255, 0.5);

    padding: 14px 18px;
}

.live-project-card:hover .visit-overlay {
    opacity: 1;
}


/* TEXT */

.live-project-info {
    padding-top: 20px;
}

.live-project-info>span {
    font-size: 9px;
    letter-spacing: 0.18em;
    opacity: 0.45;
}

.live-project-info h3 {
    margin: 10px 0 7px;

    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.live-project-info p {
    margin: 0;

    font-size: 11px;
    letter-spacing: 0.08em;

    opacity: 0.5;

    transition: opacity 0.3s ease;
}

.live-project-card:hover .live-project-info p {
    opacity: 1;
}


/* MOBILE */

@media (max-width: 900px) {

    .live-projects {
        padding: 90px 5%;
    }

    .live-projects-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .live-projects-header {
        margin-bottom: 45px;
    }

}

/* =====================================================
   ACTIVE PROJECT — EXTERNAL WEBSITE BUTTON
===================================================== */

.active-project-link {
    position: absolute !important;

    left: 50% !important;
    bottom: 9vh !important;

    transform: translateX(-50%) !important;

    z-index: 9999 !important;

    display: flex !important;
    align-items: center;
    gap: 18px;

    padding: 15px 22px;

    background: #b7ff00;
    color: #050505 !important;

    border: 1px solid #b7ff00;

    font: 500 10px "DM Mono", monospace;
    letter-spacing: 2px;

    text-decoration: none;

    cursor: pointer !important;

    pointer-events: auto !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.active-project-link:hover {
    transform: translateX(-50%) translateY(-4px) !important;

    box-shadow:
        0 0 35px rgba(183, 255, 0, .35);
}

.active-project-link b {
    font-size: 15px;
    font-weight: 400;
}

.curve-stage {
    z-index: 10;
}

.active-project-link {
    z-index: 10000 !important;
}

/* ==========================================================
   MOBILE RESPONSIVE FINAL PASS — 2026
   Keeps the desktop experience intact and gives phones a
   clean, touch-friendly, non-overflowing layout.
========================================================== */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
video,
svg {
    max-width: 100%;
}

.mobile-project-link {
    display: none !important;
}

@media (max-width: 820px) {
    html {
        scroll-padding-top: 72px;
    }

    body {
        width: 100%;
        overflow-x: hidden;
    }

    main {
        width: 100%;
        overflow: hidden;
    }

    .mobile-nav {
        padding-inline: 16px;
    }

    .mobile-nav nav {
        max-height: calc(100svh - 62px);
        overflow-y: auto;
    }

    .mobile-nav nav a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .hero {
        min-height: 100svh;
        padding: 105px 18px 92px;
        align-items: center;
    }

    .hero-copy {
        width: 100%;
        max-width: none;
    }

    .hero h1,
    .hero-typing {
        font-size: clamp(50px, 16.2vw, 82px);
        line-height: .84;
        letter-spacing: -.055em;
        max-width: 100%;
    }

    .hero h1 span,
    .hero-typing>span {
        white-space: nowrap;
    }

    .hero-actions {
        margin-top: 36px;
        width: 100%;
    }

    .hero-actions .primary,
    .hero-actions .textlink {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
    }

    .hero-side {
        display: none;
    }

    .marquee {
        bottom: 0;
    }

    .section {
        padding: 72px 18px;
    }

    .about-grid {
        gap: 38px;
    }

    .portrait-wrap {
        width: min(82vw, 310px);
        margin-inline: auto;
    }

    .about-copy h2 {
        font-size: clamp(39px, 11.2vw, 62px);
        line-height: .91;
        letter-spacing: -.045em;
        overflow-wrap: normal;
    }

    .about-text {
        max-width: 100%;
        font-size: 12px;
    }

    .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .chips b {
        max-width: 100%;
    }

    /* On phones the 3D overlapping cards become a normal project stack.
       This removes transform hit-testing problems and makes every project
       readable and tappable. */
    .work-showcase {
        height: auto !important;
        min-height: 0;
        padding: 78px 18px 72px;
    }

    .work-sticky {
        position: relative !important;
        top: auto;
        height: auto !important;
        min-height: 0;
        overflow: visible;
        padding: 0;
        background: #050505;
    }

    .work-entry,
    .work-ambient,
    .work-background-type,
    .work-side-label,
    .project-counter,
    .work-progress,
    .active-project-link {
        display: none !important;
    }

    .work-title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 34px;
    }

    .work-title .sp-top {
        margin: 0;
    }

    .curve-stage {
        position: relative !important;
        inset: auto !important;
        perspective: none !important;
        transform: none !important;
        z-index: auto !important;
    }

    .curve-track {
        position: relative !important;
        inset: auto !important;
        display: grid;
        grid-template-columns: 1fr;
        gap: 64px;
        transform: none !important;
    }

    .curve-project {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .project-frame {
        padding: 5px;
        transform: none !important;
        box-shadow: 0 24px 65px rgba(0, 0, 0, .55);
    }

    .project-topbar {
        height: 28px;
        font-size: 8px;
    }

    .project-image img {
        width: 100%;
        transform: none !important;
    }

    .float-tag {
        font-size: 7px;
        padding: 6px 7px;
    }

    .project-text {
        padding-top: 17px;
        transform: none !important;
        opacity: 1 !important;
    }

    .project-text>span {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .project-text h3 {
        margin: 9px 0 10px;
        font-size: clamp(30px, 10vw, 44px);
        line-height: .9;
        letter-spacing: -1.8px;
    }

    .project-text p {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.65;
    }

    .mobile-project-link {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        margin-top: 18px;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid rgba(183, 255, 0, .55);
        color: var(--green) !important;
        font: 9px "DM Mono", monospace;
        letter-spacing: 1.5px;
        text-decoration: none;
        pointer-events: auto !important;
    }

    .services-pricing {
        padding: 70px 18px !important;
    }

    .sp-heading {
        grid-template-columns: 1fr !important;
    }

    .sp-heading h2 {
        font-size: clamp(40px, 12vw, 58px);
        line-height: .92;
    }

    .sp-services {
        grid-template-columns: 1fr !important;
    }

    .sp-service {
        min-height: 170px;
    }

    .sp-price-strip {
        width: 100%;
    }

    .contact {
        padding: 82px 18px !important;
    }

    .contact h2 {
        font-size: clamp(45px, 14vw, 72px);
        line-height: .9;
        overflow-wrap: normal;
    }

    .mail {
        max-width: 100%;
        font-size: clamp(8px, 2.7vw, 11px);
        overflow-wrap: anywhere;
        gap: 10px;
    }

    footer {
        padding: 28px 18px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-inline: 16px;
    }

    .hero h1,
    .hero-typing {
        font-size: clamp(46px, 15.8vw, 68px);
    }

    .hero-actions .primary {
        width: 100%;
        justify-content: space-between;
    }

    .section,
    .work-showcase,
    .services-pricing,
    .contact {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .about-copy h2 {
        font-size: clamp(36px, 10.8vw, 48px);
    }

    .project-text h3 {
        font-size: clamp(29px, 9.6vw, 39px);
    }

    .sp-service {
        padding-inline: 16px;
    }

    .sp-price-strip {
        padding: 20px 16px;
    }

    .sp-price-copy h3 {
        font-size: 20px;
    }

    .contact h2 {
        font-size: clamp(40px, 13.2vw, 58px);
    }
}

@media (max-width: 360px) {
    .mobile-nav {
        padding-inline: 13px;
    }

    .mobile-nav .logo {
        font-size: 16px;
    }

    .hero h1,
    .hero-typing {
        font-size: 15.2vw;
    }

    .project-topbar span:last-child {
        max-width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==========================================================
   FINAL MOBILE ALIGNMENT + SPACING
   MAIN PORTFOLIO
========================================================== */

@media screen and (max-width: 820px) {

    /* ---------- GLOBAL ---------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .section {
        padding: 58px 18px !important;
    }

    /* Section labels */
    .section-tag,
    .mini,
    .kicker {
        width: 100%;
        text-align: center !important;
    }

    .section-tag {
        margin-bottom: 28px !important;
    }


    /* ======================================================
       HERO
    ====================================================== */

    .hero {
        min-height: auto !important;
        padding: 100px 18px 75px !important;

        display: flex;
        justify-content: center;
        align-items: center !important;

        text-align: center;
    }

    .hero-copy {
        width: 100%;
        max-width: 600px;

        margin: 0 auto;

        text-align: center;
    }

    .hero h1,
    .hero-typing {
        width: 100%;

        margin: 18px auto 22px !important;

        text-align: center !important;

        font-size: clamp(48px, 15vw, 78px) !important;
        line-height: .86 !important;
    }

    .hero h1 span,
    .hero-typing>span {
        text-align: center !important;
    }

    /* Hero paragraph */
    .hero .intro {
        width: 100%;
        max-width: 520px !important;

        margin: 0 auto !important;

        font-size: 11px !important;
        line-height: 1.7 !important;

        text-align: justify !important;
        text-align-last: left;
        text-justify: inter-word;
        hyphens: auto;
    }

    .hero-actions {
        width: 100%;

        margin-top: 24px !important;

        display: flex;
        flex-direction: column;
        align-items: center !important;
        justify-content: center;

        gap: 12px !important;
    }

    .hero-actions .primary,
    .hero-actions .textlink {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-side {
        display: none !important;
    }


    /* ======================================================
       ABOUT
    ====================================================== */

    .about-grid {
        display: flex !important;
        flex-direction: column !important;

        gap: 28px !important;
    }

    .portrait-wrap {
        width: min(78vw, 300px) !important;

        margin: 0 auto !important;
    }

    .photo-meta {
        justify-content: center !important;
        gap: 20px;
    }

    .about-copy {
        width: 100%;

        text-align: center;
    }

    .about-copy .mini {
        display: block;

        margin-bottom: 10px;

        text-align: center !important;
    }

    .about-copy h2 {
        width: 100%;

        margin: 10px auto 18px !important;

        font-size: clamp(37px, 11vw, 54px) !important;
        line-height: .94 !important;

        text-align: center !important;
    }

    .about-text {
        width: 100%;
        max-width: 100% !important;

        margin: 0 auto !important;

        font-size: 11px !important;
        line-height: 1.7 !important;

        text-align: justify !important;
        text-align-last: left;
        text-justify: inter-word;

        letter-spacing: 0 !important;
        hyphens: auto;
    }

    .chips {
        width: 100%;

        margin-top: 18px !important;

        display: flex;
        justify-content: center !important;

        gap: 6px !important;
    }


    /* ======================================================
       SELECTED WORK
    ====================================================== */

    .work-showcase {
        height: auto !important;
        min-height: 0 !important;

        padding: 58px 18px !important;
    }

    .work-sticky {
        position: relative !important;

        top: auto !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;
    }

    .work-title {
        width: 100%;

        margin: 0 auto 28px !important;

        display: block !important;

        text-align: center !important;
    }

    .work-title h2 {
        width: 100%;

        margin: 0 auto !important;

        font-size: clamp(42px, 12vw, 60px) !important;
        line-height: .9 !important;

        text-align: center !important;
    }

    .work-title p {
        width: 100%;
        max-width: 500px !important;

        margin: 15px auto 0 !important;

        font-size: 9px !important;
        line-height: 1.65 !important;

        text-align: justify !important;
        text-align-last: left;

        hyphens: auto;
    }

    .curve-track {
        gap: 42px !important;
    }

    .curve-project {
        width: 100% !important;

        margin: 0 auto !important;
    }

    .project-text {
        width: 100%;

        padding-top: 14px !important;

        text-align: center !important;
    }

    .project-text>span {
        display: block;

        text-align: center !important;
    }

    .project-text h3 {
        width: 100%;

        margin: 7px auto 10px !important;

        font-size: clamp(29px, 9vw, 40px) !important;
        line-height: .95 !important;

        text-align: center !important;
    }

    .project-text p {
        width: 100%;
        max-width: 100% !important;

        margin: 0 auto 13px !important;

        font-size: 10px !important;
        line-height: 1.65 !important;

        text-align: justify !important;
        text-align-last: left;
        text-justify: inter-word;

        letter-spacing: 0 !important;
        hyphens: auto;
    }

    .mobile-project-link {
        margin: 14px auto 0 !important;

        display: inline-flex !important;
        justify-content: center;
        align-items: center;
    }


    /* ======================================================
       SERVICES
    ====================================================== */

    .services-title,
    .tool-lab h2 {
        width: 100%;

        margin: 0 auto 32px !important;

        font-size: clamp(36px, 10.5vw, 50px) !important;
        line-height: .94 !important;

        text-align: center !important;
    }

    .service-list article {
        min-height: 0 !important;

        padding: 22px 4px !important;

        gap: 10px !important;
    }

    .service-list h3 {
        text-align: center !important;
    }

    .service-list p {
        font-size: 10.5px !important;
        line-height: 1.65 !important;

        text-align: justify !important;
        text-align-last: left;

        hyphens: auto;
    }


    /* ======================================================
       TOOL LAB
    ====================================================== */

    .lab-grid {
        display: flex !important;
        flex-direction: column !important;

        gap: 28px !important;
    }

    .tool-lab {
        text-align: center;
    }

    .terminal {
        padding: 25px 18px !important;
    }


    /* ======================================================
       CONTACT
    ====================================================== */

    .contact {
        min-height: 0 !important;

        padding: 58px 18px !important;

        text-align: center !important;
    }

    .contact .mini {
        display: block;

        text-align: center !important;
    }

    .contact h2 {
        width: 100%;

        margin: 14px auto 26px !important;

        font-size: clamp(38px, 11vw, 54px) !important;
        line-height: .94 !important;

        text-align: center !important;
    }

    .mail {
        max-width: 100%;

        margin: 0 auto !important;

        display: inline-flex;
        justify-content: center;
        align-items: center;

        gap: 15px !important;

        font-size: 10px !important;
    }

    .note {
        text-align: center !important;
    }


    /* ======================================================
       FOOTER
    ====================================================== */

    footer {
        height: auto !important;
        min-height: 0 !important;

        padding: 28px 18px !important;

        display: flex;
        flex-direction: column;

        justify-content: center !important;
        align-items: center !important;

        gap: 10px;

        text-align: center !important;
    }
}


@media screen and (max-width: 450px) {

    .section,
    .work-showcase,
    .contact {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .hero h1,
    .hero-typing {
        font-size: 14.5vw !important;
    }

    .about-copy h2 {
        font-size: 10.5vw !important;
    }

    .work-title h2 {
        font-size: 11.5vw !important;
    }

    .services-title,
    .tool-lab h2,
    .contact h2 {
        font-size: 10.5vw !important;
    }
}