:root {
  --tech-red: #f21c32;
  --tech-red-hot: #ff4f60;
  --tech-ink: #050608;
  --tech-panel: rgba(17, 19, 23, .78);
  --tech-line: rgba(255, 255, 255, .16);
  --tech-glow: rgba(242, 28, 50, .24);
  --scene-progress: 0;
}

.wordmark,
.language-switch,
.text-link {
  min-height: 44px;
  align-items: center;
}

.language-switch {
  height: 44px;
}

.language-switch-code,
.why-section .eyebrow,
.closing-cta .eyebrow {
  color: #ff4053;
}

.button-primary {
  border-color: #c91732;
  background: #c91732;
}

.button-primary:hover {
  border-color: #a90f28;
  background: #a90f28;
}

body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at calc(12% + var(--pointer-x, 38%)) calc(8% + var(--pointer-y, 12%)), rgba(242, 28, 50, .09), transparent 28rem),
    linear-gradient(120deg, rgba(255, 255, 255, .018), transparent 35%),
    #07080a;
  content: "";
  pointer-events: none;
}

body::after {
  position: fixed;
  z-index: 300;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tech-red), transparent);
  box-shadow: 0 0 22px var(--tech-glow);
  content: "";
  pointer-events: none;
}

.site-header {
  border-bottom-color: rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(5, 6, 8, .94), rgba(5, 6, 8, .72));
  box-shadow: 0 12px 48px rgba(0, 0, 0, .2);
}

.wordmark img {
  filter: drop-shadow(0 0 12px rgba(242, 28, 50, .16));
}

.site-nav a::before {
  position: absolute;
  top: 17px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tech-red);
  content: "";
  opacity: 0;
  transform: translate(-50%, -5px);
  transition: opacity 180ms ease, transform 260ms var(--ease);
}

.site-nav a:is(:hover, .is-active, [aria-current="location"])::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hero {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8, 9, 11, .1), rgba(8, 9, 11, .84)),
    radial-gradient(circle at 80% 36%, rgba(242, 28, 50, .11), transparent 30rem);
}

.hero::before {
  position: absolute;
  z-index: 0;
  top: 18%;
  right: max(-12vw, -180px);
  width: min(62vw, 880px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 12%, rgba(255, 255, 255, .035) 12.2% 12.45%),
    radial-gradient(circle, rgba(242, 28, 50, .08), transparent 64%);
  content: "";
  opacity: .86;
  transform: translate3d(calc((var(--pointer-x, 50) - 50) * .05px), calc((var(--pointer-y, 50) - 50) * .05px), 0);
  pointer-events: none;
}

.hero::after {
  position: absolute;
  z-index: 0;
  right: 7%;
  bottom: 12%;
  width: min(34vw, 480px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 28, 50, .92), transparent);
  box-shadow: 0 -26px 0 rgba(242, 28, 50, .14), 0 26px 0 rgba(242, 28, 50, .08);
  content: "";
  transform: scaleX(calc(.45 + (var(--scroll-progress) * .55)));
  transform-origin: right;
}

.tech-canvas {
  position: absolute;
  z-index: 0;
  inset: var(--header-height) 0 0;
  width: 100%;
  height: calc(100% - var(--header-height));
  opacity: .72;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-content {
  z-index: 2;
}

.preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(242, 28, 50, .42);
  border-radius: 999px;
  background: rgba(242, 28, 50, .07);
  color: #ffd9dd;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.preview-badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tech-red);
  box-shadow: 0 0 12px var(--tech-red);
  content: "";
  animation: tech-live 1.8s ease-in-out 3;
}

.hero h1 {
  max-width: 1080px;
  text-wrap: balance;
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .24));
}

.hero h1 span {
  background: linear-gradient(100deg, #fff 0 30%, #8b8c91 47%, #fff 64%, #8d8e92 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
  animation: tech-metal 4.8s linear 1 both;
}

.hero-bottom p {
  max-width: 54ch;
  text-wrap: pretty;
}

.button {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease, transform 220ms var(--ease), box-shadow 220ms ease;
}

.button::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .28), transparent 66%);
  content: "";
  transform: translateX(-120%);
  transition: transform 520ms var(--ease);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .26);
}

.button:hover::before {
  transform: translateX(120%);
}

.section-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section-intro::after {
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: -80%;
  width: 46vw;
  aspect-ratio: 1;
  border: 1px solid rgba(242, 28, 50, .12);
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 0 100px rgba(242, 28, 50, .05);
}

.product-story {
  --scene-progress: 0;
  min-height: min(980px, 100svh);
  display: grid;
  align-items: center;
  isolation: isolate;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--tone, var(--tech-red)) 4%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, .012), transparent 48%);
}

.product-story::before {
  width: 2px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--tone, var(--tech-red)) 55%, transparent);
  transform: scaleY(calc(.12 + (var(--scene-progress) * .88)));
  transform-origin: top;
}

.product-story::after {
  position: absolute;
  z-index: -1;
  top: 16%;
  right: 7%;
  width: min(34vw, 480px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--tone, var(--tech-red)) 14%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone, var(--tech-red)) 6%, transparent), transparent 68%);
  content: "";
  opacity: calc(.35 + (var(--scene-progress) * .65));
  transform: translate3d(0, calc((.5 - var(--scene-progress)) * 34px), 0) scale(calc(.92 + (var(--scene-progress) * .08)));
}

