@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");

    :root {
      --page-width: 1120px;
      --space: 1.25rem;
      --color-white: #FEFEFC;
      --color-black: #000001;
      --color-purple: #843DDF;
      --color-lavender: #A379F2;
      --color-charcoal: #21212A;
      --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-heading: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
      --radius: 20px;
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --duration-fast: 200ms;
      --duration-reveal: 650ms;
      color-scheme: dark;
    }

    * { box-sizing: border-box; }

    html {
      scroll-padding-top: 6rem;
    }

    body {
      position: relative;
      isolation: isolate;
      min-width: 360px;
      margin: 0;
      font-family: var(--font-body);
      line-height: 1.7;
      color: var(--color-white);
      background: var(--color-black);
    }

    body::before {
      position: fixed;
      z-index: -1;
      inset: 0;
      background:
        radial-gradient(ellipse at 12% 9%, color-mix(in srgb, var(--color-purple) 30%, transparent), transparent 34rem),
        radial-gradient(ellipse at 88% 26%, color-mix(in srgb, var(--color-lavender) 22%, transparent), transparent 32rem),
        radial-gradient(ellipse at 50% 82%, color-mix(in srgb, var(--color-purple) 18%, transparent), transparent 38rem);
      content: "";
      pointer-events: none;
    }

    a {
      color: var(--color-lavender);
      text-underline-offset: .2em;
      text-decoration: none;
    }

    button, a { -webkit-tap-highlight-color: transparent; }

    :focus-visible {
      outline: 2px solid var(--color-lavender);
      outline-offset: 3px;
    }

    .site-shell {
      width: min(100% - 2.5rem, var(--page-width));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: color-mix(in srgb, var(--color-charcoal) 55%, transparent);
      box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--color-black) 35%, transparent);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      isolation: isolate;
      opacity: .96;
    }

    .site-header::before,
    .site-header::after {
      position: absolute;
      z-index: -1;
      inset-inline: 0;
      content: "";
      opacity: 0;
      pointer-events: none;
    }

    .site-header::before {
      inset-block: 0;
      background: color-mix(in srgb, var(--color-charcoal) 42%, transparent);
    }

    .site-header::after {
      bottom: 0;
      height: 1px;
      background: color-mix(in srgb, var(--color-white) 20%, transparent);
    }

    .site-header.is-scrolled::before,
    .site-header.is-scrolled::after {
      opacity: 1;
    }

    .site-header.is-scrolled { opacity: 1; }

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

    .header-inner {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand {
      font-family: var(--font-heading);
      color: var(--color-white);
      font-size: 1.05rem;
      font-weight: 850;
      letter-spacing: .12em;
      text-decoration: none;
      white-space: nowrap;
    }

    .brand:hover { color: var(--color-lavender); }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .nav-link {
      font-family: var(--font-heading);
      display: inline-block;
      padding: .6rem .85rem;
      border: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
      border-radius: 999px;
      text-decoration: none;
      font-size: .88rem;
      font-weight: 600;
    }

    .nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"] {
      border-color: color-mix(in srgb, var(--color-lavender) 72%, transparent);
      background: color-mix(in srgb, var(--color-lavender) 12%, var(--color-charcoal));
      color: var(--color-white);
    }

    .menu-toggle {
      display: none;
      padding: .65rem .85rem;
      border: 1px solid color-mix(in srgb, var(--color-lavender) 55%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--color-charcoal) 72%, transparent);
      color: var(--color-white);
      font: 600 .95rem var(--font-heading);
      cursor: pointer;
    }

    .menu-toggle:hover { background: color-mix(in srgb, var(--color-purple) 35%, var(--color-charcoal)); }

    main { min-height: 70vh; }

    .page {
      display: none;
      padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
    }

    .page.is-active { display: block; }
    .page, .section { scroll-margin-top: 6rem; }

    .eyebrow {
      margin: 0 0 .65rem;
      color: var(--color-lavender);
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .media-image {
  display: block;
  width: min(100%, 340px);
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
}

.media-cover {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: 16px;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-black);
  overflow: hidden;
  border-radius: 14px;
}

