@layer reset, base, components, sections, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 170px; }
  body, h1, h2, h3, p, ul, ol { margin: 0; }
  ul, ol { padding: 0; }
  img { display: block; max-width: 100%; }
  button, input, select { font: inherit; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  :root {
    --bg: oklch(17% 0.035 310);
    --bg-deep: oklch(11% 0.028 305);
    --surface: oklch(22% 0.045 308);
    --surface-soft: oklch(29% 0.05 308);
    --ink: oklch(96% 0.018 83);
    --muted: oklch(76% 0.032 310);
    --accent: oklch(78% 0.18 72);
    --accent-soft: oklch(86% 0.11 78);
    --violet: oklch(61% 0.22 312);
    --line: color-mix(in oklch, var(--ink) 14%, transparent);
    --display: "Arial Black", "Segoe UI Black", "Helvetica Neue", sans-serif;
    --body: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-sm: 14px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --page: min(1180px, calc(100vw - 48px));
    --mouse-x: 50%;
    --mouse-y: 30%;
  }

  body {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--ink);
    background:
      radial-gradient(ellipse at 14% 14%, rgba(91, 34, 119, .2), transparent 38rem),
      radial-gradient(ellipse at 86% 45%, rgba(68, 25, 91, .17), transparent 44rem),
      radial-gradient(ellipse at 42% 92%, rgba(98, 31, 124, .11), transparent 46rem),
      linear-gradient(145deg, #030105 0%, #0d0512 27%, #180a20 51%, #09030d 76%, #020103 100%);
    background-attachment: fixed;
    font-family: var(--body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  body:has(> .site-footer) { padding-bottom: 0; }

  body::selection {
    color: var(--bg-deep);
    background: var(--accent);
  }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.055em;
  }

  h2 {
    font-size: clamp(3rem, 6vw, 6.5rem);
  }

  h2 em, h1 span {
    color: var(--accent);
    font-style: normal;
  }

  p { color: var(--muted); }

  select {
    color-scheme: dark;
    cursor: pointer;
  }

  select option {
    color: var(--ink);
    background: #190c20;
  }

  select option:checked {
    color: #120818;
    background: var(--accent);
  }

  @supports (appearance: base-select) {
    select,
    ::picker(select) {
      appearance: base-select;
    }

    ::picker(select) {
      margin-block-start: 8px;
      padding: 7px;
      color: var(--ink);
      background:
        radial-gradient(circle at 100% 0, color-mix(in oklch, var(--accent) 9%, transparent), transparent 18rem),
        linear-gradient(145deg, #26132f, #100714);
      border: 1px solid color-mix(in oklch, var(--accent) 55%, var(--line));
      border-radius: 15px;
      box-shadow: 0 28px 80px rgba(0, 0, 0, .72);
    }

    select option {
      min-height: 42px;
      padding: 10px 12px;
      background: transparent;
      border-radius: 9px;
    }

    select option:hover,
    select option:focus-visible {
      background: color-mix(in oklch, var(--accent) 15%, transparent);
    }

    select option:checked {
      color: #120818;
      background: var(--accent);
      font-weight: 850;
    }
  }

  .juhu-word {
    display: inline !important;
    margin: 0 !important;
    color: var(--accent) !important;
    font: inherit;
  }

  .skip-link {
    position: relative;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: var(--bg);
    background: var(--accent);
    border-radius: 8px;
    transform: translateY(-160%);
  }

  .skip-link:focus { transform: translateY(0); }

  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
  }

  .section {
    width: var(--page);
    margin-inline: auto;
    padding-block: clamp(42px, 5vw, 76px);
  }

  :where(section[id], main[id]) { scroll-margin-top: 0; }

  .section-kicker,
  .eyebrow {
    color: var(--accent-soft);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
  }
}

@layer components {
  .site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    min-height: 86px;
    padding: 18px clamp(16px, 2.1vw, 34px);
    background: color-mix(in oklch, #120918 74%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
    box-shadow:
      inset 0 -1px rgba(255, 255, 255, .035),
      0 12px 30px rgba(0, 0, 0, .42),
      0 34px 82px rgba(0, 0, 0, .58);
    backdrop-filter: blur(28px) saturate(1.26);
    transition: min-height .3s ease, background .3s ease, backdrop-filter .3s ease;
  }

  .site-header.is-scrolled {
    background: color-mix(in oklch, #100714 84%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(25px) saturate(1.2);
  }

  .brand {
    display: inline-flex;
    align-items: center;
  }

  .brand-logo {
    gap: 0;
    width: max-content;
    height: 47px;
    overflow: hidden;
    align-items: stretch;
    justify-self: start;
    border: 2px solid var(--accent);
    border-radius: 11px;
    background: #120818;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
    letter-spacing: 0;
  }

  .brand-logo-juhu {
    display: inline-grid;
    width: 96px;
    height: 43px;
    padding: 0;
    place-items: center;
    color: var(--accent);
    background: #120818;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--accent);
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.09em;
  }

  .brand-logo-party {
    display: inline-grid;
    width: 94px;
    height: 37px;
    margin: 3px;
    padding: 0;
    place-items: center;
    color: #fff;
    background: var(--accent);
    border: 3px solid #120818;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.09em;
    text-transform: uppercase;
    text-shadow:
      0 2px 0 rgba(53, 22, 0, .46),
      0 4px 9px rgba(0, 0, 0, .48);
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    justify-self: end;
  }

  .menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 10px;
    place-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    background: var(--ink);
    border-radius: 99px;
    transition: transform .2s ease, opacity .2s ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mobile-auth-actions { display: none; }

  .login-link {
    display: inline-grid;
    width: 132px;
    min-height: 43px;
    padding: 0 15px;
    color: var(--ink);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: .79rem;
    font-weight: 760;
    place-items: center;
  }

  .register-link {
    display: inline-grid;
    width: 132px;
    min-height: 43px;
    padding: 0 16px;
    color: #fff;
    background: var(--accent);
    border: 2px solid #0b0610;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: .79rem;
    font-weight: 820;
    place-items: center;
  }

  .register-link:hover {
    background: var(--ink);
    border-color: var(--ink);
  }

  .login-link.is-session-button {
    color: #fff;
    background: var(--accent);
    border: 2px solid #0b0610;
  }

  .login-link:hover {
    color: var(--bg-deep);
    background: var(--accent);
    border-color: var(--accent);
  }

  body.has-login-popup { overflow: hidden; }

  .login-popup-layer {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    padding: 20px;
    place-items: center;
    background: color-mix(in oklch, var(--bg-deep) 68%, transparent);
    backdrop-filter: blur(12px);
    animation: popupLayerIn .2s ease;
  }

  .login-popup-layer[hidden] { display: none; }

  .login-popup-layer::before {
    position: fixed;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: min(760px, calc(100vw - 64px));
    height: min(760px, calc(100vh - 76px));
    background:
      linear-gradient(145deg, rgba(255, 168, 0, .055), rgba(95, 42, 111, .08));
    border: 1px solid rgba(255, 168, 0, .22);
    border-radius: 42px;
    box-shadow:
      0 45px 120px rgba(0, 0, 0, .36),
      inset 0 1px rgba(255, 255, 255, .035);
    content: "";
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-4deg);
  }

  .login-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    width: min(700px, calc(100vw - 40px));
    height: min(820px, calc(100vh - 40px));
    overflow: hidden;
    background: #120918;
    border: 1px solid color-mix(in oklch, var(--accent) 45%, var(--line));
    border-radius: 24px;
    box-shadow:
      0 40px 110px rgba(0, 0, 0, .65),
      0 0 0 1px rgba(255, 255, 255, .04);
    flex-direction: column;
    transform: translate(-50%, -50%);
    animation: popupWindowIn .24s ease;
    z-index: 1;
  }

  .login-popup-bar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 10px 14px 10px 16px;
    background: linear-gradient(90deg, #170b1e, #21102a);
    border-bottom: 1px solid var(--line);
    cursor: grab;
    user-select: none;
    touch-action: none;
  }

  .login-popup-bar:active { cursor: grabbing; }

  .login-popup-bar > div {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 11px;
    min-width: 0;
  }

  .login-popup-mark {
    display: inline-flex;
    width: 130px;
    height: 44px;
    flex: 0 0 auto;
    overflow: hidden;
    align-items: center;
    gap: 0;
    background: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 9px;
  }

  .login-popup-mark i,
  .login-popup-mark b {
    display: grid;
    height: 100%;
    place-items: center;
    font: 900 .93rem/1 var(--display);
    letter-spacing: -.08em;
    font-style: normal;
  }

  .login-popup-mark i {
    width: 65px;
    color: var(--accent);
    background: #120818;
  }

  .login-popup-mark b {
    width: 61px;
    height: 32px;
    margin: 2px;
    color: #fff;
    box-shadow: inset 0 0 0 2px #0b0610;
    text-shadow: 0 2px 0 rgba(53, 22, 0, .46), 0 4px 9px rgba(0, 0, 0, .48);
  }

  .login-popup-bar p { display: grid; min-width: 0; margin: 0; }
  .login-popup-bar p { min-height: 44px; align-content: center; }
  .login-popup-bar strong { color: var(--ink); font-size: .9rem; line-height: 1.15; }
  .login-popup-bar small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
  .login-popup-drag-note { color: color-mix(in oklch, var(--muted) 68%, transparent); font-size: .62rem; }

  .login-popup-bar > button {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    color: var(--ink);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.45rem;
    line-height: 1;
  }

  .login-popup-frame {
    width: 100%;
    min-height: 0;
    border: 0;
    flex: 1;
    background: #120918;
  }

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

  @keyframes popupWindowIn {
    from { opacity: 0; transform: translate(-50%, -47%) scale(.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  .main-nav {
    display: flex;
    justify-content: center;
    gap: 6px;
    justify-self: center;
  }

  .main-nav a {
    display: inline-flex;
    align-items: center;
    width: 150px;
    min-height: 46px;
    padding: 0 clamp(10px, 1.25vw, 17px);
    color: var(--ink);
    background: rgba(255, 255, 255, .022);
    border: 1px solid color-mix(in oklch, var(--accent) 68%, transparent);
    border-radius: 10px;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .035),
      0 8px 18px rgba(0, 0, 0, .42),
      0 18px 42px rgba(0, 0, 0, .28);
    justify-content: center;
    font-size: .94rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
  }

  .main-nav > a:nth-child(1),
  .main-nav > a:nth-child(2),
  .main-nav > a:nth-child(3),
  .main-nav > a:nth-child(4) { width: 150px; }

  .main-nav a:hover {
    color: var(--ink);
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    border-color: color-mix(in oklch, var(--accent) 55%, transparent);
    transform: translateY(-1px);
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 58px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  }

  .button:hover { transform: translateY(-3px); }

  .button-small { min-height: 44px; padding: 0 20px; font-size: .82rem; }

  .button-primary {
    color: var(--bg-deep);
    background: var(--accent);
    box-shadow: 0 14px 50px color-mix(in oklch, var(--accent) 25%, transparent);
  }

  .button-primary:hover {
    background: var(--accent-soft);
    box-shadow: 0 18px 60px color-mix(in oklch, var(--accent) 36%, transparent);
  }

  .button-secondary,
  .button-ghost {
    color: var(--ink);
    background: color-mix(in oklch, var(--ink) 7%, transparent);
    border-color: var(--line);
    backdrop-filter: blur(12px);
  }

  .button-secondary:hover,
  .button-ghost:hover {
    background: color-mix(in oklch, var(--ink) 13%, transparent);
  }

  .button-light {
    color: var(--bg-deep);
    background: var(--ink);
  }

  .centered { text-align: center; }
}

@layer sections {
  .hero-stage {
    position: relative;
  }

  .hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    isolation: isolate;
    overflow: hidden;
    padding: 120px max(24px, calc((100vw - 1180px) / 2)) 80px;
  }

  .hero::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: clamp(220px, 34vh, 420px);
    background: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in oklch, var(--bg-deep) 28%, transparent) 32%,
      color-mix(in oklch, var(--bg-deep) 78%, transparent) 68%,
      var(--bg-deep) 100%
    );
    content: "";
    pointer-events: none;
  }

  .hero-media,
  .hero-photo,
  .hero-video,
  .hero-vignette {
    position: absolute;
    inset: 0;
  }

  .hero-media {
    z-index: -2;
    overflow: hidden;
    background: var(--bg-deep);
  }

  .hero-photo {
    inset: -4%;
    background: url("assets/hero-juhuparty.jpg") center center / cover no-repeat;
    transform: translate3d(calc((var(--mouse-x) - 50%) * -.018), calc((var(--mouse-y) - 50%) * -.018), 0) scale(1.06);
    filter: saturate(.92) contrast(1.04);
    opacity: 1;
    transition: opacity 1.6s ease, transform .1s linear;
  }

  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    filter: saturate(.92) contrast(1.04);
    transform: scale(1.015);
    transition: opacity 1.6s ease;
  }

  .hero-video.is-ready { opacity: 1; }
  .hero-media.is-video-ready .hero-photo { opacity: 0; }

  .hero-vignette {
    background:
      radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 0 20%, color-mix(in oklch, var(--bg-deep) 20%, transparent) 58%),
      linear-gradient(90deg, color-mix(in oklch, var(--bg-deep) 98%, transparent) 0%, color-mix(in oklch, var(--bg-deep) 76%, transparent) 35%, transparent 72%),
      linear-gradient(0deg, var(--bg-deep) 0%, transparent 35%);
  }

  .hero-progress {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: var(--scroll-progress, 0%);
    height: 3px;
    background: var(--accent);
  }

  .hero-content {
    width: min(570px, 42vw);
    padding-top: 30px;
  }

  .hero h1 {
    max-width: 570px;
    margin-top: 22px;
    font-size: clamp(4rem, 6.2vw, 6.4rem);
    text-shadow:
      0 3px 0 rgba(0, 0, 0, .54),
      0 10px 20px rgba(0, 0, 0, .42),
      0 28px 62px rgba(0, 0, 0, .58);
    text-wrap: balance;
  }

  .hero h1 span {
    text-shadow:
      0 3px 0 rgba(74, 36, 0, .62),
      0 12px 24px rgba(0, 0, 0, .44),
      0 30px 66px rgba(0, 0, 0, .6);
  }

  .hero-copy {
    max-width: 630px;
    margin-top: 30px;
    color: color-mix(in oklch, var(--ink) 76%, transparent);
    font-size: clamp(1rem, 1.45vw, 1.2rem);
    text-shadow: 0 3px 12px rgba(0, 0, 0, .88), 0 10px 28px rgba(0, 0, 0, .7);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
  }

  .promise-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin-top: 28px;
    list-style: none;
    color: color-mix(in oklch, var(--ink) 74%, transparent);
    font-size: .76rem;
    font-weight: 650;
  }

  .promise-list span { color: var(--accent); }

  .light-beam {
    position: absolute;
    top: -20%;
    width: 7%;
    height: 90%;
    opacity: .17;
    background: linear-gradient(to bottom, var(--accent), transparent);
    filter: blur(14px);
    mix-blend-mode: screen;
    transform: rotate(16deg);
    transform-origin: top;
  }

  .light-beam-one { right: 19%; animation: beam 7s ease-in-out infinite alternate; }
  .light-beam-two { right: 30%; animation: beam 9s 1.3s ease-in-out infinite alternate-reverse; }

  .confetti-field {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .page-confetti-field {
    position: fixed;
    z-index: 0;
    top: 72px;
  }

  .confetti {
    position: absolute;
    top: -4vh;
    left: var(--left);
    width: var(--size);
    height: calc(var(--size) * .38);
    opacity: var(--opacity);
    background: var(--color);
    animation: confettiFall var(--duration) var(--delay) linear infinite;
  }

  main { position: relative; z-index: 1; }

  .site-footer { position: relative; z-index: 1; }

  .planner-shell {
    position: absolute;
    z-index: 3;
    top: 180px;
    right: clamp(14px, 1.7vw, 28px);
    width: min(470px, calc(100% - 36px));
    margin: 0;
    padding: 16px;
    overflow: hidden;
    background:
      radial-gradient(circle at 88% 0, color-mix(in oklch, var(--accent) 10%, transparent), transparent 24rem),
      linear-gradient(145deg, rgba(40, 22, 49, .72), rgba(13, 7, 18, .76));
    border: 1px solid color-mix(in oklch, var(--ink) 17%, transparent);
    border-radius: 24px;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .07),
      0 38px 100px rgba(0, 0, 0, .46);
    backdrop-filter: blur(22px) saturate(1.14);
  }

  @media (min-width: 1051px) {
    .planner-shell {
      top: 50%;
      min-height: 394px;
      transform: translateY(-50%);
    }
  }

  @media (min-width: 981px) and (max-width: 1340px) {
    .main-nav a,
    .main-nav a:nth-child(n) {
      width: 126px;
      font-size: .78rem;
    }

    .header-actions > .register-link { display: none; }
  }

  .planner-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 7px;
  }

  .planner-heading h2 {
    max-width: 480px;
    font-size: clamp(1.72rem, 2.25vw, 2.35rem);
    line-height: .95;
  }
  .planner-heading p {
    max-width: 470px;
    padding-bottom: 0;
    font-size: .74rem;
    line-height: 1.5;
  }

  .planner-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
  }

  .planner-card label {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 58px;
    justify-content: center;
    padding: 8px 11px;
    background:
      linear-gradient(145deg, color-mix(in oklch, var(--surface-soft) 62%, transparent), color-mix(in oklch, var(--surface) 86%, transparent));
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: inset 0 1px color-mix(in oklch, var(--ink) 5%, transparent);
    transition: background .25s ease, box-shadow .25s ease;
    cursor: pointer;
  }

  .planner-card label:focus-within {
    z-index: 1;
    background:
      linear-gradient(145deg, color-mix(in oklch, var(--violet) 24%, var(--surface)), var(--surface));
    box-shadow:
      inset 0 0 0 1px color-mix(in oklch, var(--accent) 72%, transparent),
      inset 0 1px color-mix(in oklch, var(--ink) 8%, transparent);
  }

  .planner-card label > span {
    color: var(--muted);
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .planner-card input,
  .planner-card select {
    width: 100%;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: 0;
    font-weight: 700;
  }

  .planner-card select {
    color-scheme: dark;
    cursor: pointer;
  }

  .planner-card select option:disabled {
    color: color-mix(in oklch, var(--muted) 55%, transparent);
  }

  .planner-card input {
    caret-color: var(--accent);
  }

  .planner-card input::placeholder { color: color-mix(in oklch, var(--muted) 75%, transparent); }

  .planner-card input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .82;
    filter: invert(82%) sepia(67%) saturate(1736%) hue-rotate(343deg) brightness(102%);
    cursor: pointer;
  }

  .planner-submit {
    min-height: 58px;
    border-radius: 13px;
  }

  .form-note {
    display: none;
    grid-column: 1 / -1;
    padding: 10px 20px;
    color: var(--accent-soft);
    background: var(--surface);
    font-size: .78rem;
  }

  .form-note.is-visible { display: block; }

  .planner-results {
    margin-top: 18px;
  }

  .planner-results[hidden] { display: none; }

  .planner-results-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    background: color-mix(in oklch, var(--surface) 88%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .planner-results-head small,
  .planner-results-head strong { display: block; }

  .planner-results-head small {
    color: var(--accent);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .planner-results-head strong {
    margin-top: 5px;
    font-family: var(--display);
    font-size: clamp(1.3rem, 2vw, 2rem);
  }

  .planner-results-head span {
    color: var(--muted);
    font-size: .82rem;
    text-align: right;
  }

  .planner-match-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
  }

  .planner-match-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    color: var(--ink);
    background: color-mix(in oklch, var(--surface-soft) 82%, transparent);
    border: 1px solid var(--line);
    border-radius: 18px;
  }

  .planner-match-card img,
  .planner-match-placeholder {
    width: 64px;
    height: 78px;
    object-fit: cover;
    background: linear-gradient(145deg, var(--accent), color-mix(in oklch, var(--violet) 60%, var(--bg-deep)));
    border-radius: 13px;
  }

  .planner-match-placeholder {
    display: grid;
    place-items: center;
    color: var(--bg-deep);
    font-family: var(--display);
    font-size: 1.4rem;
  }

  .planner-match-copy small,
  .planner-match-copy strong,
  .planner-match-copy > span { display: block; }
  .planner-match-copy small { color: var(--accent); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
  .planner-match-copy strong { margin-top: 3px; font-family: var(--display); font-size: 1.05rem; }
  .planner-match-copy > span { margin-top: 2px; color: var(--muted); font-size: .7rem; }

  .planner-match-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
    list-style: none;
  }

  .planner-match-reasons li {
    padding: 4px 6px;
    color: color-mix(in oklch, var(--ink) 84%, transparent);
    background: color-mix(in oklch, var(--ink) 5%, transparent);
    border-radius: 999px;
    font-size: .55rem;
  }

  .planner-match-action {
    width: 100%;
    min-height: 38px;
    margin-top: 12px;
    padding: 8px 10px;
    color: var(--bg-deep);
    background: var(--accent);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-size: .64rem;
    font-weight: 850;
  }

  .planner-registration-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 12px;
    padding: 18px 20px;
    background:
      radial-gradient(circle at 100% 0, color-mix(in oklch, var(--accent) 13%, transparent), transparent 18rem),
      color-mix(in oklch, var(--surface) 90%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent) 46%, var(--line));
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .3);
  }

  .planner-registration-callout div { display: grid; }
  .planner-registration-callout small { color: var(--accent); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
  .planner-registration-callout strong { margin-top: 3px; }
  .planner-registration-callout span { margin-top: 2px; color: var(--muted); font-size: .72rem; }
  .planner-registration-callout button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    color: var(--bg-deep);
    background: var(--accent);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 850;
  }

  .ticker {
    overflow: hidden;
    padding-block: 22px;
    color: #ffd66f;
    background:
      linear-gradient(180deg, rgba(255, 219, 117, .08), transparent 30%),
      linear-gradient(100deg, #100713, #24131f 48%, #0d0611);
  }

  .ticker-top {
    position: fixed;
    z-index: 90;
    top: 94px;
    right: 0;
    left: 0;
    padding-block: 12px;
    border-top: 1px solid rgba(255, 215, 112, .62);
    border-bottom: 1px solid rgba(118, 69, 4, .82);
    box-shadow:
      inset 0 2px 0 rgba(255, 238, 184, .12),
      inset 0 -7px 14px rgba(55, 24, 0, .34),
      0 12px 30px rgba(0, 0, 0, .46),
      0 34px 68px rgba(0, 0, 0, .56);
  }

  .ticker-track {
    display: flex;
    width: max-content;
    align-items: center;
    font-family: var(--display);
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: -.04em;
    text-transform: uppercase;
    background: linear-gradient(
      180deg,
      #fff5bf 0%,
      #ffd766 26%,
      #f4a300 52%,
      #fff0a1 72%,
      #b96a00 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow:
      0 1px 0 rgba(255, 249, 201, .36),
      0 3px 0 rgba(99, 48, 0, .9),
      0 7px 13px rgba(0, 0, 0, .82),
      0 0 18px rgba(255, 174, 0, .18);
    white-space: nowrap;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    animation: ticker 55s linear infinite;
  }

  .ticker-set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 28px;
    padding-right: 28px;
  }
  .ticker-track b { font-size: .75em; }

  .categories {
    position: relative;
    isolation: isolate;
    background: transparent;
  }

  .categories.section {
    padding-top: clamp(28px, 3.5vw, 48px);
  }

  .categories::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: calc((100vw - 100%) / -2);
    left: calc((100vw - 100%) / -2);
    height: clamp(300px, 38vw, 520px);
    background: linear-gradient(
      to bottom,
      #060308 0%,
      color-mix(in oklch, var(--bg-deep) 94%, #16091d) 20%,
      color-mix(in oklch, var(--bg-deep) 58%, transparent) 62%,
      transparent 100%
    );
    content: "";
    pointer-events: none;
  }

  .section-intro { max-width: 950px; }
  .section-intro h2 { margin-top: 22px; }
  .section-intro > p:last-child { max-width: 760px; margin-top: 20px; }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 38px;
  }

  .category-card {
    --card-color: var(--accent);
    position: relative;
    min-height: 310px;
    overflow: hidden;
    padding: 26px;
    isolation: isolate;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: transform .35s ease, border-color .35s ease;
  }

  .category-card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--bg-deep) 94%, transparent) 0%, color-mix(in oklch, var(--bg-deep) 72%, transparent) 54%, color-mix(in oklch, var(--bg-deep) 32%, transparent) 100%),
      linear-gradient(0deg, color-mix(in oklch, var(--bg-deep) 72%, transparent), transparent 55%);
    content: "";
    pointer-events: none;
  }

  .category-card:hover {
    border-color: color-mix(in oklch, var(--accent) 60%, var(--line));
    transform: translateY(-8px);
  }

  .category-media {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.01;
    filter: grayscale(1) saturate(0) brightness(.78) contrast(1.12);
    transition: scale .8s cubic-bezier(.2, .75, .25, 1), filter .65s ease;
  }

  .category-card:hover .category-media,
  .category-card:focus-visible .category-media {
    filter: grayscale(0) saturate(1.08) brightness(1.02) contrast(1.02);
    scale: 1.06;
  }

  .category-dj,
  .category-live,
  .category-voice,
  .category-show { --card-color: var(--accent); }

  .category-number {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
  }

  .category-icon {
    position: absolute;
    top: 23px;
    right: 26px;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: var(--card-color);
    background:
      radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .2), transparent 26%),
      linear-gradient(145deg, rgba(39, 20, 48, .94), rgba(7, 3, 10, .92));
    border: 1px solid color-mix(in oklch, var(--card-color) 72%, transparent);
    border-radius: 17px;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .14),
      inset 0 -8px 16px rgba(0, 0, 0, .28),
      0 10px 18px rgba(0, 0, 0, .55),
      0 0 25px color-mix(in oklch, var(--card-color) 21%, transparent);
    font-size: 2rem;
    line-height: 1;
    text-shadow:
      0 2px 0 rgba(0, 0, 0, .8),
      0 0 14px color-mix(in oklch, var(--card-color) 72%, transparent);
    transform: perspective(180px) rotateX(7deg) rotateY(-7deg);
    animation: categoryIconFloat 4.8s ease-in-out infinite;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }

  .category-card:nth-child(3n + 2) .category-icon { animation-delay: -1.6s; }
  .category-card:nth-child(3n) .category-icon { animation-delay: -3.2s; }
  .category-card:hover .category-icon,
  .category-card:focus-visible .category-icon {
    border-color: var(--card-color);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .18),
      inset 0 -8px 16px rgba(0, 0, 0, .22),
      0 16px 26px rgba(0, 0, 0, .62),
      0 0 34px color-mix(in oklch, var(--card-color) 38%, transparent);
    transform: perspective(180px) rotateX(0) rotateY(0) translateY(-4px) scale(1.08);
  }

  @keyframes categoryIconFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
  }

  .category-card h3 {
    margin-top: 82px;
    font-size: clamp(1.8rem, 2.7vw, 3rem);
  }

  .category-card p { max-width: 330px; margin-top: 12px; font-size: .9rem; }

  .card-link {
    position: absolute;
    bottom: 23px;
    left: 26px;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 800;
  }

  .card-link b { color: var(--card-color); }

  .category-icon {
    width: 78px;
    height: 78px;
    background-color: transparent;
    background-image: url("assets/community-icons-gold-sprite-v1.png");
    background-repeat: no-repeat;
    background-size: 400% 300%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 11px 9px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255,173,0,.32));
    font-size: 0;
  }
  .category-card:nth-child(1) .category-icon{background-position:0 0}.category-card:nth-child(2) .category-icon{background-position:33.333% 0}.category-card:nth-child(3) .category-icon{background-position:66.667% 0}.category-card:nth-child(4) .category-icon{background-position:100% 0}
  .category-card:nth-child(5) .category-icon{background-position:0 50%}.category-card:nth-child(6) .category-icon{background-position:33.333% 50%}.category-card:nth-child(7) .category-icon{background-position:66.667% 50%}.category-card:nth-child(8) .category-icon{background-position:100% 50%}
  .category-card:nth-child(9) .category-icon{background-position:0 100%}.category-card:nth-child(10) .category-icon{background-position:33.333% 100%}.category-card:nth-child(11) .category-icon{background-position:66.667% 100%}.category-card:nth-child(12) .category-icon{background-position:100% 100%}

  .process {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 0;
    align-items: stretch;
    margin-block: clamp(62px, 7.5vw, 104px);
    padding-block: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 12% 15%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 26rem),
      color-mix(in oklch, var(--surface) 58%, var(--bg-deep));
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .22);
  }

  .process-sticky {
    position: relative;
    top: auto;
    align-self: stretch;
    padding: clamp(38px, 5vw, 62px);
    border-right: 1px solid var(--line);
  }

  .process-sticky h2 { margin-top: 20px; font-size: clamp(3.2rem, 5.3vw, 5.6rem); }
  .process-sticky > p:last-child { max-width: 440px; margin-top: 30px; }

  .process-list {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .process-list li {
    display: grid;
    grid-template-columns: clamp(88px, 8vw, 126px) 1fr;
    align-content: center;
    gap: 24px;
    min-height: 0;
    padding: clamp(30px, 4vw, 46px);
    border-top: 1px solid var(--line);
  }

  .process-list li:first-child { border-top: 0; }
  .process-list li:last-child { border-bottom: 1px solid var(--line); }
  .process-list li > span {
    align-self: start;
    color: var(--accent);
    font-family: var(--display);
    font-size: clamp(3.35rem, 5.2vw, 5.6rem);
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.09em;
    text-shadow:
      0 5px 0 rgba(76, 34, 0, .78),
      0 14px 28px rgba(0, 0, 0, .54),
      0 0 30px color-mix(in oklch, var(--accent) 23%, transparent);
    transform: translateY(4px);
  }
  .process-list h3 { font-size: clamp(2rem, 3.4vw, 3.4rem); }
  .process-list p { max-width: 560px; margin-top: 18px; }

  .features {
    width: 100%;
    padding-right: max(24px, calc((100vw - 1180px) / 2));
    padding-left: max(24px, calc((100vw - 1180px) / 2));
    background: transparent;
  }

  .feature-stage {
    display: grid;
    gap: 20px;
    margin-top: 54px;
  }

  .feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .feature:nth-child(even) .feature-visual { order: 2; }

  .feature-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 420px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--feature-color) 25%, transparent), transparent 55%),
      var(--bg-deep);
  }

  .feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 6vw, 80px);
  }

  .feature-tag {
    align-self: flex-start;
    padding: 8px 12px;
    color: var(--feature-color);
    background: color-mix(in oklch, var(--feature-color) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--feature-color) 35%, transparent);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
  }

  .feature h3 { margin-top: 28px; font-size: clamp(2.4rem, 4vw, 4.5rem); }
  .feature p { max-width: 540px; margin-top: 24px; }
  .feature-match { --feature-color: var(--accent); }
  .feature-room { --feature-color: oklch(67% .22 328); }
  .feature-plan { --feature-color: oklch(75% .16 225); }
  .feature-connect { --feature-color: oklch(72% .2 345); }
  .feature-safe { --feature-color: oklch(72% .17 158); }

  .match-visual {
    display: block;
    padding: clamp(28px, 5vw, 58px);
  }

  .match-dna {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .match-dna span {
    padding: 7px 10px;
    color: var(--muted);
    background: color-mix(in oklch, var(--ink) 4%, transparent);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .62rem;
  }

  .match-artist-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    width: min(360px, 94%);
    margin: 34px auto 0;
    padding: 14px;
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent) 50%, var(--line));
    border-radius: 21px;
    box-shadow: 0 24px 70px color-mix(in oklch, #000 36%, transparent);
    animation: matchFloat 5s ease-in-out infinite;
  }

  .match-artist-card img {
    width: 78px;
    height: 92px;
    object-fit: cover;
    border-radius: 15px;
  }

  .match-artist-card small,
  .match-artist-card strong,
  .match-artist-card span { display: block; }
  .match-artist-card small { color: var(--accent); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
  .match-artist-card strong { margin-top: 3px; font-family: var(--display); font-size: 1.55rem; }
  .match-artist-card span { margin-top: 3px; color: var(--muted); font-size: .72rem; }

  .match-reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: min(420px, 100%);
    margin: 12px auto 0;
    list-style: none;
  }

  .match-reasons li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    color: var(--muted);
    background: color-mix(in oklch, var(--ink) 4%, transparent);
    border: 1px solid var(--line);
    border-radius: 11px;
    font-size: .62rem;
  }

  .match-reasons b {
    color: var(--accent);
    font-size: .58rem;
  }

  .match-scan {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 24px color-mix(in oklch, var(--accent) 75%, transparent);
    opacity: .45;
    animation: matchScan 5.2s ease-in-out infinite;
  }

  @keyframes matchFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }

  @keyframes matchScan {
    0%, 12% { top: 8%; opacity: 0; }
    28% { opacity: .5; }
    78% { opacity: .5; }
    94%, 100% { top: 92%; opacity: 0; }
  }

  .match-radar {
    position: relative;
    width: min(440px, 96%);
    aspect-ratio: 1;
    margin: 15px auto 0;
    overflow: hidden;
    background:
      radial-gradient(circle, rgba(255, 173, 0, .12), transparent 12%),
      radial-gradient(circle, rgba(255, 173, 0, .045), transparent 66%);
    border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
    border-radius: 50%;
    box-shadow:
      inset 0 0 70px rgba(0, 0, 0, .65),
      0 0 70px rgba(255, 173, 0, .08);
  }

  .radar-ring,
  .radar-cross,
  .radar-sweep,
  .radar-ping,
  .radar-node,
  .radar-score,
  .radar-glitter,
  .radar-celebration { position: absolute; }

  .radar-ring {
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 173, 0, .26);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .ring-one { width: 29%; }
  .ring-two { width: 58%; }
  .ring-three { width: 88%; }
  .radar-cross { background: rgba(255, 173, 0, .12); }
  .cross-horizontal { top: 50%; right: 6%; left: 6%; height: 1px; }
  .cross-vertical { top: 6%; bottom: 6%; left: 50%; width: 1px; }

  .radar-sweep {
    inset: 6%;
    overflow: hidden;
    border-radius: 50%;
    animation: radarRotate 4.6s linear infinite;
  }
  .radar-sweep::before {
    position: absolute;
    inset: 0 50% 50% 0;
    background: conic-gradient(from 10deg at 100% 100%, transparent 0 66deg, rgba(255, 173, 0, .42) 87deg, transparent 90deg);
    filter: blur(.2px);
    content: "";
    transform-origin: 100% 100%;
  }
  .radar-sweep::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    box-shadow: 0 0 18px var(--accent);
    content: "";
    transform-origin: left center;
  }

  .radar-ping {
    width: 11px;
    height: 11px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--accent);
  }
  .radar-ping::after {
    position: absolute;
    inset: -8px;
    border: 1px solid var(--accent);
    border-radius: inherit;
    content: "";
    animation: radarPulse 2.3s ease-out infinite;
  }
  .ping-one { top: 24%; left: 28%; }
  .ping-two { right: 21%; bottom: 29%; animation-delay: 1.1s; }

  .radar-node {
    z-index: 2;
    display: grid;
    min-width: 53px;
    min-height: 53px;
    padding: 5px;
    place-items: center;
    align-content: center;
    color: var(--ink);
    background: rgba(20, 10, 27, .9);
    border: 1px solid rgba(255, 173, 0, .38);
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .34);
    animation: radarNodeMoveA 6.2s ease-in-out infinite;
  }
  .radar-node b { color: var(--accent); font-size: 1rem; line-height: 1; }
  .radar-node small { margin-top: 3px; color: var(--muted); font-size: .45rem; font-weight: 800; }
  .node-dj { top: 9%; left: 43%; animation-name: radarNodeMoveA; }
  .node-live { top: 22%; right: 9%; animation: radarNodeMoveB 7.1s -1.2s ease-in-out infinite; }
  .node-food { right: 10%; bottom: 21%; animation: radarNodeMoveC 6.6s -2.4s ease-in-out infinite; }
  .node-karaoke { bottom: 8%; left: 43%; animation: radarNodeMoveB 7.6s -3.1s ease-in-out infinite reverse; }
  .node-tech { bottom: 21%; left: 9%; animation: radarNodeMoveC 6.9s -4.2s ease-in-out infinite reverse; }
  .node-location { top: 22%; left: 9%; animation: radarNodeMoveA 7.4s -5.1s ease-in-out infinite reverse; }

  .radar-score {
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    width: 122px;
    aspect-ratio: 1;
    place-items: center;
    align-content: center;
    background: rgba(12, 6, 16, .94);
    border: 2px solid var(--accent);
    border-radius: 50%;
    box-shadow:
      0 0 0 7px rgba(255, 173, 0, .035),
      0 0 45px rgba(255, 173, 0, .3);
    transform: translate(-50%, -50%);
  }
  .radar-score::before,
  .radar-score::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }
  .radar-score::before {
    inset: -9px;
    border: 1px solid rgba(255, 173, 0, .32);
    animation: scoreHalo 2.8s ease-in-out infinite;
  }
  .radar-score::after {
    inset: -18px;
    border: 1px dashed rgba(255, 173, 0, .18);
    animation: radarRotate 12s linear infinite;
  }
  .radar-score small {
    color: var(--accent);
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .radar-score strong {
    font-family: var(--display);
    font-size: 2.25rem;
    line-height: 1;
  }
  .radar-score strong b { font: inherit; }
  .radar-score strong span { color: var(--accent); font-size: .9rem; }

  .radar-glitter {
    z-index: 4;
    inset: 0;
    pointer-events: none;
  }
  .radar-glitter i {
    position: absolute;
    color: var(--accent);
    opacity: 0;
    filter: drop-shadow(0 0 8px var(--accent));
    font-style: normal;
    animation: radarSparkle 3.8s ease-in-out infinite;
  }
  .radar-glitter i:nth-child(1) { top: 17%; left: 32%; animation-delay: -.3s; }
  .radar-glitter i:nth-child(2) { top: 31%; right: 18%; animation-delay: -1.4s; }
  .radar-glitter i:nth-child(3) { right: 28%; bottom: 18%; animation-delay: -2.5s; }
  .radar-glitter i:nth-child(4) { bottom: 25%; left: 17%; animation-delay: -.8s; }
  .radar-glitter i:nth-child(5) { top: 12%; right: 36%; animation-delay: -3.1s; }
  .radar-glitter i:nth-child(6) { top: 44%; left: 12%; animation-delay: -1.9s; }
  .radar-glitter i:nth-child(7) { right: 10%; bottom: 40%; animation-delay: -2.2s; }
  .radar-glitter i:nth-child(8) { bottom: 12%; left: 38%; animation-delay: -3.5s; }

  .radar-celebration {
    z-index: 5;
    right: 17%;
    bottom: 8%;
    left: 17%;
    display: grid;
    gap: 3px;
    padding: 11px 14px;
    text-align: center;
    background: linear-gradient(90deg, rgba(29, 16, 37, .84), rgba(54, 30, 18, .9), rgba(29, 16, 37, .84));
    border: 1px solid rgba(255, 173, 0, .72);
    border-radius: 999px;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, .5),
      0 0 32px rgba(255, 173, 0, .18);
    opacity: 0;
    transform: translateY(10px) scale(.96);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.85,.2,1);
  }
  .radar-celebration small { color: var(--accent); font-size: .49rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
  .radar-celebration strong { font-size: .88rem; }
  .radar-celebration span { overflow: hidden; color: var(--muted); font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
  .radar-score.is-complete {
    color: #8dffb3;
    background: rgba(5, 25, 15, .96);
    border-color: #5cf08d;
    animation: scoreComplete 1.25s cubic-bezier(.2,.85,.2,1) both;
  }
  .radar-score.is-complete small,
  .radar-score.is-complete strong,
  .radar-score.is-complete strong span { color: #67f59a; }
  .radar-score.is-complete::before { border-color: rgba(92, 240, 141, .72); }
  .radar-score.is-complete::after { border-color: rgba(92, 240, 141, .42); }
  .radar-score.is-complete ~ .radar-celebration {
    border-color: rgba(92, 240, 141, .78);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .5), 0 0 38px rgba(92, 240, 141, .22);
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  @keyframes radarRotate { to { transform: rotate(360deg); } }
  @keyframes radarPulse {
    from { opacity: .9; transform: scale(.35); }
    to { opacity: 0; transform: scale(2.4); }
  }
  @keyframes radarNodeMoveA {
    0%, 100% { border-color: rgba(255, 173, 0, .28); transform: translate(0, 0) scale(1); }
    27% { transform: translate(15px, 10px) scale(.94); }
    55% { border-color: var(--accent); box-shadow: 0 0 26px rgba(255, 173, 0, .28); transform: translate(-8px, 20px) scale(1.08); }
    78% { transform: translate(-16px, 5px) scale(.98); }
  }
  @keyframes radarNodeMoveB {
    0%, 100% { border-color: rgba(255, 173, 0, .28); transform: translate(0, 0) scale(1); }
    32% { transform: translate(-20px, 7px) scale(1.07); }
    58% { border-color: var(--accent); box-shadow: 0 0 28px rgba(255, 173, 0, .3); transform: translate(-8px, -18px) scale(.95); }
    82% { transform: translate(13px, -9px) scale(1.04); }
  }
  @keyframes radarNodeMoveC {
    0%, 100% { border-color: rgba(255, 173, 0, .28); transform: translate(0, 0) scale(1); }
    24% { transform: translate(11px, -17px) scale(.96); }
    51% { border-color: var(--accent); box-shadow: 0 0 30px rgba(255, 173, 0, .3); transform: translate(21px, 3px) scale(1.08); }
    76% { transform: translate(-7px, 14px) scale(1); }
  }
  @keyframes scoreHalo {
    0%, 100% { opacity: .35; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.07); }
  }
  @keyframes radarSparkle {
    0%, 68%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
    76% { opacity: 1; transform: scale(1.35) rotate(25deg); }
    86% { opacity: .2; transform: scale(.8) rotate(55deg); }
  }
  @keyframes scoreComplete {
    0% { box-shadow: 0 0 45px rgba(255, 173, 0, .3); transform: translate(-50%, -50%) scale(1); }
    35% { box-shadow: 0 0 0 18px rgba(92, 240, 141, .1), 0 0 95px rgba(92, 240, 141, .84); transform: translate(-50%, -50%) scale(1.14); }
    100% { box-shadow: 0 0 0 8px rgba(92, 240, 141, .05), 0 0 62px rgba(92, 240, 141, .52); transform: translate(-50%, -50%) scale(1); }
  }

  .phone-card {
    width: min(270px, 70%);
    padding: 18px;
    background: color-mix(in oklch, var(--surface) 90%, transparent);
    border: 1px solid color-mix(in oklch, var(--feature-color) 40%, transparent);
    border-radius: 34px;
    box-shadow: 0 35px 80px color-mix(in oklch, var(--feature-color) 18%, transparent);
    transform: rotate(-5deg);
  }

  .phone-top {
    display: block;
    padding: 8px 8px 20px;
    color: var(--feature-color);
    font-weight: 900;
  }

  .song-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 15px;
    background: color-mix(in oklch, var(--ink) 6%, transparent);
    border-radius: 15px;
    font-size: .8rem;
    font-weight: 700;
  }

  .song-row b { color: var(--feature-color); }

  .mini-calendar {
    width: min(430px, 78%);
    padding: 22px;
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in oklch, var(--feature-color) 38%, transparent);
    border-radius: 28px;
    box-shadow: 0 35px 80px color-mix(in oklch, var(--feature-color) 16%, transparent);
    transform: rotate(2deg);
  }

  .calendar-top,
  .calendar-week,
  .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }

  .calendar-top {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 4px 4px 18px;
    color: var(--ink);
    font-weight: 900;
  }

  .calendar-top b {
    padding: 6px 9px;
    color: var(--feature-color);
    background: color-mix(in oklch, var(--feature-color) 11%, transparent);
    border-radius: 999px;
    font-size: .63rem;
  }

  .calendar-week span,
  .calendar-days span {
    display: grid;
    min-width: 0;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 10px;
    font-size: .64rem;
  }

  .calendar-week span {
    aspect-ratio: auto;
    color: var(--muted);
    font-size: .58rem;
    font-weight: 800;
  }

  .calendar-days span {
    color: var(--ink);
    background: color-mix(in oklch, var(--ink) 5%, transparent);
  }

  .calendar-days .is-booked { color: var(--bg-deep); background: var(--feature-color); font-weight: 900; }
  .calendar-days .is-option { border: 1px solid var(--accent); }
  .calendar-days .is-blocked { color: var(--muted); text-decoration: line-through; }
  .calendar-days .is-free { box-shadow: inset 0 0 0 1px color-mix(in oklch, oklch(72% .17 158) 70%, transparent); }

  .calendar-event {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    padding: 13px 14px;
    color: var(--ink);
    background: color-mix(in oklch, var(--feature-color) 12%, transparent);
    border-radius: 14px;
  }

  .calendar-event b { font-size: .72rem; }
  .calendar-event span { color: var(--muted); font-size: .62rem; }

  .connect-card {
    width: min(440px, 80%);
    padding: 22px;
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in oklch, var(--feature-color) 38%, transparent);
    border-radius: 28px;
    box-shadow: 0 35px 80px color-mix(in oklch, var(--feature-color) 16%, transparent);
    transform: rotate(-2deg);
  }

  .connect-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 3px 18px;
    color: var(--ink);
    font-weight: 900;
  }

  .connect-head b {
    padding: 6px 9px;
    color: var(--feature-color);
    background: color-mix(in oklch, var(--feature-color) 11%, transparent);
    border-radius: 999px;
    font-size: .61rem;
  }

  .connect-message {
    padding: 18px;
    background: color-mix(in oklch, var(--ink) 6%, transparent);
    border-radius: 18px;
  }

  .connect-message small,
  .connect-message span {
    color: var(--muted);
    font-size: .63rem;
  }

  .connect-message p {
    margin: 14px 0;
    color: var(--ink);
    font-size: .83rem;
  }

  .connect-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
  }

  .connect-channels span {
    padding: 8px 10px;
    color: var(--muted);
    background: color-mix(in oklch, var(--ink) 5%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 9%, transparent);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
  }

  .safe-ring,
  .safe-pulse {
    position: absolute;
    width: 52%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in oklch, var(--feature-color) 60%, transparent);
    border-radius: 50%;
  }

  .safe-pulse { animation: safePulse 2.8s ease-out infinite; }

  .safe-check {
    z-index: 2;
    display: grid;
    width: 140px;
    aspect-ratio: 1;
    place-items: center;
    color: var(--bg-deep);
    background: var(--feature-color);
    border-radius: 50%;
    box-shadow: 0 0 80px color-mix(in oklch, var(--feature-color) 45%, transparent);
    font-size: 4rem;
    font-weight: 900;
  }

  .room-showcase {
    position: relative;
    overflow: clip;
  }

  .room-showcase::before { display: none; }

  .room-heading {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(40px, 8vw, 110px);
    align-items: end;
  }

  .room-heading > *,
  .room-demo > *,
  .booth-showcase > * {
    min-width: 0;
  }

  .room-heading h2 {
    margin-top: 22px;
    max-width: 760px;
    font-size: clamp(2.8rem, 5.15vw, 5.55rem);
    line-height: .9;
  }

  .room-title-line { display: block; }
  .room-heading h2 .juhu-word { color: var(--accent); }

  .room-heading > p {
    max-width: 510px;
    padding-bottom: 10px;
    font-size: 1.05rem;
  }

  .juhu-ecosystem {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 54px;
  }

  .juhu-ecosystem article {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    min-height: 110px;
    padding: 14px 16px;
    background: linear-gradient(145deg, color-mix(in oklch, var(--surface-soft) 68%, transparent), var(--surface));
    border: 1px solid var(--line);
    border-radius: 20px;
  }

  .ecosystem-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    padding: 11px;
    color: color-mix(in oklch, var(--ink) 88%, transparent);
    background: color-mix(in oklch, var(--ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
    border-radius: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
  }

  .ecosystem-icon .icon-accent {
    color: var(--accent);
    stroke: currentColor;
  }

  .juhu-ecosystem strong,
  .juhu-ecosystem span {
    display: block;
  }

  .juhu-ecosystem strong {
    color: var(--ink);
    font-family: var(--display);
    letter-spacing: -.04em;
  }

  .juhu-ecosystem span {
    margin-top: 4px;
    color: var(--muted);
    font-size: .72rem;
  }

  .room-demo {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(34px, 6vw, 88px);
    align-items: center;
    min-height: 700px;
    margin-top: 76px;
    overflow: hidden;
    padding: clamp(28px, 6vw, 80px);
    background:
      radial-gradient(circle at 82% 42%, color-mix(in oklch, var(--violet) 28%, transparent), transparent 34%),
      linear-gradient(145deg, color-mix(in oklch, var(--surface-soft) 78%, transparent), var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .room-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    color: oklch(85% .13 158);
    background: color-mix(in oklch, oklch(72% .17 158) 10%, transparent);
    border: 1px solid color-mix(in oklch, oklch(72% .17 158) 35%, transparent);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .status-dot {
    width: 8px;
    aspect-ratio: 1;
    background: oklch(72% .17 158);
    border-radius: 50%;
    box-shadow: 0 0 14px oklch(72% .17 158);
  }

  .room-event-label {
    margin-top: 32px;
    color: var(--accent-soft);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .room-access h3 {
    margin-top: 14px;
    font-size: clamp(3rem, 5.3vw, 5.8rem);
  }

  .room-access > p:not(.room-event-label) {
    max-width: 540px;
    margin-top: 24px;
  }

  .invite-methods {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 36px;
  }

  .qr-card {
    position: relative;
    flex: 0 0 116px;
    width: 116px;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 6px;
    background: var(--ink);
    border: 7px solid var(--ink);
    border-radius: 18px;
    box-shadow: 0 20px 50px color-mix(in oklch, var(--bg-deep) 55%, transparent);
  }

  .qr-card canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
  }

  .invite-link {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  .invite-link span,
  .invite-link small {
    color: var(--muted);
    font-size: .74rem;
  }

  .invite-link strong {
    overflow: hidden;
    color: var(--ink);
    font-size: clamp(.9rem, 2vw, 1.05rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-phone {
    width: min(410px, 100%);
    margin-inline: auto;
    padding: 22px;
    background: color-mix(in oklch, var(--bg-deep) 92%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 20%, transparent);
    border-radius: 36px;
    box-shadow:
      0 45px 100px color-mix(in oklch, var(--bg-deep) 72%, transparent),
      0 0 80px color-mix(in oklch, var(--violet) 22%, transparent);
    transform: rotate(2deg);
  }

  .invitation-showcase {
    --invitation-image: url("assets/juhu-invitation-guests-v3.webp");
    position: relative;
    display: grid;
    min-height: 560px;
    align-items: center;
    margin-top: 18px;
    overflow: hidden;
    padding: clamp(34px, 7vw, 82px);
    background:
      linear-gradient(90deg, color-mix(in oklch, var(--bg-deep) 98%, transparent) 0%, color-mix(in oklch, var(--bg-deep) 88%, transparent) 39%, color-mix(in oklch, var(--bg-deep) 20%, transparent) 72%),
      linear-gradient(0deg, var(--bg-deep), transparent 34%),
      var(--invitation-image) center / cover no-repeat;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .invitation-copy {
    position: relative;
    z-index: 1;
    max-width: 610px;
  }

  .invitation-brand {
    display: inline-flex;
    gap: 5px;
    align-items: baseline;
    margin-bottom: 54px;
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 300;
  }

  .invitation-brand b {
    color: var(--accent);
    font-family: var(--display);
    letter-spacing: -.06em;
  }

  .invitation-copy h3 {
    max-width: 600px;
    margin-top: 18px;
    font-size: clamp(2.7rem, 5vw, 5.2rem);
  }

  .invitation-copy > p:not(.section-kicker) {
    max-width: 550px;
    margin-top: 24px;
    color: color-mix(in oklch, var(--ink) 78%, transparent);
  }

  .share-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
  }

  .share-channels span {
    min-height: 40px;
    padding: 10px 14px;
    color: var(--ink);
    background: color-mix(in oklch, var(--ink) 9%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
  }

  .invitation-copy small {
    display: block;
    max-width: 540px;
    margin-top: 18px;
    color: color-mix(in oklch, var(--ink) 60%, transparent);
  }

  .invitation-library {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: clamp(28px, 6vw, 74px);
    align-items: center;
    margin-top: 18px;
    padding: clamp(28px, 5vw, 56px);
    background: color-mix(in oklch, var(--surface) 82%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .invitation-library h3 {
    margin-top: 15px;
    font-size: clamp(2.3rem, 4vw, 4.1rem);
  }

  .invitation-library > div:first-child > p:last-child {
    margin-top: 20px;
  }

  .invitation-templates {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
  }

  .invitation-templates button {
    position: relative;
    min-width: 0;
    min-height: 190px;
    overflow: hidden;
    padding: 0;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 17px;
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

  .invitation-templates button:hover,
  .invitation-templates button.is-active {
    border-color: var(--accent);
    box-shadow: 0 14px 35px color-mix(in oklch, var(--accent) 14%, transparent);
    transform: translateY(-4px);
  }

  .invitation-templates button.is-active::after {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    width: 25px;
    aspect-ratio: 1;
    place-items: center;
    color: var(--bg-deep);
    background: var(--accent);
    border-radius: 50%;
    content: "✓";
    font-size: .72rem;
    font-weight: 900;
  }

  .invitation-templates img {
    width: 100%;
    height: 145px;
    object-fit: cover;
    object-position: 70% center;
  }

  .invitation-templates span {
    display: block;
    overflow: hidden;
    padding: 11px 8px;
    font-size: .68rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booth-showcase {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: clamp(42px, 8vw, 110px);
    align-items: center;
    min-height: 720px;
    margin-top: 18px;
    padding: clamp(32px, 7vw, 82px);
    background:
      radial-gradient(circle at 20% 45%, color-mix(in oklch, var(--violet) 27%, transparent), transparent 34%),
      linear-gradient(145deg, var(--surface), color-mix(in oklch, var(--surface-soft) 72%, var(--surface)));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .booth-phone {
    width: min(390px, 100%);
    margin-inline: auto;
    overflow: hidden;
    padding: 13px;
    background: #060308;
    border: 1px solid color-mix(in oklch, var(--ink) 24%, transparent);
    border-radius: 38px;
    box-shadow:
      0 45px 100px color-mix(in oklch, var(--bg-deep) 72%, transparent),
      0 0 90px color-mix(in oklch, var(--violet) 24%, transparent);
    transform: rotate(-2deg);
  }

  .booth-camera {
    position: relative;
    min-height: 465px;
    overflow: hidden;
    background:
      linear-gradient(0deg, color-mix(in oklch, var(--bg-deep) 60%, transparent), transparent 42%),
      url("assets/juhu-invitation-guests-v3.webp") 70% center / cover no-repeat;
    border-radius: 28px 28px 16px 16px;
  }

  .booth-top,
  .booth-caption,
  .booth-credit {
    position: absolute;
    z-index: 2;
    right: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink);
    font-size: .72rem;
    font-weight: 850;
    text-shadow: 0 2px 12px var(--bg-deep);
  }

  .booth-top { top: 16px; }
  .booth-top b { color: var(--accent); }

  .booth-credit {
    top: 52px;
    right: 14px;
    left: auto;
    width: auto;
    padding: 7px 10px;
    color: var(--bg-deep);
    background: var(--accent);
    border-radius: 999px;
    font-size: .64rem;
    text-shadow: none;
  }

  .booth-caption {
    bottom: 16px;
    justify-content: center;
    overflow: hidden;
    padding: 7px 9px;
    background: color-mix(in oklch, var(--bg-deep) 50%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    font-size: .58rem;
    font-style: italic;
    font-weight: 650;
    letter-spacing: .005em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booth-hat {
    position: absolute;
    z-index: 2;
    top: 13%;
    left: 46%;
    color: var(--accent);
    font-size: 4.35rem;
    line-height: 1;
    text-shadow: 0 8px 24px var(--bg-deep);
    transform: translateX(-50%) rotate(-7deg);
  }

  .booth-bubble {
    position: absolute;
    z-index: 2;
    aspect-ratio: 1;
    border: 2px solid color-mix(in oklch, oklch(88% .09 230) 72%, transparent);
    border-radius: 50%;
    box-shadow:
      inset 5px 5px 12px color-mix(in oklch, oklch(92% .05 230) 22%, transparent),
      0 0 16px color-mix(in oklch, var(--violet) 28%, transparent);
  }

  .bubble-a { top: 18%; right: 8%; width: 48px; }
  .bubble-b { top: 45%; left: 7%; width: 66px; }
  .bubble-c { right: 17%; bottom: 18%; width: 35px; }

  .booth-effects {
    display: flex;
    gap: 7px;
    overflow: hidden;
    padding: 13px 2px 8px;
  }

  .booth-effects span {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: var(--muted);
    background: color-mix(in oklch, var(--ink) 6%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 9%, transparent);
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 750;
  }

  .booth-effects .is-selected {
    color: var(--bg-deep);
    background: var(--accent);
  }

  .booth-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 10px 12px 9px;
  }

  .booth-controls button {
    min-width: 44px;
    min-height: 44px;
    color: var(--ink);
    background: transparent;
    border: 0;
    font-size: .72rem;
    font-weight: 800;
  }

  .booth-shutter {
    width: 66px;
    aspect-ratio: 1;
    background: var(--ink);
    border: 5px solid #060308;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--ink);
  }

  .booth-copy h3 {
    margin-top: 22px;
    font-size: clamp(3.1rem, 5.5vw, 6rem);
  }

  .booth-copy > p:not(.section-kicker) {
    max-width: 620px;
    margin-top: 26px;
  }

  .booth-copy ul {
    margin-top: 34px;
    list-style: none;
  }

  .booth-copy li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 17px 0;
    border-top: 1px solid var(--line);
  }

  .booth-copy li:last-child { border-bottom: 1px solid var(--line); }
  .booth-copy strong { color: var(--ink); }
  .booth-copy li span { color: var(--muted); font-size: .9rem; }

  .booth-copy .booth-privacy {
    padding-left: 18px;
    color: color-mix(in oklch, var(--muted) 82%, transparent);
    border-left: 2px solid var(--accent);
    font-size: .82rem;
  }

  .room-phone-top,
  .room-role-switch,
  .room-actions > div,
  .room-now {
    display: flex;
    align-items: center;
  }

  .room-phone-top {
    justify-content: space-between;
    padding: 6px 4px 18px;
    color: var(--ink);
    font-weight: 900;
  }

  .room-lock {
    padding: 6px 9px;
    color: oklch(85% .13 158);
    background: color-mix(in oklch, oklch(72% .17 158) 11%, transparent);
    border-radius: 999px;
    font-size: .66rem;
  }

  .room-welcome {
    padding: 18px 4px 10px;
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.45rem;
    line-height: 1;
  }

  .room-role-switch {
    gap: 4px;
    margin: 12px 0 18px;
    padding: 4px;
    background: color-mix(in oklch, var(--ink) 5%, transparent);
    border-radius: 999px;
  }

  .room-role-switch span {
    flex: 1;
    padding: 9px 5px;
    color: var(--muted);
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 750;
    text-align: center;
  }

  .room-role-switch .is-active {
    color: var(--bg-deep);
    background: var(--accent);
  }

  .room-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .room-actions > div {
    min-height: 92px;
    gap: 11px;
    padding: 13px;
    background: color-mix(in oklch, var(--ink) 6%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
    border-radius: 16px;
  }

  .room-actions b {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    aspect-ratio: 1;
    place-items: center;
    color: oklch(80% .18 328);
    background: color-mix(in oklch, var(--violet) 15%, transparent);
    border-radius: 9px;
  }

  .room-actions span {
    color: var(--ink);
    font-size: .75rem;
    font-weight: 800;
  }

  .room-actions small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .64rem;
    font-weight: 500;
  }

  .room-now {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 14px 16px;
    background: linear-gradient(100deg, color-mix(in oklch, var(--violet) 30%, transparent), color-mix(in oklch, var(--accent) 12%, transparent));
    border-radius: 16px;
  }

  .room-now span {
    color: var(--accent-soft);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .room-now strong { font-size: .8rem; }

  .room-roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
  }

  .room-role {
    min-height: 260px;
    padding: 30px;
    background: color-mix(in oklch, var(--surface) 82%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .room-role > span {
    color: var(--accent);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .room-role h3 {
    margin-top: 44px;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
  }

  .room-role p { margin-top: 18px; }

  .room-lifecycle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
    overflow: hidden;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .room-lifecycle > div {
    min-height: 245px;
    padding: 30px;
    background: linear-gradient(145deg, color-mix(in oklch, var(--surface-soft) 72%, transparent), var(--surface));
  }

  .room-lifecycle span {
    color: var(--accent);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .room-lifecycle strong {
    display: block;
    margin-top: 42px;
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -.04em;
  }

  .room-lifecycle p {
    margin-top: 16px;
    font-size: .9rem;
  }

  .platform-promise {
    margin-top: 44px;
    padding: clamp(28px, 5vw, 58px);
    background:
      radial-gradient(circle at 92% 0, color-mix(in oklch, var(--accent) 10%, transparent), transparent 26rem),
      linear-gradient(145deg, color-mix(in oklch, var(--surface-soft) 74%, transparent), color-mix(in oklch, var(--bg-deep) 94%, transparent));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .045),
      0 30px 90px rgba(0, 0, 0, .32);
  }

  .platform-promise .section-kicker { color: var(--accent-soft); }

  .platform-promise ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 42px;
    margin-top: 28px;
    list-style: none;
  }

  .platform-promise li {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
  }

  .platform-promise strong {
    color: var(--ink);
    font-family: var(--display);
    letter-spacing: -.035em;
  }

  .platform-promise li span {
    color: var(--muted);
    font-size: .9rem;
  }

  .room-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 28px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
  }

  .room-cta p { max-width: 620px; }
  .room-cta strong { color: var(--ink); }
  .room-cta .button-primary {
    box-shadow:
      0 10px 24px rgba(0, 0, 0, .36),
      0 22px 58px rgba(255, 163, 0, .14);
  }
  .room-cta .button-primary:hover {
    box-shadow:
      0 12px 28px rgba(0, 0, 0, .4),
      0 26px 68px rgba(255, 163, 0, .2);
  }

  .artist-cta {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    overflow: hidden;
    padding-inline: clamp(36px, 7vw, 90px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .artist-glow {
    position: absolute;
    top: -30%;
    left: 30%;
    width: 50%;
    aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in oklch, var(--violet) 24%, transparent), transparent 65%);
  }

  .artist-copy { position: relative; z-index: 1; }
  .artist-copy h2 { margin-top: 22px; font-size: clamp(3.2rem, 5vw, 5.4rem); }
  .artist-copy > p:not(.section-kicker) { max-width: 600px; margin-top: 28px; }
  .artist-copy .button { margin-top: 34px; }

  .artist-quality {
    display: grid;
    gap: 6px;
    max-width: 660px;
    margin-top: 24px;
    padding: 15px 17px;
    background: rgba(255, 173, 0, .07);
    border: 1px solid rgba(255, 173, 0, .28);
    border-radius: 14px;
  }
  .artist-quality strong { color: var(--accent); font-size: .75rem; letter-spacing: .04em; }
  .artist-quality span { color: var(--muted); font-size: .7rem; line-height: 1.55; }

  .artist-benefits {
    display: grid;
    gap: 11px;
    margin-top: 28px;
    list-style: none;
  }

  .artist-benefits li {
    position: relative;
    padding-left: 24px;
    color: color-mix(in oklch, var(--ink) 82%, transparent);
    font-size: .9rem;
  }

  .artist-benefits li::before {
    position: absolute;
    top: .12em;
    left: 0;
    color: var(--accent);
    content: "✓";
    font-weight: 900;
  }

  .artist-badge-preview {
    position: relative;
    z-index: 1;
    align-self: center;
    padding: clamp(22px, 3vw, 30px);
    background:
      radial-gradient(circle at 88% 8%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 30%),
      color-mix(in oklch, var(--bg-deep) 58%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    backdrop-filter: blur(18px);
  }

  .artist-profile-preview {
    position: relative;
    z-index: 1;
    align-self: center;
    overflow: hidden;
    background:
      radial-gradient(circle at 86% 3%, rgba(255, 168, 0, .16), transparent 30%),
      linear-gradient(145deg, rgba(21, 9, 27, .96), rgba(7, 3, 10, .98));
    border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--line));
    border-radius: 25px;
    box-shadow:
      0 35px 90px rgba(0, 0, 0, .48),
      0 0 60px rgba(92, 40, 110, .18);
    transform: perspective(1100px) rotateY(-2deg) rotateX(1deg);
  }

  .profile-demo-browser {
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 42px;
    padding: 0 14px;
    align-items: center;
    background: rgba(255, 255, 255, .035);
    border-bottom: 1px solid var(--line);
  }

  .profile-demo-browser > span { display: flex; gap: 5px; }
  .profile-demo-browser i {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, .22);
    border-radius: 50%;
  }
  .profile-demo-browser i:first-child { background: var(--accent); }
  .profile-demo-browser small {
    justify-self: center;
    color: var(--muted);
    font-size: .55rem;
    letter-spacing: .04em;
  }

  .profile-demo-cover {
    position: relative;
    display: flex;
    min-height: 190px;
    align-items: flex-end;
    padding: 20px;
    background:
      linear-gradient(0deg, rgba(7, 3, 10, .96), rgba(7, 3, 10, .08) 76%),
      url("assets/hero-juhuparty.jpg") center 42% / cover no-repeat;
  }

  .profile-demo-label {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 9px;
    color: var(--accent);
    background: rgba(6, 3, 8, .7);
    border: 1px solid rgba(255, 168, 0, .28);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .09em;
  }

  .profile-demo-identity {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    width: 100%;
    align-items: center;
    gap: 12px;
  }
  .profile-demo-identity img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border: 2px solid var(--accent);
    border-radius: 17px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  }
  .profile-demo-identity strong,
  .profile-demo-identity small { display: block; }
  .profile-demo-identity strong {
    font-family: var(--display);
    font-size: 1.35rem;
    letter-spacing: -.04em;
  }
  .profile-demo-identity small { margin-top: 2px; color: var(--muted); font-size: .63rem; }
  .profile-demo-identity > b {
    padding: 6px 9px;
    color: #1b0b00;
    background: var(--accent);
    border-radius: 999px;
    font-size: .56rem;
  }

  .profile-demo-content { padding: 18px 20px 12px; }
  .profile-demo-content > p { margin: 0; color: color-mix(in oklch, var(--ink) 82%, transparent); font-size: .74rem; line-height: 1.55; }
  .profile-demo-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 14px;
  }
  .profile-demo-facts span {
    display: grid;
    gap: 2px;
    padding: 9px;
    color: var(--muted);
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--line);
    border-radius: 11px;
    font-size: .51rem;
  }
  .profile-demo-facts b { color: var(--ink); font-size: .67rem; }
  .profile-demo-media {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 7px;
    margin-top: 8px;
  }
  .profile-demo-media span {
    display: grid;
    min-height: 56px;
    place-items: end start;
    padding: 8px;
    background:
      linear-gradient(145deg, rgba(255, 168, 0, .15), rgba(100, 45, 118, .18)),
      #120918;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .profile-demo-content > a {
    display: grid;
    min-height: 42px;
    margin-top: 10px;
    place-items: center;
    color: #140817;
    background: var(--accent);
    border: 2px solid #09040d;
    border-radius: 11px;
    font-size: .67rem;
    font-weight: 900;
  }
  .profile-demo-note {
    margin: 0;
    padding: 13px 20px 17px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    font-size: .61rem;
    line-height: 1.5;
  }
  .profile-demo-note strong { color: var(--ink); }

  .badge-label {
    color: var(--accent);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .badge-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .badge-preview-status {
    color: var(--muted);
    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .juhu-badge {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding: 13px;
    color: var(--ink);
    background: color-mix(in oklch, var(--ink) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 13%, transparent);
    border-radius: 18px;
    box-shadow: 0 18px 45px color-mix(in oklch, #000 22%, transparent);
    backdrop-filter: blur(12px);
  }

  .badge-avatar {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border: 2px solid color-mix(in oklch, var(--accent) 82%, var(--ink));
    border-radius: 16px;
  }

  .badge-profile {
    display: block;
    min-width: 0;
  }

  .badge-profile strong,
  .badge-profile small {
    display: block;
  }

  .badge-profile strong {
    font-family: var(--display);
    font-size: 1.04rem;
    letter-spacing: -.04em;
  }

  .badge-profile small {
    overflow: hidden;
    margin-top: 1px;
    color: var(--muted);
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .badge-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
  }

  .badge-proof b {
    padding: 4px 7px;
    color: color-mix(in oklch, var(--ink) 82%, transparent);
    background: color-mix(in oklch, var(--ink) 6%, transparent);
    border-radius: 999px;
    font-size: .53rem;
    font-weight: 750;
  }

  .badge-proof b:first-child {
    color: var(--accent);
    background: color-mix(in oklch, var(--accent) 9%, transparent);
  }

  .badge-link {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--bg-deep);
    background: var(--accent);
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 900;
  }

  .badge-formats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 12px;
  }

  .badge-formats > span {
    display: grid;
    min-width: 0;
    min-height: 54px;
    place-items: center;
    gap: 5px;
    padding: 8px 4px;
    color: var(--muted);
    background: color-mix(in oklch, var(--ink) 3%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
    border-radius: 12px;
    font-size: .5rem;
    text-align: center;
  }

  .badge-formats i {
    display: block;
    width: 24px;
    height: 14px;
    border: 1px solid color-mix(in oklch, var(--ink) 60%, transparent);
    border-radius: 5px;
  }

  .badge-formats .format-transparent { background: color-mix(in oklch, var(--ink) 4%, transparent); }
  .badge-formats .format-compact { width: 19px; }
  .badge-formats .format-seal { width: 16px; height: 16px; border-radius: 50%; }
  .badge-formats .format-auto {
    background: linear-gradient(90deg, color-mix(in oklch, var(--ink) 82%, transparent) 50%, color-mix(in oklch, var(--ink) 5%, transparent) 50%);
  }

  .badge-note {
    margin-top: 12px;
    color: var(--muted);
    font-size: .6rem;
    line-height: 1.5;
  }

  .badge-note strong {
    color: color-mix(in oklch, var(--ink) 88%, transparent);
  }

  .artist-quote {
    position: relative;
    z-index: 1;
    align-self: center;
    padding: 40px;
    background: color-mix(in oklch, var(--bg-deep) 72%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transform: rotate(2deg);
  }

  .artist-quote > span {
    display: block;
    height: 50px;
    color: var(--accent);
    font-family: Georgia, serif;
    font-size: 6rem;
    line-height: 1;
  }

  .artist-quote p { color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 800; }

  .final-cta {
    position: relative;
    display: grid;
    min-height: 80svh;
    place-items: center;
    align-content: center;
    overflow: hidden;
    padding: 100px 24px;
    text-align: center;
    background:
      radial-gradient(circle at 50% 45%, color-mix(in oklch, var(--violet) 16%, transparent), transparent 34rem),
      linear-gradient(160deg, color-mix(in oklch, var(--bg) 58%, var(--bg-deep)), var(--bg-deep));
  }

  #features-title em { color: var(--ink); }
  .final-cta .section-kicker { color: var(--accent-soft); }
  .final-cta h2 {
    z-index: 1;
    max-width: 1120px;
    margin: 20px auto 0;
    color: var(--ink);
    font-size: clamp(3rem, 7.2vw, 7.2rem);
    line-height: .92;
  }
  .final-cta h2 em { color: var(--ink); white-space: nowrap; }
  .final-cta h2 em span { color: var(--accent); }
  .final-cta .button { z-index: 1; margin-top: 38px; }

  .final-orbit {
    position: absolute;
    width: min(70vw, 760px);
    aspect-ratio: 1;
    border: 1px solid color-mix(in oklch, var(--bg-deep) 28%, transparent);
    border-radius: 50%;
  }

  .final-orbit::before,
  .final-orbit::after {
    position: absolute;
    inset: 12%;
    border: inherit;
    border-radius: inherit;
    content: "";
  }

  .final-orbit::after { inset: 25%; }

  .site-footer {
    position: relative;
    z-index: 95;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
    min-height: 58px;
    gap: 28px;
    margin: 0;
    padding: 8px clamp(16px, 3vw, 54px);
    background:
      linear-gradient(90deg, rgba(17, 8, 22, .96), rgba(38, 19, 34, .94) 52%, rgba(15, 7, 19, .97));
    border: 0;
    border-top: 1px solid color-mix(in oklch, var(--accent) 42%, var(--line));
    border-radius: 0;
    box-shadow:
      inset 0 1px rgba(255, 255, 255, .04),
      0 -18px 50px rgba(0, 0, 0, .58);
    backdrop-filter: blur(24px) saturate(1.2);
  }

  .brand-footer .brand-logo-juhu,
  .brand-footer .brand-logo-party {
    width: 108px;
    height: 48px;
    font-size: 1.65rem;
  }

  .brand-footer .brand-logo-party {
    width: 102px;
    height: 42px;
    margin: 3px;
    font-size: 1.65rem;
  }
  .site-footer > p {
    justify-self: start;
    margin: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(.92rem, 1.2vw, 1.16rem);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -.04em;
    text-shadow:
      0 3px 0 rgba(0, 0, 0, .52),
      0 10px 24px rgba(255, 168, 0, .16);
  }

  .footer-note {
    display: contents;
    color: color-mix(in oklch, var(--muted) 65%, transparent);
    font-size: .72rem;
  }
  .footer-note > span:first-child { justify-self: center; }
  .footer-legal { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
  .footer-legal nav { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  .footer-legal a { color: var(--ink); font-weight: 800; }
  .footer-legal a:hover { color: var(--accent); }
}

@layer motion {
  .is-ready .hero .eyebrow,
  .is-ready .hero h1,
  .is-ready .hero-copy,
  .is-ready .hero-actions,
  .is-ready .promise-list,
  .is-ready .hero-access-card {
    animation: heroIn .8s both cubic-bezier(.2, .75, .25, 1);
  }

  .is-ready .hero h1 { animation-delay: .08s; }
  .is-ready .hero-copy { animation-delay: .16s; }
  .is-ready .hero-actions { animation-delay: .24s; }
  .is-ready .promise-list { animation-delay: .32s; }
  .is-ready .hero-access-card { animation-delay: .4s; }

  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .75, .25, 1);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes heroIn {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes twinkle {
    0%, 100% { opacity: .55; transform: scale(.8) rotate(0); }
    50% { opacity: 1; transform: scale(1.25) rotate(90deg); }
  }

  @keyframes scrollLine {
    from { transform: translateX(-120%); }
    to { transform: translateX(220%); }
  }

  @keyframes beam {
    from { opacity: .08; transform: rotate(10deg) scaleX(.7); }
    to { opacity: .25; transform: rotate(22deg) scaleX(1.25); }
  }

  @keyframes confettiFall {
    from { transform: translate3d(0, -10vh, 0) rotate(0); }
    to { transform: translate3d(var(--drift), 120vh, 0) rotate(720deg); }
  }

  @keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }
  @keyframes orbit { to { transform: rotate(360deg); } }

  @keyframes safePulse {
    from { opacity: .75; transform: scale(.75); }
    to { opacity: 0; transform: scale(1.45); }
  }
}

@layer responsive {
  @media (max-width: 980px) {
    :root { --page: min(100% - 36px, 760px); }

    .main-nav {
      position: fixed;
      z-index: 110;
      top: 80px;
      right: 16px;
      left: 16px;
      display: none;
      max-height: calc(100svh - 96px);
      overflow-y: auto;
      padding: 18px;
      background: linear-gradient(145deg, rgba(34, 18, 42, .98), rgba(10, 5, 14, .98));
      border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
      border-radius: 20px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .62);
      backdrop-filter: blur(24px);
    }
    .main-nav.is-open { display: grid; gap: 5px; }
    .main-nav > a {
      width: auto;
      padding: 14px 12px;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      font-size: .88rem;
    }
    .mobile-auth-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }
    .mobile-auth-actions button {
      min-height: 44px;
      color: var(--ink);
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-weight: 800;
    }
    .mobile-auth-actions button:last-child {
      color: var(--bg-deep);
      background: var(--accent);
      border-color: var(--accent);
    }
    .menu-toggle { display: grid; }
    .site-header { grid-template-columns: 1fr auto; padding-inline: 20px; }
    .hero { padding-inline: 24px; }
    .hero-content { width: min(720px, 86vw); }
    .hero-vignette {
      background:
        linear-gradient(90deg, color-mix(in oklch, var(--bg-deep) 96%, transparent), color-mix(in oklch, var(--bg-deep) 48%, transparent) 76%),
        linear-gradient(0deg, var(--bg-deep), transparent 42%);
    }

    .planner-heading,
    .process,
    .room-heading,
    .room-demo,
    .booth-showcase,
    .artist-cta { grid-template-columns: 1fr; }

    .planner-shell {
      position: relative;
      top: auto;
      right: auto;
      width: min(720px, calc(100% - 40px));
      margin: -120px 20px 100px auto;
      padding: 24px;
    }

    .planner-card {
      grid-template-columns: repeat(2, 1fr);
      border-radius: var(--radius-md);
    }

    .planner-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .planner-submit { min-height: 72px; border-radius: 15px; }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-sticky { position: relative; top: auto; }
    .process-sticky { border-right: 0; border-bottom: 1px solid var(--line); }
    .feature { grid-template-columns: 1fr; }
    .feature:nth-child(even) .feature-visual { order: 0; }
    .room-demo { min-height: 0; }
    .juhu-ecosystem { grid-template-columns: repeat(2, 1fr); }
    .room-phone { margin-top: 18px; }
    .booth-phone { transform: none; }
    .room-roles { grid-template-columns: 1fr; }
    .room-role { min-height: 0; }
    .room-lifecycle { grid-template-columns: 1fr; }
    .room-lifecycle > div { min-height: 0; }
    .invitation-library { grid-template-columns: 1fr; }
    .artist-cta { gap: 60px; }
    .artist-profile-preview { width: min(560px, 100%); justify-self: center; transform: none; }
  }

  @media (min-width: 681px) and (max-width: 900px) {
    .hero { min-height: 900px; }
    .hero-content { width: min(700px, 92vw); padding-top: 70px; }
  }

  @media (max-width: 680px) {
    :root { --page: calc(100vw - 28px); }
    .section { padding-block: 34px; }
    .header-actions > .register-link { display: none; }
    .site-header { min-height: 70px; }
    .ticker-top { top: 78px; padding-block: 10px; }
    .brand-logo { gap: 0; }
    .brand-logo-juhu {
      width: 68px;
      height: 38px;
      padding: 0;
      border-radius: 9px;
      font-size: 1.22rem;
    }
    .brand-logo-party {
      width: 66px;
      height: 32px;
      margin: 3px;
      padding: 0;
      border-width: 3px;
      font-size: 1.22rem;
    }
    .brand-logo { height: 42px; }
    .header-actions { gap: 7px; }
    .login-link { min-height: 38px; padding-inline: 11px; font-size: .68rem; }
    .menu-toggle { width: 38px; height: 38px; padding: 8px; }
    .main-nav {
      top: 70px;
      right: 10px;
      left: auto;
      width: min(246px, calc(100vw - 28px));
      max-height: calc(100svh - 82px);
      padding: 10px;
      border-radius: 16px;
    }
    .main-nav.is-open { gap: 3px; }
    .main-nav > a {
      width: auto;
      padding: 11px 12px;
      border-bottom: 0;
      border-radius: 11px;
      font-size: .8rem;
    }
    .mobile-auth-actions { margin-top: 4px; }
    .mobile-auth-actions[hidden] { display: none; }

    .login-popup-layer { padding: 8px; }
    .login-popup-layer::before { display: none; }
    .login-popup {
      top: 8px;
      right: 8px;
      bottom: 8px;
      left: 8px;
      width: auto;
      height: auto;
      border-radius: 20px;
      transform: none;
      animation: popupMobileIn .22s ease;
    }
    .login-popup-bar {
      grid-template-columns: 1fr auto;
      min-height: 64px;
      cursor: default;
    }
    .login-popup-drag-note { display: none; }
    .login-popup-mark { width: 112px; height: 36px; flex-basis: 112px; }
    .login-popup-mark i,
    .login-popup-mark b { font-size: .78rem; }
    .login-popup-mark i { width: 56px; }
    .login-popup-mark b { width: 52px; height: 28px; }
    html { scroll-padding-top: 136px; }
    :where(section[id], main[id]) { scroll-margin-top: 0; }
    .profile-demo-cover { min-height: 165px; padding: 15px; }
    .profile-demo-identity { grid-template-columns: 52px minmax(0, 1fr); }
    .profile-demo-identity img { width: 52px; height: 52px; }
    .profile-demo-identity > b { display: none; }
    .profile-demo-content,
    .profile-demo-note { padding-inline: 15px; }

    @keyframes popupMobileIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero {
      align-items: center;
      min-height: 880px;
      padding: 150px 18px 180px;
    }

    .hero-photo {
      inset: 0;
      background-position: 65% center;
      opacity: .75;
      transform: scale(1.03);
    }

    .hero-vignette {
      background:
        linear-gradient(0deg, var(--bg-deep) 5%, color-mix(in oklch, var(--bg-deep) 38%, transparent) 65%, color-mix(in oklch, var(--bg-deep) 72%, transparent)),
        linear-gradient(90deg, color-mix(in oklch, var(--bg-deep) 72%, transparent), transparent);
    }

    .hero-content { width: 100%; padding-top: 30px; }
    .hero h1 { font-size: clamp(3.35rem, 16vw, 5.4rem); }
    .hero-copy { font-size: .98rem; }
    .hero-actions { display: grid; }
    .hero-actions .button { width: 100%; }
    .promise-list { display: grid; gap: 8px; }
    .planner-shell {
      width: calc(100% - 20px);
      margin: -90px auto 72px;
      padding: 22px 14px;
      border-radius: 22px;
    }
    .planner-heading { gap: 22px; }
    .planner-card { grid-template-columns: 1fr; }
    .planner-submit { min-height: 64px; }
    .planner-card input,
    .planner-card select { min-height: 44px; }
    .planner-results-head {
      align-items: flex-start;
      flex-direction: column;
      padding: 18px;
    }
    .planner-results-head span { text-align: left; }
    .planner-match-grid { grid-template-columns: 1fr; }
    .planner-registration-callout { align-items: stretch; flex-direction: column; gap: 14px; }
    .planner-registration-callout button { width: 100%; }

    .categories { padding-top: 24px; padding-bottom: 18px; }
    .category-grid {
      grid-template-columns: 1fr;
      margin-top: 30px;
    }
    .category-card { min-height: 285px; }
    .process {
      margin-top: 18px;
      margin-bottom: 42px;
    }
    .process-list li { grid-template-columns: 42px 1fr; gap: 12px; }

    .features { padding-inline: 14px; }
    .feature { min-height: 0; border-radius: var(--radius-md); }
    .feature-visual { min-height: 330px; }
    .feature-copy { padding: 34px 26px 42px; }
    .feature h3 { font-size: 2.35rem; }
    .match-visual { padding: 26px 18px; }
    .match-reasons { grid-template-columns: 1fr; }

    .room-heading { gap: 24px; }
    .room-heading h2 { font-size: 3rem; }
    .juhu-ecosystem { gap: 8px; margin-top: 34px; }
    .juhu-ecosystem article { min-height: 96px; gap: 8px; padding: 10px; }
    .ecosystem-icon { flex-basis: 50px; width: 50px; height: 50px; padding: 9px; }
    .juhu-ecosystem strong { font-size: .78rem; }
    .juhu-ecosystem span { font-size: .6rem; }
    .room-demo {
      margin-top: 44px;
      padding: 28px 18px;
      border-radius: var(--radius-md);
    }
    .room-access h3 { font-size: 3rem; }
    .invite-methods { align-items: flex-start; }
    .qr-card { flex-basis: 96px; width: 96px; }
    .qr-corner { width: 27px; border-width: 6px; }
    .room-phone {
      padding: 16px;
      border-radius: 28px;
      transform: none;
    }
    .invitation-showcase {
      min-height: 720px;
      align-items: end;
      padding: 34px 22px;
      background:
        linear-gradient(0deg, var(--bg-deep) 7%, color-mix(in oklch, var(--bg-deep) 82%, transparent) 58%, color-mix(in oklch, var(--bg-deep) 18%, transparent)),
        var(--invitation-image) 66% center / cover no-repeat;
      border-radius: var(--radius-md);
    }
    .invitation-brand { margin-bottom: 220px; }
    .invitation-copy h3 { font-size: 2.55rem; }
    .share-channels span { min-height: 44px; }
    .invitation-library { padding: 30px 18px; }
    .invitation-templates {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding: 4px 2px 12px;
      scroll-snap-type: x mandatory;
    }
    .invitation-templates button {
      flex: 0 0 132px;
      min-height: 178px;
      scroll-snap-align: start;
    }
    .invitation-templates img { height: 134px; }
    .booth-showcase {
      min-height: 0;
      padding: 34px 18px;
      border-radius: var(--radius-md);
    }
    .booth-camera { min-height: 430px; }
    .booth-copy h3 { font-size: 3rem; }
    .booth-copy li { grid-template-columns: 1fr; gap: 5px; }
    .room-actions { grid-template-columns: 1fr; }
    .room-actions > div { min-height: 68px; }
    .room-role { padding: 26px; }
    .room-role h3 { margin-top: 30px; }
    .platform-promise {
      margin-top: 44px;
      padding: 28px 22px;
      border-radius: var(--radius-md);
    }
    .platform-promise ul { grid-template-columns: 1fr; }
    .platform-promise li { grid-template-columns: 1fr; gap: 7px; }
    .room-cta { align-items: stretch; flex-direction: column; }
    .room-cta .button { width: 100%; }

    .artist-cta { padding: 70px 24px; border-radius: var(--radius-md); }
    .artist-quote { padding: 28px; }
    .artist-badge-preview { padding: 22px 18px; }
    .badge-formats { grid-template-columns: repeat(2, 1fr); }
    .planner-title-line { white-space: normal; }
    .artist-copy .button { width: 100%; }

    .site-footer {
      grid-template-columns: auto 1fr;
      min-height: 52px;
      gap: 10px;
      padding: 7px 10px;
    }
    .site-footer > p { font-size: .76rem; }
    .footer-note > span:first-child { display: none; }
    .footer-legal { justify-content: flex-end; gap: 9px; font-size: .6rem; }
    .footer-legal nav { gap: 9px; }
  }

  @media (max-width: 420px) {
    .brand-logo { gap: 0; }
    .brand-logo-juhu {
      width: 62px;
      height: 34px;
      padding: 0;
      font-size: 1rem;
    }
    .brand-logo-party {
      width: 56px;
      height: 26px;
      margin: 3px;
      padding: 0;
      font-size: 1rem;
    }
    .brand-logo { height: 38px; }

    .header-actions {
      gap: 5px;
    }

    .header-actions .button {
      padding-inline: 9px;
      font-size: .7rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
  }
}

/* Finale Kontrast- und Glasverfeinerungen */
.main-nav a:hover,.main-nav a:focus-visible{color:#080309;background:var(--accent);border-color:var(--accent);box-shadow:inset 0 1px rgba(255,255,255,.3),0 12px 28px rgba(0,0,0,.65)}
.login-link,.register-link,.button-primary,.planner-submit{color:#fff;text-shadow:0 2px 2px #000,0 4px 11px #000d}
.ticker-track{background-image:linear-gradient(110deg,#7d4300 0%,#fff0a2 12%,#d99a22 24%,#fffce4 35%,#c37807 47%,#fff5bd 59%,#9c5900 71%,#fff8cf 84%,#b56b08 100%);background-size:220% 100%;animation:ticker 55s linear infinite,goldShine 4.2s linear infinite;filter:drop-shadow(0 3px 1px rgba(0,0,0,.82)) drop-shadow(0 0 7px rgba(255,216,96,.3));text-shadow:0 1px 0 rgba(255,255,255,.82),0 3px 0 rgba(75,35,0,.95),0 8px 14px rgba(0,0,0,.9)}
@keyframes goldShine{0%{background-position:220% 0}100%{background-position:-220% 0}}
.ticker-set span{filter:drop-shadow(0 0 4px rgba(255,208,91,.38)) drop-shadow(0 0 12px rgba(255,165,0,.18));animation:tickerWordGlow 4.6s ease-in-out infinite}
.ticker-set span:nth-of-type(3n+2){animation-delay:-1.5s}.ticker-set span:nth-of-type(3n){animation-delay:-3s}
@keyframes tickerWordGlow{0%,100%{filter:drop-shadow(0 0 3px rgba(255,208,91,.28)) drop-shadow(0 0 9px rgba(255,165,0,.14))}50%{filter:drop-shadow(0 0 7px rgba(255,236,165,.68)) drop-shadow(0 0 18px rgba(255,165,0,.34))}}
.category-card .category-icon,.category-card:hover .category-icon,.category-card:focus-visible .category-icon{background-color:transparent;border:0;border-radius:0;box-shadow:none}
.category-card:hover .category-icon,.category-card:focus-visible .category-icon{filter:drop-shadow(0 15px 11px rgba(0,0,0,.78)) drop-shadow(0 0 15px rgba(255,173,0,.4))}
.header-actions .login-link,.header-actions .register-link{width:132px;min-height:44px;padding:3px;color:#fff;background:rgba(5,2,8,.78);border:1px solid rgba(255,173,0,.72);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.52);font-size:.72rem;font-weight:850;text-shadow:0 2px 2px #000,0 4px 11px #000d}
.header-actions .register-link,.header-actions .login-link.is-session-button{color:#fff;background:var(--accent);border:3px solid rgba(5,2,8,.86);box-shadow:0 0 0 1px rgba(255,173,0,.72),0 10px 28px rgba(0,0,0,.52)}
.header-actions .login-link:hover,.header-actions .register-link:hover{color:#130817;background:#ffad00;border-color:#130817;text-shadow:none}
[data-login-open][hidden]{display:none!important}
.header-actions .login-link,.header-actions .register-link,.planner-submit{color:#120818;font-family:inherit;font-weight:900;text-shadow:none}
.header-actions .login-link.is-session-button{color:#120818;text-shadow:none}
.planner-submit{background:linear-gradient(145deg,#ffc44e 0%,#ffa800 48%,#ee8d00 100%);border:2px solid rgba(18,8,24,.78);box-shadow:inset 0 1px rgba(255,255,255,.48);font-size:clamp(.88rem,1.1vw,1.05rem);letter-spacing:.015em}
.planner-submit:hover,.planner-submit:focus-visible{background:linear-gradient(145deg,#ffd477 0%,#ffb51d 55%,#f39400 100%);border-color:#120818;transform:translateY(-1px)}

/* Scrollen bleibt aktiv, sichtbare Browserleisten bleiben im gesamten Auftritt verborgen. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0;height:0}

body.has-legal-popup{overflow:hidden}
.legal-popup-layer{position:fixed;z-index:1200;inset:0;display:grid;padding:clamp(10px,3vw,34px);place-items:center;background:rgba(5,2,8,.78);backdrop-filter:blur(18px)}
.legal-popup-layer[hidden]{display:none}
.legal-popup{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(1040px,100%);max-height:min(900px,calc(100vh - 36px));overflow:hidden;background:linear-gradient(145deg,rgba(35,17,43,.98),rgba(10,5,14,.99));border:1px solid rgba(255,173,0,.58);border-radius:22px;box-shadow:0 45px 130px rgba(0,0,0,.82)}
.legal-popup>header{display:flex;min-height:76px;padding:15px 18px;align-items:center;justify-content:space-between;gap:18px;background:rgba(13,6,18,.88);border-bottom:1px solid rgba(255,255,255,.12)}
.legal-popup>header span{display:block;color:var(--accent);font-size:.65rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.legal-popup>header h2{margin:3px 0 0;font-size:clamp(1.3rem,2.8vw,2rem)}.legal-popup>header button{display:grid;width:44px;height:44px;place-items:center;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:11px;cursor:pointer;font-size:1.35rem}.legal-popup>header button:hover{color:#140818;background:var(--accent);border-color:var(--accent)}
.legal-popup-content{overflow:auto;padding:clamp(22px,4vw,48px);scrollbar-width:none}.legal-popup-content::-webkit-scrollbar{display:none}.legal-popup-content>.eyebrow{margin:0 0 12px;color:var(--accent);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.legal-popup-content>h1{margin:0;font-size:clamp(2.4rem,7vw,5.6rem);line-height:.9}.legal-popup-content>.lead{max-width:780px;color:var(--muted)}.legal-popup-content .legal-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.legal-popup-content .legal-meta span{padding:6px 9px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;font-size:.65rem}.legal-popup-content .legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}.legal-popup-content .legal-card{padding:22px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:17px}.legal-popup-content .legal-card.wide{grid-column:1/-1}.legal-popup-content .legal-card h2{margin:0;font-size:clamp(1.15rem,2vw,1.55rem)}.legal-popup-content .legal-card p,.legal-popup-content .legal-card li{color:var(--muted);font-size:.84rem;line-height:1.65}.legal-popup-content .legal-card a,.legal-popup-content>a{color:var(--accent);font-weight:800}
@media(max-width:700px){.legal-popup-layer{padding:6px}.legal-popup{max-height:calc(100vh - 12px);border-radius:16px}.legal-popup>header{min-height:65px;padding:10px 12px}.legal-popup-content{padding:20px 14px}.legal-popup-content .legal-grid{grid-template-columns:1fr}.legal-popup-content .legal-card.wide{grid-column:auto}}
@media(max-width:680px){
  .main-nav{width:154px;padding:10px}
  .main-nav> a{width:132px;min-height:44px;padding:8px 10px;text-align:center}
  #main-navigation .juhu-language-switch.is-mobile-nav{width:132px;margin-top:13px}
}
@media(min-width:1051px){
  .planner-shell{top:198px;right:clamp(14px,1.7vw,28px);width:min(440px,calc(100% - 36px));min-height:0;transform:none;background:radial-gradient(circle at 88% 0,rgba(255,168,0,.09),transparent 23rem),linear-gradient(145deg,rgba(42,22,50,.52),rgba(11,5,15,.52));border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px rgba(255,255,255,.1),0 34px 90px rgba(0,0,0,.48);backdrop-filter:blur(32px) saturate(1.25)}
  .planner-shell>.section-kicker{white-space:nowrap;font-size:.62rem;letter-spacing:.1em}
}

/* Einheitlich gestaltete rechtliche Inhalte im Footer-Popup. */
.legal-popup-heading{display:flex;min-width:0;align-items:center;gap:18px}
.legal-popup-brand{flex:0 0 auto;transform:scale(.78);transform-origin:left center}
.legal-popup>header .legal-popup-brand .brand-logo-juhu{display:grid;width:96px;height:43px;place-items:center;color:var(--accent);font-size:1.45rem;letter-spacing:-.09em;text-transform:none}
.legal-popup>header .legal-popup-brand .brand-logo-party{display:grid;width:94px;height:37px;margin:3px;place-items:center;color:#fff;font-size:1.45rem;letter-spacing:-.09em;text-transform:uppercase}
.legal-popup>header .legal-popup-heading h2{margin:0;font-size:clamp(1.05rem,2.1vw,1.55rem);line-height:1.05}
.legal-popup-content>article.legal-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;background:transparent;border:0;border-radius:0}
.legal-popup-content .legal-fact{min-width:0;padding:20px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:17px}
.legal-popup-content .legal-fact .fact-label{margin:0 0 5px;color:var(--accent);font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.legal-popup-content .legal-fact h2{margin:0 0 9px;font-size:clamp(1rem,1.8vw,1.35rem)}
.legal-popup-content .legal-fact p,.legal-popup-content .legal-fact address{margin:0;color:var(--muted);font-size:.8rem;line-height:1.55}
.legal-popup-content .contact-list{display:grid;gap:4px}
.legal-popup-content .legal-notices{margin-top:28px}
.legal-popup-content .legal-notices>header p{margin:0 0 6px;color:var(--accent);font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.legal-popup-content .legal-notices>header h2{margin:0;font-size:clamp(1.45rem,3.3vw,2.45rem);line-height:1}
.legal-popup-content .notice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.legal-popup-content .notice-grid details{overflow:hidden;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:15px}
.legal-popup-content .notice-grid summary{display:flex;min-height:56px;padding:13px 16px;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:.86rem;font-weight:850;list-style:none}
.legal-popup-content .notice-grid summary::-webkit-details-marker{display:none}
.legal-popup-content .notice-grid summary i{color:var(--accent);font-style:normal;font-size:1.2rem}
.legal-popup-content .notice-content{padding:0 16px 16px}
.legal-popup-content .notice-content p,.legal-popup-content .notice-content li{color:var(--muted);font-size:.8rem;line-height:1.55}
.legal-popup-content>.lead{font-size:.9rem;line-height:1.55}
.legal-popup-content>h1{font-size:clamp(2rem,4vw,3.5rem)}
@media(max-width:700px){
  .legal-popup-heading{gap:4px}
  .legal-popup-brand{margin-right:-32px;transform:scale(.62)}
  .legal-popup-content>article.legal-card,.legal-popup-content .notice-grid{grid-template-columns:1fr}
}