@font-face {
    font-family: 'Codec Pro';
    src: url('./fonts/codec-pro/CodecPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-ordinal: initial;
            --tw-slashed-zero: initial;
            --tw-numeric-figure: initial;
            --tw-numeric-spacing: initial;
            --tw-numeric-fraction: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-ease: initial
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: "Codec Pro", "Inter", system-ui, -apple-system, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --ease-out: cubic-bezier(.16, 1, .3, 1);
        --ease-in-out: cubic-bezier(.4, 0, .2, 1);
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --color-bg: #f8f8fa;
        --color-surface: #fff;
        --color-ink: #0c0c0e;
        --color-muted: #5a5a6a;
        --color-subtle: #9898a8;
        --color-accent: #6c47ff;
        --color-accent-lt: #8b6eff;
        --color-border: #00000012;
        --color-border-md: #0000001f
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

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

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .visible {
        visibility: visible
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .container {
        width: 100%
    }

    @media(min-width:40rem) {
        .container {
            max-width: 40rem
        }
    }

    @media(min-width:48rem) {
        .container {
            max-width: 48rem
        }
    }

    @media(min-width:64rem) {
        .container {
            max-width: 64rem
        }
    }

    @media(min-width:80rem) {
        .container {
            max-width: 80rem
        }
    }

    @media(min-width:96rem) {
        .container {
            max-width: 96rem
        }
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .resize {
        resize: both
    }

    .rounded {
        border-radius: .25rem
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .uppercase {
        text-transform: uppercase
    }

    .tabular-nums {
        --tw-numeric-spacing: tabular-nums;
        font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, )
    }

    .shadow {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

    .filter {
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .backdrop-filter {
        -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
        backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, )
    }

    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }
}

*,
:before,
:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    font-size: 16px
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-ink);
    line-height: 1.6;
    overflow-x: hidden
}

::selection {
    background: var(--color-accent);
    color: #fff
}

::-webkit-scrollbar {
    width: 4px
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-md);
    border-radius: 4px
}

.wrap {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem
}

.section {
    padding-top: 120px;
    padding-bottom: 120px
}

.label {
    display: inline-block;
    padding: 0.45rem 1.1rem;
    background: rgba(108, 71, 255, 0.08);
    border-radius: 9999px;
    border: 1px solid rgba(108, 71, 255, 0.22);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-size: .78rem;
    font-weight: 700
}

.gradient-text {
    -webkit-text-fill-color: transparent;
    color: #0000;
    background: linear-gradient(90deg, #bfa8ff, #1e0060);
    -webkit-background-clip: text;
    background-clip: text
}

.divider {
    border: none;
    border-top: 1px solid var(--color-border)
}

.btn-accent {
    background: var(--color-accent);
    color: #fff;
    transition: background .5s var(--ease-out), box-shadow .6s var(--ease-out), transform .6s var(--ease-out);
    white-space: nowrap;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-sans);
    will-change: transform, box-shadow;
    border: none;
    border-radius: 9999px;
    outline: none;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .875rem 2rem;
    text-decoration: none;
    display: inline-flex;
    box-shadow: 0 0 0 4px #6c47ff24, 0 4px 18px #6c47ff33
}

.btn-accent:hover {
    background: var(--color-accent-lt);
    animation: btn-pulse 1.2s cubic-bezier(.45, 0, .55, 1) infinite
}

@keyframes btn-pulse {

    0%,
    to {
        transform: scale(1);
        box-shadow: 0 0 0 4px #6c47ff24, 0 4px 18px #6c47ff33
    }

    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 14px #6c47ff17, 0 12px 45px #6c47ff61
    }
}

@keyframes page-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes green-ripple {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}

@keyframes green-blink {

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

    50% {
        transform: scale(0.85);
        opacity: 0.85;
    }
}

