html, body {
    margin: 0;
    padding: 0;
    background: #040408;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

.pt-content {
    position: relative;
    z-index: 2;
    padding: 9em clamp(2em, 8vw, 10em) 0;
}

/* Big CEVIO background text, hero treatment */
.bg-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 18vw;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    padding: 0 2vw;
    z-index: 1;
}

.bg-letter {
    display: inline-block;
    color: rgba(255, 255, 255, 0.08);
    transform: translateY(110%);
}

.bg-letter.wave-in {
    animation: bgWaveUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bgWaveUp {
    0%   { transform: translateY(110%); }
    100% { transform: translateY(0); }
}

.bg-text.slide-up {
    transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    transform: translateY(-15vh);
}

.about-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4em;
    flex-wrap: wrap;
}

.about-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(3.5em, 9vw, 7em);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    display: inline-block;
}

/* Per-letter curtain reveal */
.about-heading .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

.about-heading .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.6s ease-out;
    transition-delay: calc(var(--i) * 60ms);
}

.about-heading.is-in .letter {
    transform: translateY(0);
    opacity: 1;
}

.about-side {
    flex: 0 1 28em;
    text-align: right;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
    margin: 0 0 0.6em;
}

.about-side .reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 0.045s);
}

.about-side.is-in .reveal-word {
    opacity: 1;
    transform: translateY(0);
}

.about-cta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(2em, 6vw, 6em);
    margin-top: clamp(25em, 60vh, 44em);
    position: relative;
    z-index: 3;
}

.about-cta-aside {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-family: 'Outfit', sans-serif;
}

.about-cta-aside-line {
    white-space: nowrap;
}

.about-cta-aside--left {
    justify-self: start;
    text-align: left;
}

.about-cta-aside--right {
    justify-self: end;
    text-align: right;
}

.about-cta-aside-eyebrow {
    font-weight: 500;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.4);
}

.about-cta-aside-line {
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
}

/* Mobile: drop the particle stage and the giant CEVIO background text.
   Also hide the Company / Reach eyebrow blocks and pull the View-our-story
   button up — the huge top gap was reserving space for the particle stage
   that no longer renders here. The cursor-driven spotlight on
   .about-story-intro::before is also dropped: without a pointer, the radial
   mask sits at -9999px and ends up hiding everything. */