.product-reverse::after {
  right: auto;
  left: 6%;
}

.product-grid {
  perspective: 1500px;
}

.product-copy {
  position: relative;
}

.product-copy::before {
  display: block;
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--tone, var(--tech-red)) 82%, white);
  content: "0" attr(data-scene-index);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
}

.product-copy h2 {
  max-width: 16ch;
  text-wrap: balance;
}

.product-copy p,
.feature-list {
  text-wrap: pretty;
}

.media-frame,
.ticket-visual,
.codec-visual,
.signal-console {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  will-change: transform;
  transform: translate3d(0, var(--parallax, 0), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out, filter 240ms ease, opacity 240ms ease;
}

.media-frame::before,
.ticket-visual::before,
.codec-visual::before {
  position: absolute;
  z-index: -1;
  inset: 8% 4% -7%;
  border-radius: 28px;
  background: color-mix(in srgb, var(--tone, var(--tech-red)) 18%, transparent);
  content: "";
  filter: blur(36px);
  opacity: calc(.24 + (var(--scene-progress) * .44));
  transform: translateZ(-1px);
}

.media-landscape {
  border-color: color-mix(in srgb, var(--tone, var(--tech-red)) 34%, var(--tech-line));
  border-radius: 18px;
  background: rgba(13, 15, 19, .92);
  box-shadow: 0 38px 110px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .1);
}

.media-landscape img,
.platform-card-shot img {
  transition: transform 900ms cubic-bezier(.2, .8, .2, 1), filter 500ms ease;
}

.product-story.is-tech-active .media-landscape img,
.platform-card:is(:hover, :focus-within) .platform-card-shot img {
  transform: scale(1.018);
  filter: saturate(1.05) contrast(1.02);
}

.frame-chrome {
  border-bottom-color: rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025));
}

.platform-card,
.codec-signal-console,
.signal-console {
  border-color: rgba(255, 255, 255, .13);
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .08);
  transition: transform 260ms var(--ease), border-color 260ms ease, background 260ms ease;
}

.platform-brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #202124;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 720;
  letter-spacing: -.035em;
}

.platform-brand-wordmark small {
  color: #5f6368;
  font-size: .58em;
  font-weight: 650;
  letter-spacing: 0;
}

.ticket-brand-redbull-text {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  color: #2b1800;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.platform-card:is(:hover, :focus-within) {
  border-color: rgba(242, 28, 50, .44);
  background: linear-gradient(145deg, rgba(242, 28, 50, .08), rgba(255, 255, 255, .025));
  transform: translateY(-5px);
}

/* Status motion introduces the relevant control, then rests. */
.live-dot::before {
  animation-iteration-count: 3;
}

.signal-bars i {
  animation-iteration-count: 4;
}

.stream-node span {
  color: #9aa1ac;
}

.site-footer p {
  color: #8d9198;
}

.sdg-icons a {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: visible;
  box-shadow: none;
}

.sdg-icons img {
  width: clamp(28px, 2.2vw, 34px);
  height: auto;
  aspect-ratio: 1;
}

.tech-rail {
  position: fixed;
  z-index: 90;
  top: 50%;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateY(-50%);
}

.tech-rail button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tech-rail button::before {
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(5, 6, 8, .74);
  content: "";
  transition: width 180ms ease, height 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.tech-rail button[aria-current="true"]::before {
  width: 8px;
  height: 8px;
  border-color: var(--tech-red);
  background: var(--tech-red);
  box-shadow: 0 0 15px var(--tech-red);
}

.tech-motion [data-tech-reveal] {
  opacity: .18;
  transform: translate3d(0, 34px, 0);
  transition: opacity 720ms ease, transform 840ms cubic-bezier(.16, 1, .3, 1);
}

.tech-motion [data-tech-reveal].tech-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* The original page hid reveal blocks until an observer fired. The preview
   remains complete if JavaScript, observers, or screenshots run unusually. */
.js [data-reveal] {
  opacity: 1;
  transform: none;
}

@keyframes tech-live {
  50% { opacity: .45; box-shadow: 0 0 4px var(--tech-red); }
}

@keyframes tech-metal {
  to { background-position: -120% 0; }
}

@media (max-width: 1050px) {
  .tech-rail { display: none; }
  .product-story { min-height: auto; }
  .product-grid { perspective: none; }
}

@media (max-width: 760px) {
  .language-switch {
    min-width: 44px;
    height: 44px;
    padding-inline: 9px;
  }

  .hero::before {
    top: 12%;
    right: -64%;
    width: 128vw;
  }

  .tech-canvas { opacity: .44; }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 5rem);
    line-height: .9;
  }

  .product-story {
    padding-block: 92px;
  }

  .product-story::after {
    top: auto;
    right: -34%;
    bottom: 2%;
    left: auto;
    width: 88vw;
  }

  .product-reverse::after {
    right: auto;
    left: -34%;
  }

  .media-frame,
  .ticket-visual,
  .codec-visual,
  .signal-console {
    transform: translate3d(0, var(--parallax, 0), 0);
  }

  .media-landscape {
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-badge::before,
  .hero h1 span {
    animation: none;
  }

  .tech-canvas,
  .tech-rail {
    display: none;
  }

  .product-story::before,
  .product-story::after,
  .media-frame,
  .ticket-visual,
  .codec-visual,
  .signal-console,
  [data-tech-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}