.animate-page-in {
    animation: page-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


.btn-ghost {
    color: var(--color-muted);
    border: 1px solid var(--color-border-md);
    transition: color .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 500;
    font-family: var(--font-sans);
    background: 0 0;
    border-radius: 9999px;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    text-decoration: none;
    display: inline-flex;
    box-shadow: 0 0 0 3px #6c47ff0d
}

.btn-ghost:hover {
    color: var(--color-ink);
    border-color: #6c47ff66;
    transform: translateY(-1px);
    box-shadow: 0 0 0 6px #6c47ff14, 0 4px 16px #6c47ff1a
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
    border-radius: 16px
}

.card:hover {
    border-color: #6c47ff40;
    transform: translateY(-3px);
    box-shadow: 0 12px 40px #0000000f
}

.fade-up {
    opacity: 0;
    transform: translateY(24px)
}

.fade-up.visible {
    opacity: 1;
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transform: translateY(0)
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}
@media(max-width:768px) {
  header { padding: 0.3rem 1rem !important; top: 0 !important; width: 100% !important; max-width: 100vw !important; left: 50% !important; transform: translateX(-50%) !important; border-radius: 0 !important; box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important }
  header > div { grid-template-columns: auto 1fr auto !important; gap: 0.75rem !important; align-items: center !important }
  header img { height: 56px !important }
  header nav { display: none !important }
  header > div > div:last-child { display: none !important }
  .section { padding-top: 80px !important; padding-bottom: 80px !important }
  #home { padding-top: 140px !important; padding-bottom: 60px !important; min-height: auto !important }
  .dasv-m-stack { grid-template-columns: 1fr !important; gap: 2rem !important }
  footer { padding: 4rem 1.5rem 2rem !important }
  footer > div > div:last-of-type { flex-direction: column !important; align-items: center !important; text-align: center }
  .dasv-m-page { padding-top: 120px !important; padding-bottom: 60px !important; min-height: auto !important }
  .wrap { padding-left: 1.25rem !important; padding-right: 1.25rem !important }
  .legal-content { padding: 0 1rem !important }
  .legal-content h1 { font-size: 2rem !important; word-break: break-word }
  .dasv-m-col { flex-direction: column !important; align-items: flex-start !important }
  #about [data-who][style*="flex"] { flex-wrap: wrap !important; gap: 1.5rem !important }
  div[style*="border-radius: 9999px"][style*="display: flex"][style*="align-items: center"] { flex-wrap: wrap !important }
  body { overflow-x: hidden !important }
  header .btn-accent { display: none !important }
  .dasv-m-newsletter { flex-direction: column !important; gap: 0.75rem !important }
  .dasv-m-newsletter .btn-accent { width: 100% !important; justify-content: center !important; text-align: center !important; border-radius: 9999px !important; font-size: 0.9rem !important; padding: 0.875rem 1.5rem !important }
  .dasv-m-newsletter > div { width: 100% !important }
  #home a.btn-accent { font-size: 0.855rem !important; padding: 0.97rem 2.28rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important; }
  #home h1 { font-size: clamp(2.4rem, 8.5vw, 2.7rem) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
  #home > div > div { padding: 0 1.25rem !important; }
  .dasv-m-subtitles { flex-direction: row !important; gap: 0.75rem !important; flex-wrap: nowrap !important; align-items: center !important }
  .dasv-m-subtitles p { font-size: 1rem !important }
  .dasv-hamburger { display: flex !important; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 8px; z-index: 301; position: relative; justify-self: end }
  .dasv-hamburger span { display: block; width: 22px; height: 2px; background: var(--color-ink); border-radius: 2px; transition: all 0.3s ease; position: relative }
  .dasv-hamburger span::before, .dasv-hamburger span::after { content: ""; position: absolute; width: 22px; height: 2px; background: var(--color-ink); border-radius: 2px; transition: all 0.3s ease; left: 0 }
  .dasv-hamburger span::before { top: -7px }
  .dasv-hamburger span::after { top: 7px }
  .dasv-hamburger.open span { background: transparent }
  .dasv-hamburger.open span::before { transform: rotate(45deg); top: 0 }
  .dasv-hamburger.open span::after { transform: rotate(-45deg); top: 0 }
  .dasv-mobile-nav { position: fixed; top: 0; right: -100%; width: 75vw; max-width: 300px; height: 100vh; height: 100dvh; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -4px 0 30px rgba(0,0,0,0.1); z-index: 300; padding: 90px 2rem 2rem; transition: right 0.35s cubic-bezier(0.16,1,0.3,1); display: flex; flex-direction: column; gap: 0 }
  .dasv-mobile-nav.open { right: 0 }
  .dasv-mobile-nav a, .dasv-mobile-nav button.dasv-mn-item { display: block; width: 100%; text-align: left; padding: 1rem 0; font-size: 1.05rem; font-weight: 500; color: var(--color-muted); text-decoration: none; border: none; background: none; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.05); transition: color 0.2s; font-family: inherit; letter-spacing: -0.01em }
  .dasv-mobile-nav a:last-child, .dasv-mobile-nav button.dasv-mn-item:last-child { border-bottom: none }
  .dasv-mobile-nav a:active, .dasv-mobile-nav button.dasv-mn-item:active { color: var(--color-accent) }
  .dasv-mobile-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 299; opacity: 0; transition: opacity 0.3s ease }
  .dasv-mobile-overlay.open { display: block; opacity: 1 }
  .event-row.dasv-tile { position: relative !important; padding-bottom: 4.5rem !important; }
  .event-category { position: absolute !important; bottom: 1.5rem !important; left: 1.5rem !important; margin: 0 !important; }
  .event-arrow { position: absolute !important; bottom: 1.5rem !important; right: 1.5rem !important; margin: 0 !important; }
}
@media (min-width: 769px) {
  .dasv-hamburger, .dasv-mobile-nav, .dasv-mobile-overlay {
    display: none !important;
  }
}

/* Hero heading: hide forced <br> line-breaks at every screen size so the
   heading text reflows naturally via clamp() font-size. The word
   "Studentenvereinigung" is now a single unhyphenated word in the markup,
   so there is no stray hyphen to display in the middle of a line. */
#home h1 br { display: none !important; }

/* Heading is capped at 780px = 1.3 × the paragraph's 600px max-width,
   so it is always exactly 30% wider than the body copy below it — at
   every screen size. */
#home h1 { max-width: 780px; margin-left: auto; margin-right: auto; overflow-wrap: break-word; }

/* Auto-hyphenation only for German — English headings never hyphenate. */
:lang(de) #home h1 { hyphens: auto; -webkit-hyphens: auto; }
:lang(en) #home h1 { hyphens: none; -webkit-hyphens: none; }

.dasv-tile {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dasv-tile:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 48px rgba(0,0,0,0.09);
}
@media (max-width: 768px) {
  .dasv-tile {
    padding: 1.5rem;
  }
}

/* Hero button delayed fade-in */
.hero-btn-wrap {
  opacity: 0;
  animation: heroButtonIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}
@keyframes heroButtonIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}