:root {
    --color-accent: #BD39C6;
    --color-primary: #3D8DC7;
    --color-secondary: #F3E03D;
    --color-tertiary: #2E9C7D;
    --color-contrast: #2E2E2E;
    
    --color-surface: #F9F9F9;
    --color-surface: #ebf6f6;
    --color-on-surface: var(--color-contrast);
    --color-on-surface-variant: #767676;

    --color-surface-variant: #e6e6e6;

    --size-text: clamp(1.0625rem, 0.9954rem + 0.3356vi, 1.3125rem);

    --radius-big: 24px;
    --radius-small: 8px;

    --w1: 4px;
    --w2: 8px;
    --w3: 12px;
    --w4: 20px;
    --w5: 24px;
    --w6: 32px;
    --w7: 46px;

    --w-page: 1200px;

    --main-gap: var(--w1);
    --hero-gap: var(--w4);
    --card-gap: var(--w4);
    --border-gap: var(--w5);
    --border-gap-block: var(--w6);
    --color-glass: rgba(255, 255, 255, .4);

}

/* General */
* {
    box-sizing: border-box;
}

p {
    margin-bottom: 0;
}

.headline {
    font-weight: 200;
    max-width: 14ch;
    line-height: 1.1;
    font-size: 2.0rem;
    margin: 0;
}

.headline strong {
    font-weight: 400;
}

.callout {
    font-size: 1em;
}

.text-accent {
    color: var(--color-accent);
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-tertiary {
    color: var(--color-tertiary);
}

/* Elements */
body {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    margin: 0;
    padding: 0;

    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: var(--size-text);
}

site-nav {
    --site-nav-button-color: var(--color-on-surface);
    z-index: 100;

    backdrop-filter: blur(10px);
    background: var(--color-glass);
    transition: all .3s ease;
}

site-nav:not(:defined) {
    display: none;
}

site-nav[open] {
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(10px);
}

site-nav[open] .toc {
    display: flex;
    flex-direction: column;
    height: auto;
    position: static;
    background: none;
    backdrop-filter: none;
    gap: 4px;
    padding: 0;
    font-size: 1.3rem;
    margin: 0;
}

site-nav .toc li {
    padding: var(--w3);
    border-radius: var(--radius-small);
    width: auto;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

main > * {
    flex-shrink: 0;
}

.hero {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--hero-gap);
    backdrop-filter: blur(10px);
    background-color: var(--color-glass);
    padding: .4rem;
    border-radius: var(--radius-big);
    margin-top: 62px;
    margin-left: auto;
    margin-right: auto;
}

.hero img, .hero video {
    width: 100%;
    max-width: var(--w-page);
    min-height: 400px;
    aspect-ratio: unset;
    object-fit: cover;
    border-radius: var(--radius-big);
}

.hero .headline {
    text-align: center;
    align-self: center;
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    border-radius: var(--radius-big);
    background-color: var(--color-primary);
    position: relative;
    padding: var(--border-gap);
    padding: var(--border-gap-block, var(--border-gap)) var(--border-gap-inline, var(--border-gap));
    color: var(--color-surface);
    margin: 0 var(--main-gap);
    max-width: 500px;
    justify-content: space-between;
}

.card .content {
    flex-grow: 1;
}

.card .actions {
    justify-content: flex-end;
}

.card.accent {
    background-color: var(--color-accent);
}

.card.tertiary {
    background-color: var(--color-tertiary);
}

.card .actions {
    justify-content: flex-end;
}

.card .heading {
    margin: 0;
}

.branded.card {
    --header-height: 140px;
    --header-offset: -160px;
    margin-top: 160px;
}

.branded.card .header {
    position: absolute;
    top: var(--header-offset);
    color: var(--color-primary);
    left: 0;
    right: 0;
    max-width: 100%;
}

.branded.card .header img {
    height: var(--header-height);
    margin-left: var(--border-gap);
    z-index: -1;
}

.branded.card .header svg {
    height: 148px;
    position: absolute;
    right: 0px;
    bottom: -58px;
    z-index: -1;
    width: auto;
    max-width: 89%;
}

.card > * {
    margin: 0;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--w3);
}

.split {
    display: flex;
    gap: var(--w4);
}

.stack {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--border-gap);
}