@media (max-width: 768px) {
    .about-stage,
    .bg-text,
    .about-cta-aside,
    .about-cta-aside--left,
    .about-cta-aside--right {
        display: none !important;
    }
    .about-cta {
        margin-top: 18vh !important;
    }
    .about-cta-button {
        justify-self: center !important;
        text-align: center !important;
    }
    .about-story-intro::before {
        display: none !important;
    }
    .about-story-side-block {
        margin-left: auto !important;
        margin-top: 2.5em !important;
        text-align: right !important;
    }
    .about-things-heading-br {
        display: inline !important;
    }
    .about-things-heading {
        margin-top: clamp(3em, 8vh, 6em) !important;
    }

    /* .about-think's big margin-top and .about-story-mark are scroll-runway
       for the desktop particle morph. Pure dead space on mobile, so collapse both. */
    .about-think {
        margin-top: clamp(8em, 18vh, 12em) !important;
        margin-bottom: clamp(6em, 14vh, 10em) !important;
    }
    .about-story-mark {
        display: none !important;
    }

    /* Standard mobile CTA. Same pattern as bots/custom pages: full-width
       centered card, line break in the heading, stick stage hidden in JS too. */
    .cta-section {
        margin-top: 0 !important;
        padding: 0 1.4em 5em !important;
        pointer-events: auto !important;
        justify-content: center !important;
        align-items: stretch !important;
    }
    .cta-inner {
        width: 100% !important;
        max-width: none !important;
        align-items: stretch !important;
        text-align: center !important;
        padding: 1.4em 1.6em 1.6em !important;
        gap: 1em !important;
    }
    .cta-heading {
        font-size: clamp(2em, 7vw, 2.6em) !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .cta-heading-br {
        display: inline !important;
    }
    .cta-description {
        max-width: 100% !important;
        text-align: center !important;
    }
    .cta-button {
        align-self: center !important;
    }
    .cta-stick-stage {
        display: none !important;
    }
}

/* Hide the line break between "Things that" and "matter." on desktop. */
.about-things-heading-br { display: none; }
/* Only shows on mobile (see media query above). */
.cta-heading-br { display: none; }

/* Single-column on narrow viewports */
@media (max-width: 800px) {
    .about-cta {
        grid-template-columns: 1fr;
        gap: 1.6em;
    }
    .about-cta-aside--left,
    .about-cta-aside--right {
        justify-self: center;
        text-align: center;
        max-width: 22em;
    }
}

.about-cta-button {
    display: inline-block;
    padding: 0.95em 2.2em;
    border-radius: 100px;
    background: linear-gradient(180deg, #b89cff 0%, #6a4aff 100%);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 1em;
    text-decoration: none;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 12px 40px -12px rgba(138, 92, 255, 0.6);
    transform: translateZ(0);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-cta-button:hover {
    transform: translateZ(0) scale(1.05);
    box-shadow: 0 18px 50px -10px rgba(138, 92, 255, 0.7);
}

/* Rolling text hover: original slides up, clone comes from below */
.about-cta-button-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.4;
}

.about-cta-button-text-row {
    display: block;
    white-space: nowrap;
}

.about-cta-button-text-row--clone {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

.about-cta-button-char {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
    transform: translateY(0);
}

.about-cta-button:hover .about-cta-button-char {
    transform: translateY(-100%);
}

.about-story {
    margin-top: clamp(20em, 38vh, 32em);
    position: relative;
    z-index: 3;
}

.about-story-intro {
    position: relative;
    z-index: 0;
}

.about-story-intro::before {
    content: '';
    position: absolute;
    top: -28vh;
    bottom: -30vh;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-image: url('../images/wien-foto.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.16;
    z-index: -1;
    pointer-events: none;
    /* Cursor spotlight + top/bottom edge fade. Composited via intersect. */
    mask-image:
        radial-gradient(
            circle 50px at var(--mx, -9999px) var(--my, -9999px),
            rgba(255, 255, 255, 1) 0px,
            rgba(255, 255, 255, 1) 25px,
            rgba(255, 255, 255, 0.012) 110px,
            rgba(255, 255, 255, 0.012) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 14vh,
            rgba(255, 255, 255, 1) calc(100% - 22vh),
            rgba(255, 255, 255, 0) 100%
        );
    mask-composite: intersect;
    -webkit-mask-image:
        radial-gradient(
            circle 50px at var(--mx, -9999px) var(--my, -9999px),
            rgba(255, 255, 255, 1) 0px,
            rgba(255, 255, 255, 1) 25px,
            rgba(255, 255, 255, 0.012) 110px,
            rgba(255, 255, 255, 0.012) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 14vh,
            rgba(255, 255, 255, 1) calc(100% - 22vh),
            rgba(255, 255, 255, 0) 100%
        );
    -webkit-mask-composite: source-in;
}

.about-story-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4em;
    flex-wrap: wrap;
}

.about-story-main {
    max-width: clamp(20em, 45%, 32em);
}

.about-story-side-block {
    max-width: clamp(16em, 32%, 24em);
    margin-top: clamp(14em, 32vh, 24em);
    text-align: right;
}

.about-story-side-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(1.4em, 2.6vw, 2em);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 0.6em;
    display: inline-block;
}

.about-story-side-heading .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

.about-story-side-heading .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.6s ease-out;
    transition-delay: calc(var(--i) * 60ms);
}

.about-story-side-heading.is-in .letter {
    transform: translateY(0);
    opacity: 1;
}

/* Side text fades white to grey on scroll-in, word by word */
.about-story-side-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.6;
    letter-spacing: 0.01em;
    margin: 0;
}