.video-frame iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
  inset: 0;
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      font-family: var(--font-heading);
      max-width: 950px;
      margin-bottom: 1.25rem;
      color: var(--color-white);
      font-size: clamp(3rem, 9vw, 7rem);
      font-weight: 850;
      line-height: .94;
      letter-spacing: -.065em;
      text-wrap: balance;
    }

    h2 {
      font-family: var(--font-heading);
      margin-bottom: 1rem;
      color: var(--color-white);
      font-size: clamp(1.65rem, 4vw, 2.65rem);
      font-weight: 750;
      line-height: 1.08;
      letter-spacing: -.035em;
      text-wrap: balance;
    }

    h3 {
      font-family: var(--font-heading);
      margin-bottom: .55rem;
      color: var(--color-white);
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      line-height: 1.25;
    }

    .lead {
      max-width: 720px;
      color: color-mix(in srgb, var(--color-white) 90%, transparent);
      font-size: clamp(1.08rem, 2vw, 1.3rem);
      line-height: 1.75;
    }

    .muted { color: color-mix(in srgb, var(--color-white) 75%, transparent); }

    .hero {
      min-height: clamp(420px, 58vw, 660px);
      padding: clamp(2rem, 7vw, 6rem);
      border: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent);
      border-radius: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: clamp(1.25rem, 4vw, 2.5rem);
      text-align: center;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-purple) 10%, transparent), transparent 55%),
        color-mix(in srgb, var(--color-charcoal) 52%, transparent);
      box-shadow: 0 1.5rem 5rem color-mix(in srgb, var(--color-black) 35%, transparent), 0 0 3rem color-mix(in srgb, var(--color-purple) 12%, transparent);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }

    .hero > div {
      width: min(100%, 880px);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: .25rem;
    }

    .hero h1,
    .hero .lead,
    .hero .eyebrow {
      margin-inline: auto;
    }

    .hero .media-image {
      width: min(100%, 340px);
      max-height: 150px;
      object-fit: contain;
      filter: drop-shadow(0 0 1.5rem color-mix(in srgb, var(--color-purple) 30%, transparent));
    }

    .placeholder {
      min-height: 180px;
      border: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
      border-radius: 16px;
      display: grid;
      place-items: center;
      padding: 1rem;
      text-align: center;
      color: color-mix(in srgb, var(--color-white) 75%, transparent);
      background:
        repeating-linear-gradient(
          135deg,
          color-mix(in srgb, var(--color-charcoal) 80%, transparent),
          color-mix(in srgb, var(--color-charcoal) 80%, transparent) 12px,
          color-mix(in srgb, var(--color-white) 4%, var(--color-charcoal)) 12px,
          color-mix(in srgb, var(--color-white) 4%, var(--color-charcoal)) 24px
        );
    }

    .placeholder.large { min-height: 320px; }
    .placeholder.small { min-height: 120px; }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .75rem;
      margin-top: 1.25rem;
    }

    .button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 44px;
      padding: .75rem 1.15rem;
      border: 1px solid var(--color-purple);
      border-radius: 999px;
      text-decoration: none;
      font-weight: 700;
      background: var(--color-purple);
      color: var(--color-white);
      cursor: pointer;
      box-shadow: 0 .65rem 1.5rem color-mix(in srgb, var(--color-purple) 28%, transparent);
    }

    .button:hover {
      border-color: var(--color-lavender);
      background: var(--color-lavender);
      color: var(--color-black);
      box-shadow: 0 .85rem 1.8rem color-mix(in srgb, var(--color-purple) 38%, transparent);
    }

    .section { margin-top: clamp(3rem, 7vw, 5.5rem); }

    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 1rem;
      margin-bottom: 1.35rem;
    }

    .text-link {
      font-weight: 700;
      text-decoration: none;
    }

    .text-link:hover, .text-link:focus-visible,
    .footer-links a:hover, .footer-links a:focus-visible,
    a:not(.brand):not(.button):hover, a:not(.brand):not(.button):focus-visible {
      text-decoration: underline;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
    }

    .card {
      grid-column: span 4;
      min-width: 0;
      border: 1px solid color-mix(in srgb, var(--color-white) 13%, transparent);
      border-radius: 20px;
      padding: clamp(1.1rem, 2.5vw, 1.6rem);
      background: color-mix(in srgb, var(--color-charcoal) 68%, transparent);
      box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--color-black) 28%), inset 0 1px 0 color-mix(in srgb, var(--color-white) 5%, transparent);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }

    .card:hover {
      border-color: color-mix(in srgb, var(--color-lavender) 35%, transparent);
      box-shadow: 0 1.2rem 2.8rem color-mix(in srgb, var(--color-black) 32%), 0 0 1.5rem color-mix(in srgb, var(--color-purple) 10%, transparent);
    }

    .card.span-6 { grid-column: span 6; }
    .card.span-8 { grid-column: span 8; }
    .card.span-12 { grid-column: span 12; }

    .technical-information { text-align: center; }

    .technical-information .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 760px;
      margin-inline: auto;
    }

    .technical-information .card { grid-column: auto; }

    .card .placeholder { margin-bottom: 1rem; }

    .media-carousel-track {
      display: flex;
      gap: 1rem;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .media-carousel-track::-webkit-scrollbar { display: none; }

    .media-carousel-slide {
      flex: 0 0 calc((100% - 2rem) / 3);
      min-width: 0;
      margin: 0;
      padding: .75rem;
      border: 1px solid color-mix(in srgb, var(--color-white) 13%, transparent);
      border-radius: 20px;
      background: color-mix(in srgb, var(--color-charcoal) 72%, transparent);
      box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--color-black) 24%);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      scroll-snap-align: start;
    }

    .media-carousel-slide:hover {
      border-color: color-mix(in srgb, var(--color-lavender) 42%, transparent);
      box-shadow: 0 1rem 2rem color-mix(in srgb, var(--color-black) 30%), 0 0 1.25rem color-mix(in srgb, var(--color-purple) 10%, transparent);
    }

    .articles-carousel .media-carousel-slide {
      flex-basis: calc((100% - 1rem) / 2);
    }

    .performance-photos .media-carousel-slide img {
      display: block;
      width: 100%;
      height: clamp(190px, 24vw, 280px);
      border-radius: 14px;
      object-fit: cover;
    }

    .performance-videos .media-carousel-slide .video-frame { margin-bottom: .75rem; }
    .performance-videos .media-carousel-slide h3 { font-size: 1rem; }
    .performance-videos .media-carousel-slide p { margin-bottom: .5rem; }

    .media-carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .75rem;
      margin-top: .75rem;
    }

    .media-carousel-button {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--color-lavender) 58%, transparent);
      border-radius: 50%;
      background: color-mix(in srgb, var(--color-charcoal) 72%, transparent);
      color: var(--color-lavender);
      font: inherit;
      font-size: 1.25rem;
      cursor: pointer;
    }

    .media-carousel-button:hover:not(:disabled) {
      border-color: var(--color-lavender);
      background: var(--color-lavender);
      color: var(--color-black);
    }

    .media-carousel-button:disabled {
      color: color-mix(in srgb, var(--color-white) 75%, transparent);
      cursor: not-allowed;
    }

    .media-carousel-status {
      min-width: 10rem;
      margin: 0;
      color: color-mix(in srgb, var(--color-white) 75%, transparent);
      text-align: center;
      font-size: .9rem;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .75rem;
      margin-top: 1.5rem;
    }

    .stat {
      border: 1px solid color-mix(in srgb, var(--color-white) 13%, transparent);
      padding: 1.25rem 1rem;
      text-align: center;
      border-radius: 18px;
      background: color-mix(in srgb, var(--color-charcoal) 68%, transparent);
      box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--color-black) 24%);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }

    .stat:hover {
      border-color: color-mix(in srgb, var(--color-lavender) 38%, transparent);
    }

    .stat strong {
      display: block;
      font-size: 1.35rem;
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      padding: 0;
      list-style: none;
    }

    .tag-list li {
      border: 1px solid color-mix(in srgb, var(--color-lavender) 38%, transparent);
      border-radius: 99px;
      padding: .35rem .75rem;
      font-size: .9rem;
      background: color-mix(in srgb, var(--color-charcoal) 70%, transparent);
    }

    .two-column {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: start;
    }

    #about.page {
      padding-block: 1.5rem 2.5rem;
      text-align: center;
    }

    #about .section { margin-top: 2rem; }

    #about .two-column { gap: 1.25rem; }

    #about .two-column > .media-image {
      width: 100%;
      max-width: none;
      margin: 0;
    }

    #about .two-column > div,
    #about .section > p {
      max-width: 760px;
      margin-inline: auto;
    }

    #about .tag-list { justify-content: center; }

    #about .detail-list {
      display: inline-block;
      padding: 0;
      list-style: none;
    }

    .detail-list {
      padding-left: 1.2rem;
    }

    .detail-list li { margin-bottom: .5rem; }

    .contact-panel {
      border: 1px solid color-mix(in srgb, var(--color-white) 16%, transparent);
      border-radius: 24px;
      padding: clamp(1.5rem, 5vw, 3.5rem);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--color-purple) 12%, transparent), transparent 60%),
        color-mix(in srgb, var(--color-charcoal) 55%, transparent);
      box-shadow: 0 1.25rem 3.5rem color-mix(in srgb, var(--color-black) 35%), 0 0 2.5rem color-mix(in srgb, var(--color-purple) 10%, transparent);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }

    .site-footer {
      border-top: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
      padding-block: 2.5rem;
      margin-top: 3rem;
      color: color-mix(in srgb, var(--color-white) 75%, transparent);
      background: color-mix(in srgb, var(--color-charcoal) 30%, transparent);
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-links a { text-decoration: none; }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    label {
      display: block;
      margin-bottom: .35rem;
      font-weight: 700;
    }

    input, textarea, select {
      width: 100%;
      padding: .85rem 1rem;
      border: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
      border-radius: 14px;
      font: inherit;
      background: color-mix(in srgb, var(--color-charcoal) 88%, transparent);
      color: var(--color-white);
    }

    input:focus, textarea:focus, select:focus {
      border-color: var(--color-lavender);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-lavender) 24%, transparent);
      outline: none;
    }

    textarea { min-height: 130px; resize: vertical; }
    input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--color-white) 75%, transparent); }
    .full-width { grid-column: 1 / -1; }

    @supports not (backdrop-filter: blur(1px)) {
      .site-header,
      .hero,
      .contact-panel,
      .card,
      .stat,
      .media-carousel-slide {
        background: var(--color-charcoal);
      }
    }

    @media (max-width: 760px) {
      .header-inner {
        min-height: 68px;
        flex-wrap: wrap;
        padding-block: .65rem;
      }

      .menu-toggle { display: inline-block; }

      .desktop-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
        padding: 0 0 .75rem;
      }

      .desktop-nav.is-open { display: flex; }

      .nav-link { text-align: center; }

      .site-shell { width: min(100% - 2rem, var(--page-width)); }

      .page { padding-block: 1.5rem 3.5rem; }
      .hero { min-height: 420px; }

      .card, .card.span-6, .card.span-8 { grid-column: span 12; }

      .stats { grid-template-columns: repeat(2, 1fr); }

      .two-column { grid-template-columns: 1fr; gap: 1.25rem; }

      .media-carousel-slide { flex-basis: calc((100% - 1rem) / 2); }
      .technical-information .grid { grid-template-columns: 1fr; }
      .technical-information .grid .card { grid-column: auto; }

      .section-heading {
        align-items: start;
        flex-direction: column;
      }

      .form-grid { grid-template-columns: 1fr; }
      .full-width { grid-column: auto; }
    }

    @media (max-width: 380px) {
      .site-shell { width: min(100% - 1.5rem, var(--page-width)); }
      .stats { grid-template-columns: 1fr 1fr; }
      .hero { min-height: 390px; padding: 1.25rem; }
    }

    @media (max-width: 480px) {
      .media-carousel-slide { flex-basis: 100%; }
      .performance-photos .media-carousel-slide img { height: 240px; }
      .button-row { width: 100%; }
      .button-row .button { flex: 1 1 100%; }
    }

    @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }

      a:not(.brand):not(.button) { position: relative; }

      a:not(.brand):not(.button)::after {
        position: absolute;
        right: 0;
        bottom: .08em;
        left: 0;
        height: 1px;
        background: currentColor;
        content: "";
        opacity: 0;
        transform: scaleX(.24);
        transform-origin: left center;
        transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
        pointer-events: none;
      }

      a:not(.brand):not(.button):hover::after,
      a:not(.brand):not(.button):focus-visible::after {
        opacity: 1;
        transform: scaleX(1);
      }

      a:not(.brand):not(.button):hover,
      a:not(.brand):not(.button):focus-visible {
        text-decoration: none;
      }

      .site-header,
      .site-header::before,
      .site-header::after {
        transition: opacity var(--duration-fast) var(--ease-out);
      }

      .brand,
      .nav-link,
      .menu-toggle,
      .button,
      .card,
      .stat,
      .media-carousel-slide,
      .media-carousel-button {
        transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
      }

      .brand:hover { opacity: .82; }
      .nav-link:hover, .nav-link:focus-visible { transform: translateY(-2px); }
      .menu-toggle:hover { transform: translateY(-2px); }
      .button:hover { transform: translateY(-3px); }
      .button:active { transform: translateY(-1px); }
      .card:hover, .card:focus-within { transform: translateY(-3px); }
      .stat:hover { transform: translateY(-2px); }
      .media-carousel-slide:hover { transform: translateY(-2px); }
      .media-carousel-button:hover:not(:disabled) { transform: translateY(-2px); }

      body::before {
        animation: background-drift 52s var(--ease-out) infinite alternate;
        will-change: transform;
      }

      .hero-sequence-item {
        animation: hero-sequence var(--duration-reveal) var(--ease-out) both;
        animation-delay: calc(var(--hero-order, 0) * 120ms);
      }

      .js .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition:
          transform var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms),
          opacity var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms);
      }

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

      .js .reveal.is-revealing { will-change: transform, opacity; }

      @keyframes background-drift {
        from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
        to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
      }

      @keyframes hero-sequence {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
    }