.chip {
    display: flex;
    align-items: center;
    gap: var(--w2);
    border-radius: 100px;
    padding: var(--w2) var(--w6);
    text-decoration: none;
    font-size: .9em;

    background-color: var(--color-contrast);
    color: var(--color-surface);
}

.chip.secondary {
    background-color: var(--color-secondary);
    color: var(--color-contrast);
}

.card.tertiary .chip.secondary {
    background-color: var(--color-surface-variant);
}

.chip.text {
    background-color: transparent;
    color: currentColor;
}

.avatar {
    border-radius: 100%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    object-position: top;
    border: 2px solid var(--color-surface);
    flex-shrink: 0;
}

footer {
    margin: 10vh auto 4vh;
    font-size: .8em;
    max-width: 600px;
    text-align: center;
    padding: 0 4vw;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.toc {
    display: none;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    margin: 0;
    
    background: var(--color-glass);
    backdrop-filter: blur(10px);
    padding: 0 var(--w4);
    padding-right: 4vw;
    list-style: none;
    align-items: stretch;
    
    gap: var(--w4);
    line-height: 24px;
    border-bottom-right-radius: var(--radius-big);
    height: 3rem;
    font-size: 1rem;
}

.logotype {
    font-weight: 300;
}

.logotype strong {
    font-weight: 500;
}

.toc li { 
    display: flex;
    align-items: stretch;
}

.toc a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-contrast);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all .15s ease-in-out;
}

.toc a:hover {
    text-decoration: underline;
    transform: scale(1.1);
}

.toc .logotype:hover {
    text-decoration: none;
}

.toc .logotype {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-contrast);
    margin-right: var(--w6);
    text-transform: none;
    font-size: 1.2em;
}

.cardset {
    background-color: var(--color-surface-variant);
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--w3);
    gap: var(--card-gap);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

.cardset h2 {
    margin: 0;
    flex-basis: 100%;
}

background-blobs {
    display: none;
    --dur0: 240s;
    --dur1: 320s;
    --dur2: 200s;
    --dur3: 300s;
    --dur4: 174s;

    filter: url('#gooeyness');
    position: absolute;
    left: 0;
    top: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 8vw;
    grid-row-gap: 0px;
    align-items: stretch;
    justify-items: stretch;
    animation: pulse-grid var(--dur1) ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    z-index: -2;
    width: 100vw;
    contain: paint;
}

background-blobs .blob {
    position: relative;
    animation: wander var(--dur0) ease infinite alternate;
    background-color: var(--color-accent);
    aspect-ratio: 1;
    --curve0: 77.20%;
}

