/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */
@layer reset, tokens, base, components, layout, moderncss, util;

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 1.5rem;
    width: auto;
}

.footer-logo-img {
    width: 100%;
    height: auto;
    display: block;
}

.material-symbol {
    width: 1.25em;
    height: 1.25em;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

@layer moderncss {

    @layer misc {

        /* To make the bouncy scroll effect work when the page is shown in an iframe and when the user is already at the edges and nudging the scroller */
        :root {
            overscroll-behavior-y: contain;
            scrollbar-gutter: stable;
        }

        body {
            overflow-x: hidden;
            position: relative;
        }

        /* Cinematic Grain/Noise Texture */
        body::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 9999;
            pointer-events: none;
            opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
    }

    @layer layout {

        /* Draw a particles ring in the background of the welcome screen */
        /* I am using Houdini PaintWorklets for this */
        @layer ring-particles {
            @supports (background: paint(something)) {
                @layer particles {
                    #welcome {
                        --ring-radius: 100;
                        --ring-thickness: 600;
                        --particle-count: 80;
                        --particle-rows: 25;
                        --particle-size: 2;
                        --particle-color: navy;

                        --particle-min-alpha: 0.1;
                        --particle-max-alpha: 1.0;

                        --seed: 200;

                        background-image: paint(ring-particles);
                    }
                }

                @layer animation {
                    @property --animation-tick {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 0;
                    }

                    @property --ring-radius {
                        syntax: '<number> | auto';
                        inherits: false;
                        initial-value: auto;
                    }

                    @keyframes ripple {
                        0% {
                            --animation-tick: 0;
                        }

                        100% {
                            --animation-tick: 1;
                        }
                    }

                    @keyframes ring {
                        0% {
                            --ring-radius: 150;
                        }

                        100% {
                            --ring-radius: 250;
                        }
                    }

                    #welcome {
                        animation: ripple 6s linear infinite, ring 6s ease-in-out infinite alternate;
                    }
                }

                @layer follow-mouse {
                    @property --ring-x {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 50;
                    }

                    @property --ring-y {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 50;
                    }

                    @property --ring-interactive {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 0;
                    }

                    #welcome {
                        /* @NOTE: Requires JS until the CSSWG resolves on https://github.com/w3c/csswg-drafts/issues/6733 */
                        transition: --ring-x 3s ease,
                            --ring-y 3s ease;

                        /* @NOTE: This still feels uncanny, so I’m disabling it for now. It could be solved by having something like an animation-speed available. */
                        /* transition-duration: if(
							style(--ring-interactive: 1): 0.25s;
							else: 3s;
						); */

                    }
                }
            }
        }

        /* Draw some dynamic noise behind some of the screens */
        /* I am using Houdini PaintWorklets for this */
        @layer speckled-backgrounds {
            @supports (background: paint(something)) {

                #beforeyougo .card,
                #who>div {
                    --extra-confettiNumber: 250;
                    --extra-confettiLengthVariance: 1;
                    --extra-confettiWeightVariance: 1;
                    background-image: paint(extra-confetti);
                }
            }
        }

        @layer product {
            /* @TODO: Move `container-type: inline-size` for centered sticky using cqi to here, as that is modern CSS */
        }
    }

    @layer components {
        @layer button {

            /* Buttons in .dark containers have inverted colors */
            @scope (.dark) {
                button {
                    color: var(--theme-surface-on-surface);
                    background: var(--theme-primary-on-primary);
                    border: 1px solid var(--theme-outline-variant);

                    &:hover,
                    &:focus-visible {
                        background: var(--theme-button-secondary-hover);
                    }

                    &.secondary {
                        color: var(--theme-surface-surface);
                        background: var(--theme-nav-button-hover);

                        &:hover,
                        &:focus-visible {
                            background: var(--theme-button-secondary-inverse-hover);
                        }
                    }
                }
            }
        }

        @layer navbar {

            /* Anchor the mobile nav underneath the header */
            @layer mobile {
                @media (width < 930px) {
                    header {
                        anchor-name: --header;
                    }

                    header nav {
                        position: fixed;
                        inset: auto;
                        top: 0;
                        /* Undo non-modern-CSS styling */
                        position-anchor: --header;
                        position-area: bottom;
                        justify-self: stretch;
                        align-self: stretch;
                    }
                }
            }

            /* Animate-in the nav on mobile when showing */
            @layer mobile {
                @media (width < 930px) {
                    header nav {
                        transition: opacity .15s ease-in;

                        @starting-style {
                            opacity: 0;
                        }
                    }
                }
            }

            /* Don’t scroll page when menu is open */
            @media (width < 930px) {
                header:has(.menu-checkbox:checked) {

                    &,
                    & nav {
                        overflow: auto;
                        overscroll-behavior: contain;
                    }
                }
            }

            /* Hidey bar – http://brm.us/hidey-bar-2 */
            @layer hidey-bar {
                html {
                    container-type: scroll-state;
                }

                .header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)) {
                    transition: translate 0.25s;
                    translate: 0 0;

                    @container scroll-state(scrolled: bottom) {
                        translate: 0 -100%;
                    }
                }
            }
        }

        @layer carousel {
            @layer scroll-snapping {
                @layer base-setup {
                    @supports (scroll-padding-inline: 3rem) {
                        .carousel {
                            scroll-padding-inline: 3rem;
                            scroll-snap-type: x mandatory;

                            >* {
                                scroll-snap-align: start;
                            }

                            /* @NOTE: On the orignal page the last item also snaps to the left */
                            /* To get this working, I’d manually add some padding to the right */
                            /* Defining that “some” is tricky and requires manual calculation */
                            /* Here I am calculating 40vi (because the entries are 60vi) minus gap */
                            /* So maybe we should have `auto` on scroll-padding do something? */
                            @media (width >=930px) {
                                padding-inline: 3rem calc(40vi - 3rem);
                            }
                        }
                    }
                }

                @layer snapped-effects {
                    /* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */

                    .carousel>* {
                        container-type: scroll-state;

                        @supports (container-type: scroll-state) {

                            /* The images */
                            >figure {
                                opacity: .25;
                                transition: opacity .5s ease;

                                @container scroll-state(snapped: x) {
                                    opacity: 1;
                                }
                            }

                            /* The bylines */
                            >*:not(figure) {
                                transition: opacity .5s ease, translate .5s ease;
                                transition-delay: 0s;
                                opacity: 0;
                                translate: 0 calc(0.5rem * (sibling-index() - 1)) 0;

                                @container scroll-state(snapped: x) {
                                    transition-delay: 0.2s;
                                    /* NOTE: It feels like CSS snapped is triggering while it’s still scrolling, so we delay it a bit */
                                    opacity: 1;
                                    translate: 0 0 0;
                                }
                            }
                        }
                    }
                }
            }

            @layer niceties {
                .carousel {
                    scrollbar-width: none;
                    overscroll-behavior-x: contain;
                }
            }

            @layer scroll-buttons {

                /* @note: https://chrome.dev/carousel-configurator/ really helps here */
                .carousel {
                    position: relative;
                    scroll-behavior: smooth;
                    anchor-name: --carousel;

                    &::scroll-button(*) {
                        position: fixed;
                        position-anchor: --carousel;
                        position-visibility: always;
                        font-family: "Material Symbols Outlined";

                        color: var(--theme-surface-on-surface);
                        background: var(--theme-tonal-tonal);
                        border: none;
                        block-size: 2em;
                        font-size: 1.3em;
                        inline-size: 2.5em;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        border-radius: 999px;

                        transition: opacity 0.25s ease;
                    }

                    /* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */
                    &::scroll-button(*):hover {
                        background: #eff0f3;
                    }

                    &::scroll-button(*):disabled {
                        cursor: not-allowed;
                        opacity: 0.25;
                    }

                    /* @note: We deviate from the antigravity site here, because CSS carousel does not offer a wrapper around both scroll buttons … */
                    &::scroll-button(left) {
                        translate: -50% 0;
                        content: 'arrow_back' / 'Previous';
                    }

                    &::scroll-button(right) {
                        translate: 50% 0;
                        content: 'arrow_forward' / 'Next';
                    }

                    @media (width < 930px) {

                        &::scroll-button(left),
                        &::scroll-button(right) {
                            position-area: center center;
                            align-self: end;
                        }
                    }

                    @media (width >=930px) {

                        &::scroll-button(left),
                        &::scroll-button(right) {
                            position-area: center center;
                            align-self: start;
                            justify-self: start;
                            /* Magic numbers … these rely on the flex-basis of the slides + the aspect-ratio of the photos. Nasty, but it works. */
                            left: calc(60vi - 1em);
                            top: calc((60vi + 1em) * 9 / 16);
                        }
                    }
                }
            }
        }
    }

    @layer animations {
        @layer revealing-welcome-items {
            #welcome {

                svg,
                .cta {
                    transition: translate 0.5s ease, opacity 0.5s ease;

                    @starting-style {
                        translate: 0 50% 0;
                        opacity: 0;
                    }
                }
            }
        }

        @layer scroll-triggered-typewriter-effect {
            @supports (timeline-trigger-name: --t) {

                /* @ref https://codepen.io/bramus/pen/JjwxLNM */
                @keyframes blink {
                    from {
                        opacity: 0;
                    }
                }

                @keyframes text {
                    from {
                        background-size: 0
                    }
                }

                /* Typewriter effect */
                .typewriter {
                    background:
                        /* highlight text */
                        linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0 / calc(var(--n, 100) * 1ch) no-repeat
                        /* faded text */
                        transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                    animation: text 2s ease-in both;

                    &::after {
                        content: "|";
                        --hdr-gradient: linear-gradient(in oklch,
                                oklch(80% .3 34),
                                oklch(90% .3 200));
                        --sdr-gradient: linear-gradient(#ff4700, #0ff);

                        background: var(--hdr-gradient);
                        background-clip: text;
                        color: transparent;

                        /* The delay is manually calculated to make the animation only start after the typewriter itself has finished */
                        animation: blink 0.2s 1.4s ease infinite alternate both;
                    }
                }

                /* Typewriter Trigger in product section */
                #product *:has(> .typewriter) {
                    timeline-trigger: --t view() cover 30% cover 1000%;
                    trigger-scope: --t;

                    .typewriter {
                        animation-trigger: --t play-once;

                        &::after {
                            animation-trigger: --t play-once;
                            animation-delay: 1.6s;
                        }
                    }
                }

                /* Typewriter Trigger in Carousel */
                .carousel>* {
                    timeline-trigger: --t view(inline) entry 90% exit 50%;
                    trigger-scope: --t;

                    .typewriter {
                        --typewriter-text-color: white;
                        animation-trigger: --t play-forwards reset;
                        animation-duration: 1.5s;

                        &::after {
                            animation-trigger: --t play-forwards reset;
                            animation-delay: 0.9s;
                        }
                    }
                }

                /* Typewriter Trigger in Before You Go */
                #beforeyougo>.card {
                    timeline-trigger: --t view() cover 30% cover 1000%;
                    trigger-scope: --t;

                    .typewriter {
                        --typewriter-text-color: white;
                        animation-trigger: --t play-once;
                        animation-duration: 2s;

                        &::after {
                            animation-trigger: --t play-once;
                            animation-delay: 1s;
                        }
                    }
                }
            }
        }

        @layer moving-icons {
            @layer slide-in {
                @keyframes slide-in {
                    from {
                        translate: 100% 0 0;
                    }
                }

                #product .icons {
                    timeline-trigger: --t view() cover 30% cover 1000%;
                    trigger-scope: --t;
                    animation: slide-in 1s ease both;
                    animation-trigger: --t play-once;
                }
            }

            @layer wobble {
                @keyframes wobble {
                    from {
                        translate: 0 75%;
                    }

                    to {
                        translate: 0 -75%;
                    }
                }

                #product .icon {
                    /* @NOTE: If we had support for random(), we could even randomize the animation distance per element */
                    animation: wobble 4s ease infinite alternate;
                    animation-delay: calc(mod(sibling-index(), 5) * -1s);
                }
            }
        }


        /* @TODO: Scroll-Driven unclipping of the image-wrapper (on the first image) */
    }

    @layer scroll-driven-animations {

        /* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */
        @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
            @keyframes scale-up {
                from {
                    scale: 0.85;
                }
            }

            #beforeyougo .card {
                animation: scale-up linear both;
                animation-timeline: view();
                animation-range: entry 50% entry 100%;
            }
        }
    }
}