.about-story-side-text .reveal-word {
    display: inline-block;
    color: #ffffff;
    transition: color 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 0.09s);
}

.about-story-side-text.is-in .reveal-word {
    color: rgba(255, 255, 255, 0.6);
}

.about-story-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(2.2em, 4.5vw, 3.4em);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 0.6em;
    display: inline-block;
}

.about-story-heading .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

.about-story-heading .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.6s ease-out;
    transition-delay: calc(var(--i) * 60ms);
}

.about-story-heading.is-in .letter {
    transform: translateY(0);
    opacity: 1;
}

.about-story-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95em, 1.05vw, 1.05em);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
    margin: 0;
}

.about-story-text .reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 0.045s);
}

.about-story-text.is-in .reveal-word {
    opacity: 1;
    transform: translateY(0);
}

.about-things-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(2.4em, 5.5vw, 4em);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: clamp(5em, 11vh, 9em) 0 0;
    color: #ffffff;
    text-align: center;
}

/* Push the heading further down on very large screens.
   The default clamp caps at 14em, which feels tight at 4K. */
@media (min-width: 1800px) {
    .about-things-heading {
        margin-top: clamp(8em, 14vh, 12em);
    }
}
@media (min-width: 2400px) {
    .about-things-heading {
        margin-top: clamp(10em, 17vh, 15em);
    }
}

.about-things-heading .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

.about-things-heading .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.6s ease-out;
    transition-delay: calc(var(--i) * 60ms);
}

.about-things-heading.is-in .letter {
    transform: translateY(0);
    opacity: 1;
}

/* "matter" / "zählt" used to be a lila accent. Heading is all white now. */
.about-things-heading .letter.about-things-accent {
    color: #ffffff;
}

/* Three centered cards */
.about-things-cards {
    list-style: none;
    padding: 0;
    margin: clamp(3em, 6vh, 5em) auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 32em));
    gap: 1.4em;
    justify-content: center;
}

.about-things-card {
    position: relative;
    min-height: 22em;
    padding: 2.6em 2.4em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1em;
    background: rgba(255, 255, 255, 0.015);
    color: #fff;
    overflow: hidden;
    opacity: 0;
    /* --ci is the per-card index; reveal-words inside use --i for their own stagger */
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ci, 0) * 0.12s),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ci, 0) * 0.12s),
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/* Each card enters from a different direction */
.about-things-card:nth-child(1) { transform: translateX(-80px); }
.about-things-card:nth-child(2) { transform: translateY(60px); }
.about-things-card:nth-child(3) { transform: translateX(80px); }

.about-things-card.is-in {
    opacity: 1;
    transform: translate(0, 0);
}

.about-things-card:hover {
    background: rgba(138, 103, 255, 0.07);
    border-color: rgba(138, 103, 255, 0.3);
}

/* Media variant: fullbleed video or image background */
.about-things-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    /* Normalise colour temperature across source clips */
    filter: saturate(0.55) brightness(0.8) contrast(1.05);
    /* JS does a hard cut at end-of-clip, no CSS fade */
    transition: none;
}

/* B copy starts hidden. JS flips opacity at end of A to swap to B. */
.about-things-card-bg--b {
    opacity: 0;
}

/* Dark gradient overlay, same on every media card for consistency */
.about-things-card--media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 15, 0.18) 0%,
            rgba(10, 10, 15, 0.35) 60%,
            rgba(10, 10, 15, 0.7) 100%);
}

.about-things-card--media .about-things-card-blurb,
.about-things-card--media .about-things-card-title {
    position: relative;
    z-index: 1;
}

.about-things-card--media .about-things-card-title {
    position: absolute;
    z-index: 1;
}

/* Blurb at top, lila title anchored at the bottom for alignment across cards */
.about-things-card-blurb {
    margin: 0;
    max-width: 22em;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 0.98em;
    line-height: 1.6;
    color: #ffffff;
}