background-blobs .blob:nth-child(10n)   { clip-path: shape(from 70.36% 44.78%,curve to 78.74% 61.31% with 76.35% 50.00%,curve to 73.27% 85.01% with 81.13% 72.62%,curve to 53.90% 85.40% with 65.40% 97.40%,curve to 28.87% 74.29% with 42.40% 73.40%,curve to 16.46% 62.59% with 15.35% 75.17%,curve to 22.31% 41.66% with 17.58% 50.00%,curve to 33.57% 26.42% with 27.05% 33.33%,curve to 51.49% 14.93% with 40.10% 19.52%,curve to 63.62% 24.96% with 62.88% 10.35%,curve to 70.36% 44.78% with 64.36% 39.56%); }
background-blobs .blob:nth-child(10n+1) { clip-path: shape(from 7.56% 60.99%,curve to 16.56% 39.81% with 4.29% 47.12%,curve to 34.17% 20.81% with 28.83% 32.49%,curve to 49.60% 17.32% with 39.51% 9.13%,curve to 72.18% 26.76% with 59.69% 25.52%,curve to 84.87% 40.11% with 84.66% 28.00%,curve to 81.37% 62.54% with 85.09% 52.21%,curve to 68.51% 79.69% with 77.65% 72.87%,curve to 50.84% 77.96% with 59.37% 86.51%,curve to 26.58% 72.13% with 42.31% 69.41%,curve to 7.56% 60.99% with 10.84% 74.85%); }
background-blobs .blob:nth-child(10n+2) { clip-path: shape(from 31.85% 77.20%,curve to 19.23% 62.67% with 16.20% 77.96%,curve to 26.22% 36.70% with 22.26% 47.38%,curve to 41.65% 21.42% with 30.17% 26.03%,curve to 60.98% 25.62% with 53.14% 16.82%,curve to 83.93% 44.53% with 68.83% 34.42%,curve to 86.71% 67.06% with 99.03% 54.63%,curve to 60.95% 77.96% with 74.39% 79.48%,curve to 31.85% 77.20% with 47.50% 76.43%); }
background-blobs .blob:nth-child(10n+3) { clip-path: shape(from 58.41% 87.21%,curve to 46.49% 87.52% with 53.02% 98.02%,curve to 35.81% 72.88% with 39.95% 77.02%,curve to 22.53% 66.61% with 31.66% 68.73%,curve to 10.11% 56.34% with 13.39% 64.49%,curve to 6.74% 38.33% with 6.84% 48.19%,curve to 15.84% 24.15% with 6.64% 28.47%,curve to 32.68% 17.59% with 25.04% 19.83%,curve to 47.21% 18.81% with 40.32% 15.34%,curve to 61.21% 21.70% with 54.09% 22.28%,curve to 77.34% 23.49% with 68.32% 21.13%,curve to 92.68% 33.78% with 86.36% 25.85%,curve to 98.01% 51.89% with 99.01% 41.71%,curve to 87.52% 67.15% with 97.02% 62.07%,curve to 70.92% 74.31% with 78.03% 72.22%,curve to 58.41% 87.21% with 63.81% 76.41%); }
background-blobs .blob:nth-child(10n+4) { clip-path: shape(from 69.88% 44.77%,curve to 82.05% 64.07% with 75.38% 50.00%,curve to 76.28% 85.35% with 88.73% 78.14%,curve to 52.27% 85.57% with 63.83% 92.57%,curve to 35.85% 71.19% with 40.72% 78.56%,curve to 17.78% 56.91% with 30.99% 63.81%,curve to 14.10% 40.42% with 4.57% 50.00%,curve to 31.41% 23.79% with 23.63% 30.84%,curve to 50.46% 15.30% with 39.19% 16.73%,curve to 63.06% 26.71% with 61.74% 13.87%,curve to 69.88% 44.77% with 64.39% 39.55%); }
background-blobs .blob:nth-child(10n+5) { clip-path: shape(from 79.81% 43.87%,curve to 85.47% 58.65% with 82.09% 50.00%,curve to 81.30% 71.83% with 88.86% 67.30%,curve to 67.04% 79.10% with 73.74% 76.36%,curve to 53.15% 85.19% with 60.34% 81.83%,curve to 39.46% 84.02% with 45.95% 88.55%,curve to 21.33% 79.39% with 32.98% 79.48%,curve to 15.15% 67.77% with 9.68% 79.30%,curve to 19.39% 49.74% with 20.62% 56.25%,curve to 16.60% 33.91% with 18.17% 43.23%,curve to 20.27% 16.09% with 15.03% 24.59%,curve to 35.88% 10.98% with 25.51% 7.58%,curve to 54.30% 13.18% with 46.26% 14.38%,curve to 70.12% 15.50% with 62.35% 11.98%,curve to 77.71% 28.38% with 77.89% 19.02%,curve to 79.81% 43.87% with 77.53% 37.74%); }
background-blobs .blob:nth-child(10n+6) { clip-path: shape(from 90.77% 42.44%,curve to 88.08% 56.36% with 97.58% 50.00%,curve to 73.77% 66.89% with 78.58% 62.72%,curve to 66.91% 83.39% with 68.97% 71.06%,curve to 55.36% 92.53% with 64.86% 95.72%,curve to 40.68% 82.23% with 45.86% 89.35%,curve to 24.22% 76.01% with 35.51% 75.11%,curve to 7.40% 68.58% with 12.94% 76.92%,curve to 10.52% 51.84% with 1.86% 60.23%,curve to 15.29% 32.70% with 19.19% 43.45%,curve to 19.35% 16.32% with 11.39% 21.95%,curve to 36.55% 10.36% with 27.30% 10.69%,curve to 54.10% 10.93% with 45.80% 10.04%,curve to 70.01% 15.58% with 62.41% 11.81%,curve to 80.78% 27.11% with 77.60% 19.34%,curve to 90.77% 42.44% with 83.96% 34.88%); }
background-blobs .blob:nth-child(10n+7) { clip-path: shape(from 21.13% 86.73%,curve to 21.69% 71.73% with 14.12% 83.69%,curve to 24.95% 56.73% with 29.26% 59.76%,curve to 10.98% 47.21% with 20.65% 53.71%,curve to 7.05% 35.13% with 1.32% 40.71%,curve to 19.74% 27.36% with 12.78% 29.54%,curve to 31.73% 23.54% with 26.69% 25.18%,curve to 41.49% 20.89% with 36.78% 21.90%,curve to 52.42% 12.26% with 46.20% 19.88%,curve to 64.11% 9.53% with 58.65% 4.64%,curve to 68.04% 24.46% with 69.56% 14.42%,curve to 71.24% 36.14% with 66.51% 34.50%,curve to 80.41% 41.69% with 75.98% 37.78%,curve to 80.80% 50.35% with 84.84% 45.60%,curve to 78.03% 60.61% with 76.76% 55.10%,curve to 77.25% 71.47% with 79.31% 66.11%,curve to 73.01% 85.56% with 75.19% 76.82%,curve to 63.09% 93.27% with 70.84% 94.29%,curve to 49.36% 88.45% with 55.34% 92.24%,curve to 35.76% 87.22% with 43.39% 84.66%,curve to 21.13% 86.73% with 28.13% 89.78%); }
background-blobs .blob:nth-child(10n+8) { clip-path: shape(from 26.49% 80.17%,curve to 17.13% 72.17% with 21.38% 76.88%,curve to 17.02% 60.55% with 12.88% 67.47%,curve to 24.18% 49.65% with 21.16% 53.64%,curve to 19.82% 37.50% with 27.20% 45.65%,curve to 21.39% 29.21% with 12.45% 29.35%,curve to 30.61% 19.21% with 30.34% 29.07%,curve to 38.30% 12.74% with 30.87% 9.35%,curve to 50.45% 19.47% with 45.72% 16.12%,curve to 64.34% 15.03% with 55.19% 22.82%,curve to 73.37% 17.72% with 73.50% 7.25%,curve to 74.79% 32.89% with 73.23% 28.18%,curve to 81.98% 41.43% with 76.34% 37.60%,curve to 90.08% 51.68% with 87.63% 45.25%,curve to 83.99% 61.05% with 92.53% 58.11%,curve to 71.11% 65.93% with 75.46% 64.00%,curve to 68.18% 79.74% with 66.77% 67.86%,curve to 61.63% 85.37% with 69.58% 91.61%,curve to 49.48% 76.95% with 53.68% 79.13%,curve to 38.44% 79.12% with 45.27% 74.77%,curve to 26.49% 80.17% with 31.60% 83.47%); }
background-blobs .blob:nth-child(10n+9) { clip-path: shape(from 30.30% 88.00%,curve to 19.41% 63.22% with 15.05% 78.91%,curve to 22.23% 31.04% with 23.78% 47.52%,curve to 36.98% 14.98% with 20.69% 14.57%,curve to 63.76% 22.67% with 53.27% 15.40%,curve to 77.99% 41.47% with 74.24% 29.95%,curve to 79.47% 67.94% with 81.73% 53.00%,curve to 61.38% 89.98% with 77.20% 82.88%,curve to 30.30% 88.00% with 45.55% 97.09%); }