@layer components {
    @layer button {
        button {
            background: var(--theme-primary-primary);
            color: var(--theme-primary-on-primary);
            border: 0px;
            border-radius: 999px;
            padding: 0.6em 1.5em;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 0.4rem;

            font-size: 0.9em;
            font-weight: 600;
            letter-spacing: 0.01em;

            cursor: pointer;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease-out, box-shadow 0.3s ease, color 0.2s ease;

            &:hover,
            &:focus-visible {
                background: var(--theme-button-states-primary-hovered);
                transform: scale(1.07) translateY(-3px);
                box-shadow: 0 12px 28px rgba(205, 255, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.1);
            }

            &:active {
                transform: scale(0.97) translateY(0);
                box-shadow: 0 4px 10px rgba(205, 255, 0, 0.2);
            }

            &:has(span + .material-symbols-outlined) {
                padding-inline-end: 1.25em;
            }

            &:has(.material-symbols-outlined + span) {
                padding-inline-start: 1.25em;
            }

            &.secondary {
                color: var(--theme-surface-on-surface);
                background: var(--theme-secondary-button);
                border: 1.5px solid var(--theme-outline);
                font-weight: 500;

                &:hover,
                &:focus-visible {
                    background: var(--theme-surface-on-surface);
                    color: var(--theme-surface-surface);
                    border-color: var(--theme-surface-on-surface);
                    transform: scale(1.07) translateY(-3px);
                    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
                }
            }
        }
    }

    @layer navbar {
        @layer shared {
            nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .menu-checkbox {
                display: none;
            }

            nav a {
                color: var(--theme-surface-on-surface);
                transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
                text-decoration: none;
                position: relative;

                /* Animated underline on hover */
                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0.3em;
                    left: 1.2em;
                    right: 1.2em;
                    height: 2px;
                    background: var(--theme-primary-primary);
                    border-radius: 2px;
                    transform: scaleX(0);
                    transform-origin: left;
                    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
                }

                &:hover,
                &:focus-visible {
                    color: var(--theme-surface-on-surface);
                    background: var(--theme-button-states-hovered);

                    &::after {
                        transform: scaleX(1);
                    }
                }
            }
        }

        @layer mobile {
            @media (width < 930px) {
                .menu-button {
                    cursor: pointer;
                    width: 3.5em;
                    border-radius: 999px;
                    text-align: center;
                    place-content: center;

                    transition: .15s background ease-out;

                    &:hover,
                    &:focus-visible {
                        background: var(--theme-button-states-hovered);
                    }
                }

                nav {
                    display: none;
                }

                nav li {
                    font-size: 1.85em;
                    font-weight: 350;
                    border-bottom: 1px solid var(--theme-surface-surface-container-higher);

                    &:first-child {
                        border-top: 1px solid var(--theme-surface-surface-container-higher);
                    }
                }

                nav a {
                    display: block;

                    padding-inline: 3rem;
                    padding-block: 1.5rem;
                }

                /* When the menu toggle is checked */
                .menu-checkbox:checked {

                    /* Show the nav */
                    &~nav {
                        position: absolute !important;
                        top: 100% !important;
                        left: 0;
                        right: 0;
                        height: 100vh;
                        display: block;
                        background: var(--theme-surface-surface);
                        z-index: 10000;
                    }

                    /* Show the proper icon in the button */
                    &~.menu-button {
                        [data-show-when="closed"] {
                            display: none !important;
                        }
                    }

                    /* Colorize the button differently */
                    &~.menu-button {
                        background: var(--theme-primary-primary);
                        color: var(--theme-primary-on-primary);

                        &:hover,
                        &:focus-visible {
                            background: var(--theme-button-states-primary-hovered);
                        }
                    }
                }

                /* When the menu toggle is not checked */
                .menu-checkbox:not(:checked) {

                    /* Show the proper icon in the button */
                    &~.menu-button {
                        [data-show-when="open"] {
                            display: none !important;
                        }
                    }
                }

                /* Hide the download button */
                header button {
                    display: none;
                }
            }
        }

        /* Large Menu */
        @layer large {
            @media (width >=930px) {
                nav ul {
                    display: flex;
                    flex-direction: row;
                    gap: 0.2rem;
                    align-self: flex-start;
                }

                nav a {
                    padding: 0.6em 1.2em;
                    border-radius: 999px;
                    color: var(--theme-surface-on-surface-variant);
                    white-space: nowrap;

                    &:hover,
                    &:focus-visible {
                        color: var(--theme-primary-primary);
                        background: var(--theme-nav-button-hover);
                    }
                }

                .menu-button {
                    display: none;
                }
            }
        }
    }

    @layer card {
        .card {
            border-radius: 2em;

            &.dark {
                background: var(--palette-grey-900);
                color: var(--theme-surface-on-surface);
                border: 1px solid var(--theme-outline-variant);
            }
        }
    }
}

