:root {
    color-scheme: dark;

    --layer: #fff8;
    --layer2: #0003;
    --main: #0c2658;
    --accent: #e7660f;

    --border: 1.4px solid #fff3;
    --text1: #eee;
    --text2: #333;
    --subtleText: #8885;

    --padding: clamp(3px, 0.1vw, 4px);
    --padding2: clamp(6px, 0.5vw, 8px);
    --padding4: clamp(12px, 1vw, 16px);
    --padding8: clamp(24px, 1.4vw, 32px);
    --padding16: clamp(48px, 5vw, 64px);
    --padding32: clamp(96px, 5vw, 128px);

    --shadow: 0 0 24px #0003;
    --shadow2: 0 0 24px #0005;
    --glow: 0 0 16px var(--accent);

    --slow: 1s;
    --quick: 0.5s;
    --delay: 0.1s;

    --smooth: linear(0,
            0.012 0.9%,
            0.05 2%,
            0.316 7.2%,
            0.466 10.5%,
            0.566 13.2%,
            0.653 16.1%,
            0.732 19.4%,
            0.796 22.9%,
            0.849 26.8%,
            0.892 31.1%,
            0.925 35.8%,
            0.95 41.1%,
            0.97 47.4%,
            0.987 58.7%,
            0.998 81.1%,
            1);
    --bounce: linear(0,
            0.008 1.1%,
            0.034 2.3%,
            0.073 3.5%,
            0.134 4.9%,
            0.264 7.3%,
            0.683 14.3%,
            0.797 16.5%,
            0.89 18.6%,
            0.967 20.7%,
            1.027 22.8%,
            1.073 25%,
            1.104 27.3%,
            1.123 30.6%,
            1.119 34.3%,
            1.101 37.7%,
            1.018 49.5%,
            0.998 54%,
            0.988 58.6%,
            0.985 65.2%,
            1.002 91.4%,
            1);

    --smooth2: cubic-bezier(0.65, 0.35, 0.05, 1);
    --bounce2: cubic-bezier(0.65, 0.35, 0.05, 1.8);

    --radius: 14px;
    --navHeight: 80px;
}

@font-face {
    font-family: "globalFont";
    src: url("../fonts/outfitVariable.ttf") format("truetype");
    font-weight: 100 900;
}