/* Word-by-word reveal */
.about-things-card-blurb .reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--ci, 0) * 0.12s + var(--i, 0) * 0.04s + 0.55s);
}

.about-things-card.is-in .about-things-card-blurb .reveal-word {
    opacity: 1;
    transform: translateY(0);
}

.about-things-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(1.7em, 2.6vw, 2.2em);
    line-height: 1;
    letter-spacing: 0.02em;
    color: #b89cff;  /* soft brand lila; used to be a faint white watermark */
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    /* Slides up and fades in after the card lands */
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ci, 0) * 0.12s + 0.45s),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ci, 0) * 0.12s + 0.45s);
}

.about-things-card.is-in .about-things-card-title {
    opacity: 1;
    transform: translateY(0);
}

/* Media card: keep blurb hidden on entry, only show on hover */
.about-things-card--media.is-in .about-things-card-blurb .reveal-word {
    opacity: 0;
    transform: translateY(18px);
    transition-delay: calc(var(--i, 0) * 0.03s);
}

.about-things-card--media:hover .about-things-card-blurb .reveal-word,
.about-things-card--media.is-in:hover .about-things-card-blurb .reveal-word {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1100px) {
    .about-things-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .about-things-cards { grid-template-columns: 1fr; }
}

/* "How We Think" section */
.about-think {
    margin-top: clamp(16em, 36vh, 26em);
    position: relative;
    z-index: 3;
}

.about-think-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(1.05em, 1.4vw, 1.4em);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
    margin: 0;
    max-width: 60em;
    text-align: left;
}

.about-think-text .reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 0.035s);
}

.about-think-text.is-in .reveal-word {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll runway for the symbol morph */
.about-story-mark {
    height: clamp(12em, 28vh, 20em);
}

.about-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.about-stage.visible { opacity: 1; }

.about-stage canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* CTA */

.cta-section {
    position: relative;
    z-index: 2;
    margin-top: clamp(6em, 14vh, 12em);
    padding: clamp(0.5em, 2vh, 1.5em) clamp(2em, 5vw, 5em) clamp(10em, 24vh, 18em);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

.cta-section.visible { pointer-events: auto; }

.cta-inner {
    max-width: 50em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.4em;
    text-align: right;
    padding: 2.8em 3em 2.6em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.2em;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 2;
}

.cta-section.visible .cta-inner {
    opacity: 1;
}

.cta-heading {
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4em, 4.4vw, 4em);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    white-space: nowrap;
}

.cta-heading .letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.1;
}

.cta-heading .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 55ms);
}

.cta-section.visible .cta-heading .letter {
    transform: translateY(0);
    opacity: 1;
}

.cta-description {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 1.18em;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 28em;
    visibility: hidden;
}

.cta-description[data-split] {
    visibility: visible;
}

.cta-description .cta-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.045s + 0.35s);
}

.cta-section.visible .cta-description .cta-word {
    opacity: 1;
    transform: translateY(0);
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.9em 1.6em;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #fff;
    background: #8a67ff;
    border: 1px solid #8a67ff;
    border-radius: 999px;
    text-decoration: none;
    opacity: 0;
    transform: translateX(160px) scale(1);
    transform-origin: right center;
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.cta-section.visible .cta-button {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.cta-button:hover {
    transform: translateX(0) scale(1.2);
    background: #0a0a0f;
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.cta-button svg {
    transition: transform 0.25s ease;
}
.cta-button:hover svg {
    transform: translate(2px, -2px);
}

/* Three.js particle stage behind the CTA card */
.cta-stick-stage {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: clamp(24rem, 38vw, 44rem);
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 1;
    pointer-events: none;
}

.cta-stick-stage.visible {
    opacity: 1;
}

.cta-stick-stage canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

#footer {
    margin-top: clamp(8em, 18vh, 16em);
}

/**
 * @INFO
 * Made by Cevio | https://www.cevio.at
 * @INFO
 */