@layer layout {
    @layer grid {
        body {
            margin: 0;
            display: grid;
            grid-template-columns:
                [fullbleed-start] 3rem [main-start] 1fr [main-end] 3rem [fullbleed-end];
            grid-auto-rows: min-content;
        }

        body>* {
            grid-column: fullbleed;
        }
    }

    @layer navigation {
        .header-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;

            background: var(--theme-surface-surface);
            z-index: 1;
        }

        header {
            position: relative;
            display: flex;
            flex-direction: row;
            gap: 2rem;
            align-items: center;

            padding-inline: 3rem;
            padding-block: 0.5rem;

            /* Push header-actions to the far right */
            .header-actions {
                margin-left: auto;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }

            /* Legacy: keep menu-button auto-marginned for mobile */
            .menu-button {
                margin-left: auto;
            }
        }
    }

    @layer welcome {
        #welcome {
            font-family: "Satoshi", "Inter", sans-serif;
            --ring-color: rgba(255, 255, 255, 0.5);
            --particle-color: rgba(255, 255, 255, 0.5);

            h1 svg {
                height: 1.5em;
                width: auto;
                display: block;
                margin: 0 auto;
            }

            p {
                font-size: 4.5em;
                text-align: center;
                font-weight: 500;

                color: var(--theme-surface-on-surface);

                span {
                    display: block;
                    font-size: 0.7em;
                    color: var(--theme-surface-on-surface-variant);
                }
            }

            .cta {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.3em;
                justify-content: center;

                width: 90%;
                margin: 0 auto;

                button {
                    font-size: 1.15em;
                }
            }
        }
    }

    @layer video {
        #video {
            padding: 0 1em;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: clip;

            iframe {
                width: 100%;
                height: auto;
                aspect-ratio: 16/9;
                max-height: 75vh;

                border-radius: 2em;
                overflow: clip;

                /* Cinematic Scale Animation on Scroll */
                @supports (animation-timeline: view()) {
                    animation: cinematic-zoom linear both;
                    animation-timeline: view();
                    animation-range: entry 10% exit 90%;
                }
            }
        }

        @keyframes cinematic-zoom {
            0% {
                transform: scale(0.8) translateY(50px);
                opacity: 0;
            }

            30% {
                opacity: 1;
            }

            50% {
                transform: scale(1) translateY(0);
            }

            70% {
                opacity: 1;
            }

            100% {
                transform: scale(1.1) translateY(-30px);
                opacity: 0;
            }
        }
    }

    @layer product {
        #product {
            padding-top: 8rem;

            display: grid;
            grid-template-columns: subgrid;

            >*:not(.icons) {
                grid-column: main;
            }

            .product-grid {
                margin-top: 6rem;
                display: grid;
                gap: 3rem;
                grid-template-columns: 1fr;

                @media (width >=930px) {
                    grid-template-columns: 1.1fr 1fr;
                    gap: 6rem;
                }

                .product-intro {
                    display: flex;
                    flex-direction: column;
                    gap: 2.5rem;

                    .lead-heading {
                        font-size: clamp(2rem, 3.5vw, 2.8rem);
                        color: var(--theme-surface-on-surface);
                        margin: 0;
                        font-family: "Satoshi", "Inter", sans-serif;
                        font-weight: 500;
                        letter-spacing: -0.02em;
                        line-height: 1.25;
                    }

                    .intro-description {
                        font-size: 1.35rem;
                        line-height: 1.6;
                        color: var(--theme-surface-on-surface-variant);
                        font-weight: 400;
                        border-left: 4px solid var(--theme-outline-variant);
                        padding-left: 1.5rem;

                        p {
                            margin: 0 0 0.5rem 0;
                        }

                        p:last-child {
                            margin-bottom: 0;
                        }
                    }
                }

                .product-features {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1.5rem;

                    @media (width < 600px) {
                        grid-template-columns: 1fr;
                    }

                    .feature-card {
                        background: var(--theme-surface-surface-container);
                        border: 1px solid var(--theme-outline-variant);
                        padding: 2.5rem;
                        border-radius: 2rem;
                        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.4s ease, box-shadow 0.4s ease;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        gap: 3rem;

                        &:nth-child(1) {
                            grid-column: 1 / -1;
                            background: var(--theme-surface-surface-container-high);
                        }

                        &:nth-child(2) {
                            border-radius: 2rem 0.5rem 0.5rem 2rem;
                        }

                        &:nth-child(3) {
                            border-radius: 0.5rem 2rem 2rem 0.5rem;
                        }

                        &:nth-child(4) {
                            grid-column: 1 / -1;
                        }

                        &:hover {
                            transform: translateY(-8px) scale(1.02);
                            background: var(--theme-surface-surface-container-highest);
                            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.06);
                        }

                        span.material-symbols-outlined,
                        svg.material-symbol {
                            font-size: 3rem;
                            color: var(--theme-surface-on-surface);
                            background: linear-gradient(135deg, var(--theme-surface-on-surface), var(--theme-surface-on-surface-variant));
                            -webkit-background-clip: text;
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                            display: inline-block;
                            /* For SVG specifically if font-clip doesnt work */
                            fill: url(#icon-gradient);
                        }

                        h4 {
                            font-size: 1.15rem;
                            font-family: "Satoshi", "Inter", sans-serif;
                            font-weight: 700;
                            margin: 0 0 0.75rem 0;
                            color: var(--theme-surface-on-surface);
                        }

                        p {
                            margin: 0;
                            font-size: 1rem;
                            line-height: 1.5;
                        }
                    }
                }

                .product-outcome {
                    grid-column: 1 / -1;
                    margin-top: 5rem;
                    padding: 6rem 4rem;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    background: var(--palette-grey-900);
                    color: var(--theme-surface-on-surface);
                    border: 1px solid var(--theme-primary-primary);
                    border-radius: 3.5rem;
                    position: relative;
                    overflow: hidden;
                    z-index: 1;

                    &::before {
                        content: '';
                        position: absolute;
                        top: -50%;
                        left: -50%;
                        width: 200%;
                        height: 200%;
                        background: conic-gradient(from 0deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
                        animation: rotate-conic 25s linear infinite;
                        z-index: -1;
                        pointer-events: none;
                    }

                    h3 {
                        font-size: clamp(1.6rem, 4vw, 2.8rem);
                        font-weight: 400;
                        max-width: 30ch;
                        margin: 0 0 3.5rem 0;
                        line-height: 1.25;
                        letter-spacing: -0.02em;
                        font-family: "Satoshi", "Inter", sans-serif;
                        color: var(--theme-primary-primary);
                    }

                    .cta-buttons {
                        display: flex;
                        gap: 1rem;
                        flex-wrap: wrap;
                        justify-content: center;

                        button.secondary {
                            background: rgba(255, 255, 255, 0.08);
                            border-color: rgba(255, 255, 255, 0.15);
                            color: #fff;
                            backdrop-filter: blur(12px);

                            &:hover {
                                background: rgba(255, 255, 255, 0.15);
                            }
                        }
                    }
                }
            }

            @keyframes rotate-conic {
                100% {
                    transform: rotate(360deg);
                }
            }

            .icons {
                grid-column: fullbleed;
            }

            .icons {
                height: max(24em, 40vb);

                display: flex;
                flex-direction: row;
                gap: 0.5rem;
                align-items: center;

                overflow-x: clip;

                .icon {
                    flex: 0 0 clamp(4rem, 10vw, 6rem);
                    aspect-ratio: 1;
                    border-radius: 50%;

                    background: #b7bfd917;
                    border: 1px solid var(--theme-outline-variant);
                    backdrop-filter: blur(5px);

                    display: grid;
                    place-content: center;

                    span {
                        font-size: 2em !important;
                    }
                }
            }
        }

        #features {
            grid-column: fullbleed;
            padding-inline: 3rem;

            display: flex;
            flex-direction: column;
            gap: 6rem;

            /* Section Header styling */
            .section-header {
                text-align: left;
                max-width: 100%;
                margin-inline: 0;
                margin-bottom: 1.5rem;
                padding-top: 4rem;

                h2 {
                    font-size: 3.5rem;
                    font-weight: 450;
                    letter-spacing: -0.03em;
                    margin-bottom: 1rem;
                    color: var(--theme-surface-on-surface);
                    line-height: 1.1;
                    max-width: 20ch;
                }

                p {
                    font-size: 1.25rem;
                    color: var(--theme-surface-on-surface-variant);
                    line-height: 1.4;
                    max-width: 650px;
                    margin-inline: 0;
                }
            }

            .feature {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8rem;
                align-items: center;
                /* Vertically center children */
                padding-block: 2rem;

                .content {
                    grid-column: 1;

                    h3 {
                        font-size: 3rem;
                        font-weight: 500;
                        margin-bottom: 2rem;
                        letter-spacing: -0.025em;
                        color: var(--theme-surface-on-surface);
                    }

                    p {
                        font-size: 1.35rem;
                        line-height: 1.5;
                        max-width: 45ch;
                        color: var(--theme-surface-on-surface-variant);
                    }

                    .outcome-highlight {
                        margin-top: 2rem;
                        padding: 0.75rem 1.25rem;
                        background: var(--tag-bg, rgba(205, 255, 0, 0.1));
                        border-radius: 99px;
                        border: 1px solid rgba(205, 255, 0, 0.3);
                        font-weight: 600;
                        color: var(--tag-color, #CDFF00);
                        display: inline-flex;
                        align-items: center;
                        gap: 0.5rem;
                        font-size: 0.9rem;
                        backdrop-filter: blur(10px);
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                    }
                }

                .img-wrapper {
                    grid-column: 2;
                    position: relative;
                    width: 100%;
                    background: var(--feature-img-bg, var(--palette-grey-900));
                    border-radius: 4rem;
                    padding: 9rem 5rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;

                    img {
                        border-radius: 1.5rem;
                        box-shadow: 0 30px 100px rgba(0, 0, 0, 0.06);
                        width: 100%;
                        max-width: 95%;
                        height: auto;
                        display: block;
                    }
                }
            }

            @media (width >=930px) {
                .img-wrapper {
                    container-type: inline-size;
                }
            }

            @media (max-width: 930px) {
                .feature {
                    grid-template-columns: 1fr;
                    gap: 3rem;
                    min-height: auto;
                    text-align: left;

                    .content {
                        h3 {
                            font-size: 2.25rem;
                        }
                    }

                    .img-wrapper {
                        grid-column: 1;
                        padding: 4rem 2rem;
                        border-radius: 2.5rem;
                    }
                }
            }
        }

        @layer developers {
            #developers {
                width: 100%;
                border-top: 1px solid var(--theme-outline-variant);
                margin-top: 2em;
                padding-top: 2em;

                display: grid;
                grid-template-columns: subgrid;

                >*:not(.carousel) {
                    grid-column: main;
                }

                .intro {
                    color: var(--theme-surface-on-surface-variant);
                    font-size: 1.1em;
                    line-height: 1.2;
                    font-weight: 320;
                    padding: 0.5rem 0;

                    @media (width >=930px) {
                        width: max(400px, calc(30vw - 1.5rem));
                        margin-left: auto;
                    }
                }

                .carousel {
                    grid-column: fullbleed;
                    padding-inline: 3rem;
                    width: 100%;

                    overflow-x: scroll;

                    display: flex;
                    gap: 2rem;

                    .developer {
                        flex: 0 0 100%;
                        overflow: clip;

                        @media (width >=930px) {
                            flex-basis: 60vi;
                        }

                        figure {
                            display: grid;
                            place-items: center;

                            >* {
                                grid-area: 1 / 1;
                            }

                            figcaption {
                                color: white;
                                font-size: 2em;
                            }
                        }

                        img {
                            border-radius: 2em;
                        }

                        h3 {
                            font-weight: 350;
                            font-size: 1.25em;
                            line-height: 1.1;
                            margin-block-end: 0.5rem;
                        }

                        p {
                            width: 40%;
                            text-wrap: pretty;
                            color: var(--theme-surface-on-surface-variant);
                            letter-spacing: 0.05rem;
                            font-weight: 300;
                        }

                        a {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            gap: 0.25em;

                            color: var(--theme-surface-on-surface-variant);
                            text-decoration: none;
                            font-weight: 300;

                            transition: gap 0.15s ease-in;

                            &:hover,
                            &:focus-visible {
                                gap: 0.5em;
                            }

                            &::after {
                                font-family: 'Material Symbols Outlined';
                                font-weight: normal;
                                font-style: normal;
                                font-size: 24px;
                                line-height: 1;
                                letter-spacing: normal;
                                text-transform: none;
                                display: inline-block;
                                white-space: nowrap;
                                word-wrap: normal;
                                direction: ltr;
                                -webkit-font-feature-settings: 'liga';
                                -webkit-font-smoothing: antialiased;

                                content: "\f46a";
                            }
                        }
                    }
                }
            }
        }

        @layer who {
            #who {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;

                @media (width >=930px) {
                    flex-direction: row;
                    justify-content: space-around;
                }

                >div {
                    height: 40vh;

                    display: grid;
                    place-content: center;
                    gap: 1em;

                    @media (width >=930px) {
                        height: 80vh;
                    }
                }

                h3 {
                    font-weight: 400;
                    font-size: 1.75em;
                    line-height: 1.1;

                    @media (width >=930px) {
                        font-size: 2.5em;
                    }

                    span {
                        color: var(--theme-surface-on-surface-variant);
                    }
                }

                button {
                    font-size: 1.15em;
                    justify-self: center;
                }
            }
        }

        @layer usecase {
            #use-cases {
                grid-column: fullbleed;
                padding: 12rem 3rem;
                display: flex;
                flex-direction: column;
                gap: 6rem;
                background: radial-gradient(circle at 70% 30%, rgba(205, 255, 0, 0.02) 0%, transparent 60%),
                    radial-gradient(circle at 20% 80%, rgba(205, 255, 0, 0.01) 0%, transparent 50%);
                position: relative;
                overflow: hidden;

                .background-decoration {
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                    z-index: 0;
                    opacity: 0.4;
                    background-image:
                        radial-gradient(circle at 10% 20%, rgba(205, 255, 0, 0.02) 0%, transparent 40%),
                        radial-gradient(circle at 90% 80%, rgba(205, 255, 0, 0.02) 0%, transparent 40%);

                    &::before {
                        content: '';
                        position: absolute;
                        top: 10%;
                        left: -5%;
                        width: 40%;
                        height: 60%;
                        background: radial-gradient(ellipse at center, rgba(205, 255, 0, 0.03) 0%, transparent 70%);
                        filter: blur(80px);
                        animation: float-slow 20s ease-in-out infinite alternate;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 10%;
                        right: -5%;
                        width: 40%;
                        height: 60%;
                        background: radial-gradient(ellipse at center, rgba(205, 255, 0, 0.03) 0%, transparent 70%);
                        filter: blur(80px);
                        animation: float-slow 25s ease-in-out infinite alternate-reverse;
                    }
                }

                @keyframes float-slow {
                    0% {
                        transform: translate(0, 0) rotate(0deg);
                    }

                    100% {
                        transform: translate(5%, 10%) rotate(5deg);
                    }
                }

                .section-header {
                    position: relative;
                    z-index: 1;

                    h2 {
                        max-width: 15ch;
                    }

                    p {
                        max-width: 500px;
                    }
                }

                .use-case-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
                    gap: 3rem;
                    position: relative;
                    z-index: 1;

                    @media (width >=1100px) {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }

                .use-case-card {
                    background: rgba(255, 255, 255, 0.02);
                    backdrop-filter: blur(20px);
                    -webkit-backdrop-filter: blur(20px);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 3rem;
                    padding: 4.5rem;
                    display: flex;
                    flex-direction: column;
                    gap: 3.5rem;
                    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
                    position: relative;
                    overflow: hidden;

                    &::after {
                        content: '';
                        position: absolute;
                        inset: 0;
                        background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(205, 255, 0, 0.05) 0%, transparent 80%);
                        opacity: 0;
                        transition: opacity 0.6s ease;
                        pointer-events: none;
                    }

                    &:hover {
                        transform: translateY(-20px) scale(1.01);
                        background: rgba(255, 255, 255, 0.05);
                        border-color: rgba(205, 255, 0, 0.2);
                        box-shadow: 0 60px 120px rgba(0, 0, 0, 0.2),
                            0 0 40px rgba(205, 255, 0, 0.05);

                        &::after {
                            opacity: 1;
                        }

                        .card-icon {
                            transform: scale(1.15) rotate(12deg);
                            background: rgba(205, 255, 0, 0.1);
                            color: var(--theme-primary-primary);
                            border-color: rgba(205, 255, 0, 0.2);
                        }

                        h3 {
                            color: var(--theme-primary-primary);
                            letter-spacing: 0.3em;
                        }

                        .card-number {
                            opacity: 0.15;
                            transform: scale(1.2) translate(-5%, -5%);
                            color: var(--theme-primary-primary);
                        }
                    }

                    .card-number {
                        position: absolute;
                        top: 2rem;
                        right: 2rem;
                        font-size: 8rem;
                        font-weight: 800;
                        color: var(--theme-surface-on-surface);
                        opacity: 0.05;
                        line-height: 1;
                        font-family: "Satoshi", "Inter", sans-serif;
                        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
                        pointer-events: none;
                        z-index: 0;
                    }

                    .card-icon {
                        width: 5rem;
                        height: 5rem;
                        background: rgba(255, 255, 255, 0.04);
                        border-radius: 1.75rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: var(--theme-surface-on-surface-variant);
                        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
                        border: 1px solid rgba(255, 255, 255, 0.1);
                        position: relative;
                        z-index: 1;

                        svg {
                            width: 2.25rem;
                            height: 2.25rem;
                        }
                    }

                    h3 {
                        font-size: 0.85rem;
                        text-transform: uppercase;
                        letter-spacing: 0.25em;
                        color: var(--theme-surface-on-surface-variant);
                        font-weight: 700;
                        margin: 0;
                        transition: all 0.5s ease;
                        position: relative;
                        z-index: 1;
                    }

                    .card-content {
                        display: flex;
                        flex-direction: column;
                        gap: 1.5rem;
                        position: relative;
                        z-index: 1;

                        h4 {
                            font-size: 2.5rem;
                            font-weight: 500;
                            line-height: 1.1;
                            color: var(--theme-surface-on-surface);
                            margin: 0;
                            letter-spacing: -0.02em;
                            font-family: "Google Sans Flex", sans-serif;
                        }

                        p {
                            font-size: 1.35rem;
                            line-height: 1.6;
                            color: var(--theme-surface-on-surface-variant);
                            margin: 0;
                            font-weight: 350;
                            max-width: 38ch;
                        }
                    }
                }
            }
        }

        @layer beforeyougo {
            #beforeyougo {
                display: grid;
                grid-template-columns: subgrid;

                height: min-content;

                >* {
                    grid-column: main;
                }

                .card {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 4/3;
                    max-height: 80vh;

                    display: grid;
                    padding: 4em;
                    gap: 1rem;

                    align-content: center;
                }

                h2 {
                    font-size: 2em;
                    font-weight: 700;
                    line-height: 1.1;
                    margin: 0;
                    letter-spacing: -0.02em;
                    max-width: 20ch;
                    color: white;

                    @media (width > 930px) {
                        font-size: 3.25em;
                    }
                }

                p {
                    font-size: 0.95em;
                    line-height: 1.6;
                    text-wrap: pretty;
                    margin: 0.75rem 0 1.5rem;
                    max-width: 60ch;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 0.95) !important;

                    @media (width > 930px) {
                        font-size: 1.125em;
                    }
                }

                .cta-buttons {
                    display: flex;
                    flex-direction: row !important;
                    justify-content: flex-start !important;
                    gap: 1rem;
                    width: 100%;
                    
                    button {
                        background: var(--theme-primary-primary) !important;
                        color: #0A0A0A !important;
                        font-weight: 600;
                        
                        &:hover {
                            background: var(--theme-button-states-primary-hovered) !important;
                        }
                    }

                    button.secondary {
                        background: rgba(255, 255, 255, 0.08) !important;
                        color: white !important;
                        border: 1px solid rgba(255, 255, 255, 0.15) !important;
                        
                        &:hover {
                            background: rgba(255, 255, 255, 0.15) !important;
                            color: var(--theme-primary-primary) !important;
                            border-color: var(--theme-primary-primary) !important;
                        }
                    }
                }
            }

            @layer footer {
                #main-footer {
                    padding: 8rem 3rem 4rem;
                    background: var(--theme-surface-surface);
                    color: var(--theme-surface-on-surface);
                    display: flex;
                    flex-direction: column;
                    gap: 8rem;

                    .footer-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: start;
                        gap: 4rem;

                        .footer-cta h3 {
                            font-family: 'Google Sans Flex', sans-serif;
                            font-size: 2.5rem;
                            font-weight: 500;
                            margin: 0;
                            letter-spacing: -0.03em;
                            line-height: 1.1;
                            color: var(--theme-surface-on-surface);
                        }

                        .footer-nav {
                            display: flex;
                            gap: 12rem;

                            .footer-links {
                                display: flex;
                                flex-direction: column;
                                gap: 1.25rem;

                                li a {
                                    color: var(--theme-surface-on-surface-variant);
                                    text-decoration: none;
                                    font-size: 1.15rem;
                                    font-weight: 500;
                                    transition: color 0.15s ease-out;

                                    &:hover {
                                        color: var(--theme-surface-on-surface);
                                    }
                                }
                            }
                        }
                    }

                    .footer-display {
                        padding-block: 2rem;
                        margin-inline: -3rem;
                        overflow: hidden;
                        width: calc(100% + 6rem);

                        h2 {
                            font-family: 'Google Sans Flex', sans-serif;
                            font-size: 20vw !important;
                            font-weight: 700;
                            margin: 0;
                            line-height: 0.8;
                            letter-spacing: -0.05em;
                            text-align: center;
                            width: 100%;
                            color: var(--theme-surface-on-surface);
                            white-space: nowrap;
                            user-select: none;
                            pointer-events: none;
                            -webkit-user-drag: none;
                            text-transform: uppercase;
                        }
                    }

                    .footer-bottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding-top: 3rem;
                        border-top: 1px solid var(--theme-outline-variant);

                        .footer-logo {
                            color: var(--theme-surface-on-surface-variant);
                            display: flex;
                            align-items: center;
                            height: 24px;

                            svg {
                                height: 24px;
                                width: auto;
                                opacity: 0.8;
                            }
                        }

                        .footer-legal {
                            display: flex;
                            gap: 2.5rem;

                            a {
                                font-size: 0.95rem;
                                color: var(--theme-surface-on-surface-variant);
                                text-decoration: none;
                                font-weight: 500;
                                transition: color 0.15s ease-out;

                                &:hover {
                                    color: var(--theme-surface-on-surface);
                                }
                            }
                        }
                    }

                    @media (max-width: 930px) {
                        padding: 4rem 1.5rem 2.5rem;
                        gap: 5rem;

                        .footer-top {
                            flex-direction: column;
                            gap: 4rem;
                        }

                        .footer-nav {
                            gap: 3rem;
                            width: 100%;
                            justify-content: space-between;
                        }

                        .footer-display {
                            margin-inline: -1.5rem;
                            width: calc(100% + 3rem);

                            h2 {
                                font-size: 25vw;
                            }
                        }

                        .footer-bottom {
                            flex-direction: column;
                            gap: 2.5rem;
                            align-items: flex-start;

                            .footer-legal {
                                flex-wrap: wrap;
                                gap: 1.5rem 2rem;
                            }
                        }
                    }
                }
            }
        }

        @layer base {
            html {
                background: var(--theme-surface-surface);
                font-family: "Satoshi", "Inter", sans-serif;
                font-weight: 400;

                font-size: 16px;

                color: var(--theme-surface-on-surface);
            }

            section {
                /* Make sections fullheight */
                min-height: 100dvh;

                &.center {
                    /* Center their contents */
                    place-content: safe center;
                    justify-items: center;
                }
            }

            h2 {
                font-size: 2.5em;
                font-weight: 350;
                margin: 0.5rem 0;
                line-height: 1;

                @media (width >=930px) {
                    width: 50%;
                    max-width: 25ch;
                }
            }

            p {
                color: var(--theme-surface-on-surface-variant);
            }

            @scope (.dark) {
                p {
                    color: var(--theme-surface-surface);
                }
            }
        }

        @layer reset {

            html,
            body {
                height: 100%;
            }

            * {
                box-sizing: border-box;
            }

            img {
                max-width: 100%;
                height: auto;
            }

            ul[class] {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            input,
            textarea,
            select,
            button {
                font-family: inherit;
                font-size: inherit;
            }

            a:focus-visible,
            button:focus-visible {
                outline-offset: 0.2rem;
            }

            figure {
                margin: 0;
            }
        }

        @layer util {
            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border-width: 0;
            }

            .not-sr-only {
                position: static;
                width: auto;
                height: auto;
                padding: 0;
                margin: 0;
                overflow: visible;
                clip: auto;
                white-space: normal;
            }
        }

        @layer tokens {
            @layer colors {
                /* === LIGHT MODE (DEFAULT) === */
                :root {
                    --palette-grey-900: #1A1A1A;
                    --palette-grey-800: #6B7280;
                    --palette-grey-50: #F5F5F5;
                    --palette-grey-0: #FFFFFF;
                    --palette-grey-1000: #E5E7EB;
                    --palette-grey-20: #F0F0F0;
                    --palette-grey-1200: #0A0A0A;
                    --palette-grey-1100: #1A1A1A;
                    --palette-grey-10: #F5F5F5;
                    --palette-grey-100: #E0E0E0;
                    --palette-grey-200: #CCCCCC;
                    --palette-grey-300: #AAAAAA;
                    --palette-grey-400: #6B7280;
                    --palette-grey-600: rgba(107, 114, 128, 0.3);
                    --palette-grey-1000-12: #EBEBEB;
                    --palette-grey-50-20: #DDDDDD;
                    --palette-grey-15: #F2F2F2;
                    --palette-grey-0-rgb: 255, 255, 255;
                    --palette-grey-50-rgb: 245, 245, 245;
                    --palette-grey-400-rgb: 107, 114, 128;
                    --palette-grey-600-rgb: 107, 114, 128;
                    --palette-grey-1000-rgb: 229, 231, 235;
                    --palette-grey-1200-rgb: 10, 10, 10;
                    --theme-surface-surface: #FFFFFF;
                    --theme-surface-on-surface: #0A0A0A;
                    --theme-surface-on-surface-variant: #6B7280;
                    --theme-surface-surface-container: #F5F5F5;
                    --theme-surface-surface-container-high: #EBEBEB;
                    --theme-surface-surface-container-higher: #E0E0E0;
                    --theme-surface-surface-container-highest: #D4D4D4;
                    --theme-surface-inverse-surface: #0A0A0A;
                    --theme-surface-inverse-on-surface: #FFFFFF;
                    --theme-surface-inverse-on-surface-variant: #AAAAAA;
                    --theme-surface-overlay: rgba(255, 255, 255, .95);
                    --theme-surface-overlay-low: rgba(255, 255, 255, .12);
                    --theme-surface-overlay-high: rgba(255, 255, 255, .24);
                    --theme-surface-overlay-higher: rgba(255, 255, 255, .72);
                    --theme-surface-overlay-highest: rgba(255, 255, 255, .95);
                    --theme-surface-transparent: rgba(255, 255, 255, 0);
                    --theme-inverse-surface-overlay: rgba(10, 10, 10, .01);
                    --theme-inverse-surface-overlay-high: rgba(10, 10, 10, .24);
                    --theme-inverse-surface-overlay-higher: rgba(10, 10, 10, .72);
                    --theme-inverse-surface-overlay-highest: rgba(10, 10, 10, .95);
                    --theme-inverse-surface: #0A0A0A;
                    --theme-outline: rgba(10, 10, 10, .12);
                    --theme-outline-variant: rgba(10, 10, 10, .08);
                    --theme-inverse-outline: rgba(255, 255, 255, .12);
                    --theme-inverse-outline-variant: rgba(255, 255, 255, .06);
                    --theme-outline-inverse-outline-variant: rgba(10, 10, 10, .06);
                    --theme-outline-outline-variant: rgba(10, 10, 10, .08);
                    --theme-primary-primary: #CDFF00;
                    --theme-primary-on-primary: #0A0A0A;
                    --theme-tonal-tonal: var(--theme-surface-surface-container);
                    --theme-tonal-on-tonal: var(--theme-surface-on-surface);
                    --theme-outlined-outlined: var(--theme-surface-transparent);
                    --theme-outlined-on-outlined: var(--theme-surface-on-surface);
                    --theme-protected-protected: var(--theme-surface-surface-container);
                    --theme-protected-on-protected: var(--theme-surface-on-surface);
                    --theme-text-text: var(--theme-surface-transparent);
                    --theme-text-on-text: var(--theme-surface-on-surface);
                    --theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
                    --theme-text-link-states-hovered: #0A0A0A;
                    --theme-text-link-states-focused: #0A0A0A;
                    --theme-text-link-states-pressed: #0A0A0A;
                    --theme-text-link-states-disabled: #9CA3AF;
                    --theme-button-states-primary-enabled: var(--theme-primary-primary);
                    --theme-button-states-primary-disabled: #E5E7EB;
                    --theme-button-states-primary-hovered: #B8E600;
                    --theme-button-states-primary-pressed: rgba(10, 10, 10, .12);
                    --theme-button-states-primary-focused: rgba(10, 10, 10, .2);
                    --theme-button-states-primary-on-disabled: rgba(10, 10, 10, .2);
                    --theme-secondary-button: rgba(10, 10, 10, .06);
                    --theme-button-secondary-hover: rgba(10, 10, 10, .1);
                    --theme-button-secondary-inverse-hover: rgba(255, 255, 255, .3);
                    --theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
                    --theme-button-states-tonal-disabled: #E5E7EB;
                    --theme-button-states-protected-enabled: var(--theme-protected-protected);
                    --theme-button-states-protected-hovered: #EBEBEB;
                    --theme-button-states-protected-disabled: #E0E0E0;
                    --theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
                    --theme-button-states-disabled: #E0E0E0;
                    --theme-button-states-on-disabled: #9CA3AF;
                    --theme-button-states-hovered: rgba(10, 10, 10, .04);
                    --theme-button-states-pressed: rgba(10, 10, 10, .06);
                    --theme-button-states-focused: rgba(10, 10, 10, .12);
                    --theme-button-states-disabled-transparent: rgba(255, 255, 255, 0);
                    --theme-nav-button: rgba(10, 10, 10, .06);
                    --theme-nav-button-hover: rgba(10, 10, 10, .1);
                    --divider: var(--theme-outline-outline-variant);
                }

                /* === DARK MODE === */
                [data-theme="dark"] {
                    --palette-grey-900: #1A1A1A;
                    --palette-grey-800: #6B7280;
                    --palette-grey-50: #F5F5F5;
                    --palette-grey-0: #0A0A0A;
                    --palette-grey-1000: #141414;
                    --palette-grey-20: #1E1E1E;
                    --palette-grey-1200: #FFFFFF;
                    --palette-grey-1100: #1A1A1A;
                    --palette-grey-10: #121212;
                    --palette-grey-100: #333333;
                    --palette-grey-200: #404040;
                    --palette-grey-300: #555555;
                    --palette-grey-400: #6B7280;
                    --palette-grey-600: rgba(107, 114, 128, 0.3);
                    --palette-grey-1000-12: #262626;
                    --palette-grey-50-20: #404040;
                    --palette-grey-15: #1A1A1A;
                    --palette-grey-0-rgb: 10, 10, 10;
                    --palette-grey-50-rgb: 245, 245, 245;
                    --palette-grey-400-rgb: 107, 114, 128;
                    --palette-grey-600-rgb: 107, 114, 128;
                    --palette-grey-1000-rgb: 20, 20, 20;
                    --palette-grey-1200-rgb: 255, 255, 255;
                    --theme-surface-surface: #0A0A0A;
                    --theme-surface-on-surface: #FFFFFF;
                    --theme-surface-on-surface-variant: #6B7280;
                    --theme-surface-surface-container: #1E1E1E;
                    --theme-surface-surface-container-high: #333333;
                    --theme-surface-surface-container-higher: #404040;
                    --theme-surface-surface-container-highest: #555555;
                    --theme-surface-inverse-surface: #FFFFFF;
                    --theme-surface-inverse-on-surface: #121212;
                    --theme-surface-inverse-on-surface-variant: #555555;
                    --theme-surface-overlay: rgba(10, 10, 10, .95);
                    --theme-surface-overlay-low: rgba(10, 10, 10, .12);
                    --theme-surface-overlay-high: rgba(10, 10, 10, .24);
                    --theme-surface-overlay-higher: rgba(10, 10, 10, .72);
                    --theme-surface-overlay-highest: rgba(10, 10, 10, .95);
                    --theme-surface-transparent: rgba(10, 10, 10, 0);
                    --theme-inverse-surface-overlay: rgba(255, 255, 255, .01);
                    --theme-inverse-surface-overlay-high: rgba(255, 255, 255, .24);
                    --theme-inverse-surface-overlay-higher: rgba(255, 255, 255, .72);
                    --theme-inverse-surface-overlay-highest: rgba(255, 255, 255, .95);
                    --theme-inverse-surface: #FFFFFF;
                    --theme-outline: rgba(255, 255, 255, .12);
                    --theme-outline-variant: rgba(255, 255, 255, .06);
                    --theme-inverse-outline: rgba(10, 10, 10, .12);
                    --theme-inverse-outline-variant: rgba(10, 10, 10, .06);
                    --theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06);
                    --theme-outline-outline-variant: rgba(33, 34, 38, .06);
                    --theme-primary-primary: #CDFF00;
                    --theme-primary-on-primary: #0A0A0A;
                    --theme-tonal-tonal: var(--theme-surface-surface-container);
                    --theme-tonal-on-tonal: var(--theme-surface-on-surface);
                    --theme-outlined-outlined: var(--theme-surface-transparent);
                    --theme-outlined-on-outlined: var(--theme-surface-on-surface);
                    --theme-protected-protected: var(--theme-surface-surface-container);
                    --theme-protected-on-protected: var(--theme-surface-on-surface);
                    --theme-text-text: var(--theme-surface-transparent);
                    --theme-text-on-text: var(--theme-surface-on-surface);
                    --theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
                    --theme-text-link-states-hovered: #FFFFFF;
                    --theme-text-link-states-focused: #FFFFFF;
                    --theme-text-link-states-pressed: #FFFFFF;
                    --theme-text-link-states-disabled: #6A6A71;
                    --theme-button-states-primary-enabled: var(--theme-primary-primary);
                    --theme-button-states-primary-disabled: #141414;
                    --theme-button-states-primary-hovered: #B8E600;
                    --theme-button-states-primary-pressed: rgba(10, 10, 10, .12);
                    --theme-button-states-primary-focused: rgba(10, 10, 10, .2);
                    --theme-button-states-primary-on-disabled: rgba(255, 255, 255, .2);
                    --theme-secondary-button: rgba(255, 255, 255, .1);
                    --theme-button-secondary-hover: rgba(255, 255, 255, .15);
                    --theme-button-secondary-inverse-hover: rgba(10, 10, 10, .3);
                    --theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
                    --theme-button-states-tonal-disabled: #141414;
                    --theme-button-states-protected-enabled: var(--theme-protected-protected);
                    --theme-button-states-protected-hovered: #1E1E1E;
                    --theme-button-states-protected-disabled: #333333;
                    --theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
                    --theme-button-states-disabled: #333333;
                    --theme-button-states-on-disabled: #6A6A71;
                    --theme-button-states-hovered: rgba(255, 255, 255, .04);
                    --theme-button-states-pressed: rgba(255, 255, 255, .06);
                    --theme-button-states-focused: rgba(255, 255, 255, .12);
                    --theme-button-states-disabled-transparent: rgba(10, 10, 10, 0);
                    --theme-nav-button: rgba(255, 255, 255, .09);
                    --theme-nav-button-hover: rgba(255, 255, 255, .2);
                    --divider: var(--theme-outline-outline-variant);
                }
            }

            @layer animations {
                :root {
                    --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
                    --ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
                    --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
                    --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
                    --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
                    --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
                    --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
                    --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
                    --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
                    --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
                    --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
                    --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
                    --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
                    --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
                    --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
                    --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
                    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
                    --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
                    --ease-out-back: cubic-bezier(.34, 1.85, .64, 1);
                }
            }
        }
    }
}