background-blobs .blob:nth-child(5n)   { background-color: var(--color-primary) }
background-blobs .blob:nth-child(5n+1) { background-color: var(--color-tertiary) }
background-blobs .blob:nth-child(5n+2) { background-color: var(--color-primary) }
background-blobs .blob:nth-child(5n+3) { background-color: var(--color-primary) }
background-blobs .blob:nth-child(5n+4) { background-color: var(--color-accent) }


background-blobs .blob:nth-child(3n) {
    animation: wander var(--dur1) ease infinite alternate;
}

background-blobs .blob:nth-child(3n+1) {
    animation: wander var(--dur2) ease infinite alternate;
    animation-delay: -100s;
}

background-blobs .blob:nth-child(3n+2) {
    animation: wander var(--dur3) ease infinite alternate-reverse;
    animation-delay: -50s;
}

@keyframes wander {
  0% {
    transform: translate(-100%, -100%) rotate(0) scale(1.5);
  }
  50% {
    transform: translate(0, 0) rotate(180deg) scale(1);
  }
  100% {
    transform: translate(-100%, -100%) rotate(0) scale(1.5);
  }
}

@keyframes pulse-grid {
  0% {
    grid-column-gap: 0vw;
    grid-template-columns: 1fr 1.2fr .9fr .9fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  50% {
    grid-column-gap: 2vw;
    grid-template-columns: .8fr 1fr 1fr 1.2fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  100% {
    grid-column-gap: 0vw;
    grid-template-columns: 1fr 1.2fr .9fr .9fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 600px) {
    main > .card {
        max-width: none;
        width: 100%;
        border-radius: 0;
        padding: var(--w7) 10vw;
        align-items: center;
    }

    main > .card > * {
        max-width: 54ch;
    }

    .card .actions {
        justify-content: flex-start;
    }

    .headline {
        font-size: 3rem;
        font-weight: 400;
        max-width: 100%;
        line-height: 1;
    }

    .branded.card {
        backdrop-filter: blur(10px);
        background: var(--color-glass);
        width: 100%;
        max-width: var(--w-page);
        border-radius: var(--radius-big);
        margin: var(--w6);
        flex-direction: row;
        padding: var(--w7) var(--w5);
        color: black;
        justify-content: flex-start;
        gap: 10vw;
    }

    .branded.card .header {
        position: static;
    }

    .branded.card .header svg {
        display: none;
    }

    .branded.card .header .logo {
        width: 14vw;
        height: auto;
        margin: var(--w6);
    }

    .avatar {
        border-radius: var(--radius-small);
        height: 300px;
        width: auto;
    }

    .cardset {
        padding: var(--w6);
    }

    .cardset > .card {
        max-width: none;
        flex: 1 1 400px;
        margin: 0;
        border-radius: var(--radius-big);
    }

    .cardset h2 {
        align-self: flex-start;
    }

    header {
        display: flex;
        justify-content: flex-start;
        gap: 10vw;
        align-items: center;
        width: 100%;
        backdrop-filter: blur(10px);
        background: var(--color-glass);
        max-width: var(--w-page);
        border-radius: var(--radius-big);
        margin-top: 2rem;
        margin-bottom: -60px;
        position: sticky;
        top: -1rem;
        left: 0;
        right: 0;
        z-index: 0;
        padding: 2rem;
    }

    header .logo {
        max-height: 160px;
    }

    header .headline {
        font-size: 42px;
        max-width: 500px;
        font-weight: 400;
    }

    background-blobs {
        display: grid;
    }

    nav {
        
    }

    .toc {
        right: 0;
    }

    .hero {
    }

    .hero img {
        height: auto;
        width: 64vw;
        margin: 60px 30px 30px;
        border-radius: var(--radius-big);
    }
 
    .hero .headline {
        text-align: left;
        position: absolute;
        right: var(--w1);
        bottom: 30px;
        font-size: 2vw;
        font-size: min(2.6vw, 3rem);
        font-size: clamp(1rem, 2.6vw, 3rem);
        font-weight: 300;
        animation: fadeIn 4s ease .5s;
        animation-fill-mode: forwards;
        opacity: 0;
        max-width: 30ch;
        padding: var(--w4);
        border-radius: var(--radius-small);
        backdrop-filter: blur(10px);
        background: var(--color-glass);
    }

    .hero .headline strong {
        font-weight: 400;
        color: currentColor;
        text-shadow: 0 0 3px rgba(255, 255, 255, .6);
    }

    main {
        --main-gap: var(--w6);
    }


    nav .toc {
        display: flex;
        border-bottom-left-radius: var(--radius-big);
    }

    menu-toggle, site-nav {
        display: none;
    }

}

@media screen and (max-width: 1200px) {
    .hero {
        margin-top: 0;
    }
}

h2 {
    scroll-margin-top: 10vh;
}

.page {
    --w-page: 1000px;

    margin: 5rem auto;
    padding: var(--w7);
    max-width: var(--w-page);
}

.page > main {
    align-items: flex-start;
    gap: var(--w4);
}

.page > main > * {
    margin: 0;
    max-width: 54ch;
}

.page hr {
    border-bottom: .25px solid currentColor;
    width: 50px;
    margin: 2rem 0;
}