* {
    box-sizing: border-box;
    border: 0;
    color: light-dark(#000, #fff);
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    scroll-snap-stop: normal;
    -webkit-tap-highlight-color: #0000 !important;
    touch-action: manipulation;
    font-family: "globalFont", Outfit, arial, sans-serif;
    font-weight: 200;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: none;
    accent-color: var(--accent);
    cursor: default;
    box-decoration-break: clone;
    caret-color: var(--caret);
}

html,
body {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
    scrollbar-width: thin;
    overflow: hidden;
    overscroll-behavior: none;
    margin: 0;
}

body {
    display: block;
    overflow-y: auto;
    scrollbar-width: thin;

    ::-webkit-scrollbar {
        all: initial;
    }
}

header {
    position: fixed;
    top: 0;
}

::-webkit-scrollbar {
    display: block;
    background: transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: var(--radius);
}

::-webkit-scrollbar-button {
    display: none;
}

html {
    background: var(--main);
}

nav,
div,
header {
    display: flex; 
}

header:has(input:checked) + main {
    filter: blur(4px);
    pointer-events: none;
}

.glass {
    background: var(--layer);
    backdrop-filter: blur(16px) saturate(120%) contrast(110%);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    border: var(--border);
}

button {
    display: flex;
    position: relative;
    min-width: 140px;
    min-height: 48px;
    max-height: 48px;
    font-size: 1rem;
    --parentPadding: var(--padding2);
    border-radius: calc(var(--radius) - var(--parentPadding));
    background: var(--accent);
    color: var(--text1);
    border: var(--border);
    box-shadow: var(--shadow);
    align-items: center;
    justify-content: center;
    isolation: isolate;
    overflow: hidden;
    contain: layout paint;
    transition:
        transform var(--quick) var(--bounce),
        box-shadow var(--quick) var(--smooth);
    will-change: transform, box-shadow;
    outline: none;
    cursor: pointer;

    &:hover {
        transform: translateY(calc(var(--padding) * -1));
        box-shadow: var(--shadow2), var(--glow);
    }

    &.active::after {
        animation: click var(--slow) var(--smooth);
    }
}

:is(input[type="text"], input[type="email"]), textarea {
    display: flex;
    width: 100%;
    height: 42px;
    background: #fffa;
    --parentPadding: var(--padding2);
    border-radius: calc(var(--radius) - var(--parentPadding));
    color: var(--text2);
    border: var(--border);
    outline: none;
    padding: var(--padding4);
    box-shadow: var(--shadow);
    will-change: transform, box-shadow;
    cursor: pointer;

    &::selection {
        background: var(--accent);
        color: var(--text1);
    }

    &:is(:focus, :hover, :active) {
        transform: translateY(calc(var(--padding) * -1));
        transition:
            transform var(--quick) var(--bounce),
            box-shadow var(--quick) var(--smooth);
        box-shadow: var(--shadow2);
    }

    &:focus {
        cursor: text;
        box-shadow: var(--shadow2), var(--glow);
    }

    &::placeholder {
        color: var(--subtleText);
    }
}

a {
    position: relative;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    transition: color var(--quick) var(--smooth);
    isolation: isolate;
    --delay: 0s;
    text-decoratio: none;

    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0.8px;
        border-radius: 0.8px;
        background: #fff;
        transition:
            width var(--quick) var(--smooth) var(--delay),
            height var(--quick) var(--smooth) var(--delay),
            left var(--quick) var(--smooth) var(--delay),
            bottom var(--quick) var(--smooth) var(--delay),
            border-radius var(--quick) var(--smooth) var(--delay);
        will-change: width, height, left, bottom;
        transform: translateZ(0);
        z-index: -1;
    }

    &:is(:hover, .current)::after {
        width: 100%;
        height: 0.8px;
    }

    &:is(:active, :focus) {
        color: var(--accent);
        font-weight: 600 !important;
    }

    &:is(:active, :focus)::after {
        --size: -4px;
        left: var(--size);
        bottom: var(--size);
        width: calc(100% + (var(--size) * -2));
        height: calc(100% + (var(--size) * -2));
        border-radius: 4px;
    }

    @media (max-width: 1200px) {
        font-size: 1rem;
    }
}

textarea {
	min-height: 192px;
	resize: none;
}

@keyframes pulse {
    0% {
        transform: rotate(10deg) translate(0px, -50%);
    }

    25%,
    100% {
        transform: rotate(10deg) translate(500px, -50%);
    }
}

header {
    width: 100%;
    height: fit-content;
    z-index: 99;
}

@scope (main) {
    :scope {
        display: block;
        width: 100%;
        height: max-content;
        margin-top: var(--navHeight);
        transition: filter var(--slow) var(--smooth);
        will-change: filter;
        transform: translateZ(0);
    }

    section {
        display: flex;
        flex-flow: column nowrap;
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: var(--padding8);
        align-items: center;
        justify-content: center;
        gap: var(--padding8);
    }

    .text {
        display: flex;
        flex-flow: column nowrap;
        width: min(100%, 768px);
        height: fit-content;
        text-align: justify;
        text-justify: inter-word;
        text-wrap: balance;
        text-align-last: center;
        color: var(--text);
        font-weight: 400;
        font-size: 1rem;
    }

    .videoSection {
        min-height: 75vh;

        .video {
            display: flex;
            flex-flow: column nowrap;
            width: min(384px, 100%);
            aspect-ratio: 5/3;
            gap: var(--padding4);
            justify-content: space-between;
            align-items: center;
            padding: var(--padding8);
        }
    }
}


h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}