/* --- Who Section --- */
#who {
    grid-column: main;
    padding: 6rem 0;
}

.who-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;

    @media (width >=930px) {
        grid-template-columns: 1fr 1fr;
    }

    .card {
        background: var(--theme-surface-container-low);
        border: 1px solid var(--theme-outline-variant);
        border-radius: 2rem;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
        text-align: left;

        h3 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--theme-surface-on-surface);
            margin: 0;
        }

        p {
            font-size: 1.15rem;
            color: var(--theme-surface-on-surface-variant);
            line-height: 1.6;
            margin: 0;
            max-width: 40ch;
        }

        button {
            margin-top: 1rem;
        }
    }
}

/* --- Premium Animation Layer --- */

.reveal-element {
    opacity: 0;
    will-change: transform, opacity, filter;
}

.reveal-element.revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

[data-reveal-type="hero"] {
    transform: translateY(30px) scale(0.98);
    filter: blur(15px);
}

[data-reveal-type="card"] {
    transform: translateY(40px) scale(0.95);
    filter: blur(10px);
}

/* --- Premium Micro-interactions --- */

button {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.35s ease !important;
}

button:hover {
    transform: scale(1.07) translateY(-3px) !important;
}

.feature-card,
.use-case-card {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        background 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08), 0 0 0 1.5px var(--theme-primary-primary);
    border-color: var(--theme-primary-primary);
}

.use-case-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 0 1.5px var(--theme-primary-primary);
    border-color: var(--theme-primary-primary);
}

/* Sticky Header Polish */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 10001;
    /* Above noise texture (9999) */
    transition: background-color 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease;
}

.header-wrapper.scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .header-wrapper.scrolled {
    background-color: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

#welcome {
    --particle-color: #0A0A0A;
}

[data-theme="dark"] #welcome {
    --particle-color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-element {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* === SMOOTH THEME TRANSITION === */
html {
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Apply smooth transitions to key properties without interfering with animations */
*:not(button):not(.feature-card):not(.use-case-card):not(.reveal-element) {
    transition-property: background-color, border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* === THEME TOGGLE BUTTON === */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 999px;
    border: 1.5px solid var(--theme-outline-variant);
    background: var(--theme-surface-surface-container);
    color: var(--theme-surface-on-surface);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    margin-left: 0;
    /* Override global button styles */
    font-weight: normal;
    letter-spacing: normal;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: var(--theme-primary-primary) !important;
    border-color: var(--theme-primary-primary) !important;
    color: #0A0A0A !important;
    box-shadow: 0 6px 16px rgba(205, 255, 0, 0.3) !important;
    transform: scale(1.1) translateY(-2px) !important;
}

.theme-toggle svg {
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Light mode: show moon, hide sun */
:root .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
:root .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Dark mode: show sun, hide moon */
[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* Light mode specific overrides */
:root .card.dark {
    background: #1A1A1A;
    color: #FFFFFF;
}

:root .product-outcome {
    background: #1A1A1A !important;
    color: #FFFFFF !important;
}

/* Mobile nav theming */
@media (width < 930px) {
    .menu-checkbox:checked ~ nav {
        position: absolute !important;
        top: 54px !important;
        background: var(--theme-surface-surface) !important;
        border-top: 1px solid var(--theme-outline-variant);
    }

    /* Hide header-actions contact button on mobile, show menu button */
    .header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

:root {
    --feature-img-bg: #EAEAEA;
    --tag-bg: #CDFF00;
    --tag-color: #0A0A0A;
}

[data-theme="dark"] {
    --feature-img-bg: var(--palette-grey-900);
    --tag-bg: rgba(205, 255, 0, 0.1);
    --tag-color: #CDFF00;
}

/* Logo visibility based on theme */
:root .logo-dark { display: none; }
:root .logo-light { display: block; }

[data-theme="dark"] .logo-dark { display: block; }
[data-theme="dark"] .logo-light { display: none; }