h1 {
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: 600;
    color: light-dark(#000, #fff);
    text-shadow: var(--shadow);
}

h2 {
    font-size: clamp(1.5rem, 7vw, 3rem);
    font-weight: 600;
    color: light-dark(#111, #eee);
}

h3 {
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 600;
    color: #222;
    text-align: center;

    span {
        font-size: 1.2em;
        font-weight: 600;
        color: var(--accent);
    }
}

h4 {
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 500;
    color: var(--accent);
}

h5 {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    font-weight: 500;
    color: var(--text2);
    text-align: center;  
}

p {
    all: inherit;
    display: inline;

    .hlt {
        font-weight: 600;
    }
}

.ribbon::after {
    content: attr(data-ribbon);
    --width: 200px;
    --height: 52px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: absolute;
    top: 15px;
    right: -56px;
    background: linear-gradient(135deg, var(--accent), red);
    transform: rotate(45deg);
    width: var(--width);
    height: var(--height);
    box-shadow: var(--shadow);
    pointer-events: none;

}
@keyframes zoom {
    100% {
        transform: scale(1); 
        filter: blur(0) contrast(110%) saturate(120%);
    }
}

.card001 :is(video, img) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    filter: blur(4px);
    object-fit: cover;
    animation: zoom var(--slow) var(--smooth) var(--delay) forwards;
}

.card001 video:not(.playing) {filter: blur(4px)}

.card001 button {
    position: absolute;
    bottom: var(--padding8);
}

.card001:has(video) label {
    all: unset;
    display: flex;
    position: absolute;
    inset: 50%;
    width: 64px;
    height: 64px;
    border-radius: 64px;
    transform-origin: top left;
    background: var(--layer);
    border: var(--border);
    align-items: center;
    justify-content: center;
    opacity: 1;
    filter: blur(0px);
    padding: 18px;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    backdrop-filter: blur(16px);
    transition: transform var(--quick) var(--bounce), opacity var(--quick) var(--smooth), filter var(--quick) var(--smooth), inset var(--slow) var(--bounce), width var(--slow) var(--bounce), height var(--slow) var(--bounce);
    will-change: transform, inset, width, height;

    &:hover {
        transform: scale(1.1) translate(-50%, -50%);

        &:active {
            transform: scale(0.85) translate(-50%, -50%);
        }
    }

    &::after {
        content: '';
        width: auto;
        aspect-ratio: 1;
        height: 100%;
        background: #fff;
        clip-path: polygon(
            0% 0%,          /* 1: Top Left */
            0% 100%,        /* 2: Bottom Left */
            100% 50%,       /* 3: Tip */
            100% 50%,       /* 4: Tip */
            100% 50%,       /* 5: Tip */
            100% 50%,       /* 6: Tip */
            100% 50%,       /* 7: Tip */
            100% 50%,       /* 8: Tip */
            100% 50%,       /* 9: Tip */
            0% 0%           /* 10: Back to Start */
        );
        --pos1: 35%;
        --pos2: 65%;
        transform: scaleX(0.95);
        transition: clip-path var(--quick) var(--smooth), transform var(--quick) var(--smooth);
    }

    &:has(input:checked) {
        width: 128px;
        height: 48px;
        inset: calc(100% - var(--padding4) - 24px) 50%;

        &::after {
            clip-path: polygon(
                0% 0%,            /* 1: Bar 1 Top Left */
                0% 100%,          /* 2: Bar 1 Bottom Left */
                var(--pos1) 100%, /* 3: Bar 1 Bottom Right */
                var(--pos1) 0%,   /* 4: Bar 1 Top Right */
                var(--pos2) 0%,   /* 5: Bar 2 Top Left */
                var(--pos2) 100%, /* 6: Bar 2 Bottom Left */
                100% 100%,        /* 7: Bar 2 Bottom Right */
                100% 0%,          /* 8: Bar 2 Top Right */
                100% 0%,          /* 9: Extra point */
                0% 0%             /* 10: Back to Start */
            );
            transform: scaleX(1);
        }
    }
}

@scope (.faqStack) {
    :scope {
        padding: var(--padding8);
        max-width: 100%;
        interpolate-size: allow-keywords;
    }

    .faqs {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;
        max-width: 720px;
        margin-inline: auto;
        min-height: 256px;
        padding: var(--padding4);
        gap: var(--padding4);
    }

    .question > p {display: flex; align-items: center}

    @property --h {
        syntax: 'length';
        initial-value: 64px;
        inherits: false;
    }

    strong {
        font-weight: 700;
        color: #111;
    }

    .plus {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        --h: 64px;
        width: var(--h);
        height: var(--h);
        pointer-events: none;
        background: url("../images/icons/plus.svg") center/50% no-repeat;
        align-items: center;
        justify-content: center;
        padding: 0;
        filter: invert(12%) sepia(56%) saturate(2311%) hue-rotate(198deg) brightness(91%) contrast(97%);
        transition: transform var(--slow) var(--bounce), filter var(--quick) var(--smooth);
    }

    .faq {
        display: flex;
        position: relative;
        flex-flow: column nowrap;
        --h: 64px;
      	max-width: 80vw;
        height: var(--h);
        background: #fffa;
        border-radius: calc(var(--radius) / 2);
        border: var(--border);
        box-shadow: var(--shadow);
        transition: height var(--slow) var(--smooth);
        overflow: hidden;
        justify-content: start;
        align-items: start;

        label {
            display: flex;
            position: absolute;
            inset: 0;
            width: 100%;
            --h: 64px;
            height: var(--h);

            input {
                display: none
            }

            &:hover+.plus {
                filter: invert(53%) sepia(85%) saturate(3015%) hue-rotate(359deg) brightness(95%) contrast(95%);
            }
        }

        .question {
            display: flex;
            position: relative;
            pointer-events: none;
            width: 100%;
            --h: 64px;
            padding-right: 48px;
            height: var(--h);
            padding: var(--padding4) var(--padding8);
            align-items: center;

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                width: 10px;
                height: 0.8px;
                border-radius: 12px;
                background: #fff3;
                opacity: 0;
                transition: width var(--slow) var(--smooth), opacity var(--quick) var(--smooth);
            }

            p {
                color: var(--main);
                font-weight: 600;
            }
        }

        .answer {
            display: flex;
            position: relative;
            width: 100%;
            height: fit-content;
            padding: var(--padding4) var(--padding8);
            transition: transform var(--slow) var(--smooth), filter var(--slow) var(--smooth), opacity var(--slow) var(--smooth);
            transform: translateY(-32px);
            filter: blur(4px);
            opacity: 0;
            pointer-events: none;

            p {
                font-weight: 400;
                color: #333;
            }

            .hlt {
                color: #000;
            }

            a {color: #000; pointer-events: auto; &::after {background: var(--accent)}}
        }

        &:has(input:checked) {
            --h: fit-content;

            .plus {
                transform: rotate(135deg);
            }

            .question::after {
                width: 150%;
                opacity: 1;
                transition: width var(--slow) var(--smooth), opacity var(--slow) var(--smooth);
            }

            .answer {
                transform: translateX(0);
                filter: blur(0px);
                opacity: 1;
            }
        }
    }
}

@scope (.form) {
    :scope {
        width: calc(100% - (var(--padding8) * 2));
        min-height: 500px;
        max-width: 720px;
        margin: var(--padding8) auto;
    }

    .filler {
        max-width: 720px;
        min-width: min(100%, 320px);
        margin-inline: auto;
    }

    p {
        text-align: left;
        text-align-last: unset;
        justify-content: start;
        color: var(--text2);
        font-weight: 600;
        padding-left: var(--padding4);
        margin-block: var(--padding4);
    }

    input, textarea {
        min-width: 240px;
        margin-top: var(--padding4);
    }

    form {
        display: flex;
        flex-flow: column nowrap;
        flex: 1;
        width: 100%;
        padding: var(--padding8);
        gap: var(--padding8);
    }
}