:root {
  color-scheme: dark;
  --ink: #031018;
  --white: #fbf8f3;
  --orange: #ff780a;
  --blue: #9ce2f7;
  --line: #304751;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--white);
  background: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0 auto; max-width: 1920px; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 5; background: var(--ink); padding: .7rem; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
h1, h2, p, figure, blockquote { margin: 0; }
.site-header {
  min-height: 62px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 3.8%;
  border-bottom: 1px solid #225169;
  background: #030e15;
}
.brand { display: grid; justify-items: start; width: fit-content; }
.brand img { width: 177px; height: auto; }
.brand span { font-size: 9px; margin: 2px 0 0 2px; }
nav { display: flex; align-items: center; gap: clamp(14px, 2.45vw, 40px); }
nav a, nav button {
  position: relative;
  border: 0;
  background: transparent;
  padding: 17px 7px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
nav a:hover, nav button:hover { color: #ffad6e; }
nav [aria-current]::after { position: absolute; content: ""; inset: auto 0 7px; height: 3px; background: var(--orange); }
.search-button {
  display: grid;
  justify-self: end;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #9aabb1;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.search-button:hover { border-color: var(--orange); }
.search-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(350px, 24.22vw, 455px);
  overflow: hidden;
  border-bottom: 1px solid #286682;
  background: radial-gradient(ellipse at 74% 40%, #0f222c, #020a10 65%);
}
.hero-art {
  position: absolute;
  z-index: -2;
  inset: 0 11% 0 35%;
  background: url(assets/studio.webp) center 40% / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 17%, #000 81%, transparent);
}
.hero-network {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 23%;
  background: url(assets/constellation.svg) right center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 33%);
  pointer-events: none;
}
.hero-copy { width: min(46%, 595px); padding: 22px 0 30px; margin-left: 4.2%; }
.hero-brand { width: clamp(260px, 27vw, 490px); height: auto; margin: 0 0 5px -5px; mix-blend-mode: lighten; }
.hero h1 { font-size: clamp(27px, 2.25vw, 42px); line-height: .99; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 15px #02070b; }
.hero-copy > p { max-width: 460px; margin-top: 10px; font-size: clamp(15px, 1.14vw, 19px); line-height: 1.25; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border: 1px solid;
  border-radius: 100px;
  padding: 8px 17px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  background: #020a1199;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.button-primary { padding: 12px 25px; font-size: 15px; background: #ed5005; border-color: #ed5005; color: #fff; }
.button-primary:hover { background: #ad3600; border-color: #ff9b53; }
.button-outline { border-color: #ff9200; }
.button-outline span { font-size: 18px; color: #ffa026; line-height: 12px; }
.button-outline:hover { background: #4b260d; }
.button-light { border-color: #fff9; }
.button-light:hover { background: #123849; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #e1e9ed; }
.status span { width: 7px; height: 7px; border-radius: 50%; background: #ffa536; }
.hero-mantra { position: absolute; right: 2.8%; top: 34%; font-size: clamp(11px, 1vw, 16px); line-height: 1.56; text-transform: uppercase; letter-spacing: .19em; text-shadow: 0 0 12px #000, 0 0 5px #000; }
.hero-mantra::after { content: ""; display: block; width: 50px; height: 3px; margin-top: 10px; background: var(--orange); }
.about {
  min-height: clamp(188px, 12.3vw, 230px);
  display: grid;
  grid-template-columns: 26% 26.3% 22.5% 25.2%;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #030f17;
}
.about-photo { height: 100%; min-height: 188px; position: relative; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; mask-image: linear-gradient(90deg, #000 75%, transparent); }
.about-copy { padding: 11px 10px 11px 18px; position: relative; z-index: 1; }
.eyebrow { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .115em; color: #ff950d; }
.about h2, .host h2 { font-size: clamp(21px, 1.48vw, 28px); line-height: 1.04; margin: 4px 0 6px; letter-spacing: -.02em; }
.about-copy > p:not(.eyebrow) { font-size: clamp(12px, .9vw, 17px); line-height: 1.16; max-width: 425px; }
.about-copy .button { margin-top: 8px; padding: 6px 17px; }
.about-orb { width: 100%; height: auto; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 87%, transparent); }
.about-quote { padding: 16px 14% 16px 7%; }
.about-quote blockquote { font-size: clamp(16px, 1.28vw, 23px); line-height: 1.18; font-style: italic; max-width: 275px; }
.about-quote figcaption { font-size: 12px; margin-top: 13px; letter-spacing: .17em; text-transform: uppercase; }
.about-quote figcaption::before { content: ""; display: inline-block; width: 12px; height: 2px; background: var(--orange); vertical-align: middle; margin-right: 8px; }
.lower { display: grid; grid-template-columns: 49.4% 50.6%; border-bottom: 1px solid #246381; }
.lower-left { min-width: 0; display: flex; flex-direction: column; background: radial-gradient(ellipse at bottom, #082335, #030f17 69%); }
.topics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
  align-items: stretch;
  padding: 10px 2.7%;
  border-bottom: 1px solid #173e52;
}
.topics::after, .host::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: auto 0 -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 3%, #178ac0 25%, #a1e9ff 74%, transparent 99%);
  box-shadow: 0 -1px 12px 1px #12a9f355;
}
.topics button { border: 0; border-right: 1px solid #7d909b; background: transparent; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 0 3px; min-height: 65px; cursor: pointer; }
.topics button:last-child { border-right: 0; }
.topics button:hover { background: #183649; }
.topics svg { width: 38px; height: 34px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topics button:nth-child(4) svg { stroke: #fff9ee; stroke-width: 1.5; }
.topics button:last-child svg { width: 46px; stroke-width: 2.7; }
.topics span { font-size: clamp(11px, 1vw, 16px); line-height: 1.13; }
.host { display: grid; grid-template-columns: 34.5% minmax(0, 1fr) 20%; align-items: center; gap: 3%; padding: 20px 3.5% 24px; position: relative; flex: 1; }
.host-photo { width: 100%; height: auto; border-radius: 11px; }
.host h2 { font-size: clamp(20px, 1.65vw, 30px); }
.host-copy > p:not(.eyebrow) { font-size: clamp(12px, .86vw, 16px); line-height: 1.25; margin-top: 9px; }
.host-copy .button { margin-top: 12px; }
.host-quote { border-left: 2px solid var(--orange); padding-left: 12px; font-size: clamp(13px, 1.1vw, 20px); font-style: italic; line-height: 1.25; }
.connected { position: relative; isolation: isolate; min-height: clamp(350px, 22.8vw, 435px); display: flex; align-items: center; overflow: hidden; border-left: 1px solid #295164; background: #02150e; }
.data-field { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #02100eb0, #00131172 63%, #0000), url(assets/data.svg); }
.connected-art { position: absolute; z-index: -1; inset: 0 0 0 41%; background: url(assets/connected.webp) right center / cover no-repeat; mask-image: linear-gradient(90deg, transparent, #000 13%); }
.connected-copy { width: max(45%, 320px); padding: 24px 0 26px; margin-left: 5%; text-shadow: 0 2px 8px #000, 0 0 15px #000; }
.connected h2 { font: bold clamp(38px, 3.35vw, 66px)/.88 Georgia, serif; letter-spacing: -.025em; }
.connected-terms { font-size: clamp(14px, 1.16vw, 20px); white-space: nowrap; margin-top: 10px; }
.connected-terms b { color: var(--orange); margin: 0 .2em; }
.connected-description { max-width: 250px; font-size: clamp(14px, 1.03vw, 19px); line-height: 1.22; margin: 15px 0 12px; }
.site-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px 15px; min-height: 48px; padding: 13px 16px; background: #030e15; font-size: 13px; text-transform: uppercase; letter-spacing: .23em; }
.site-footer b { color: var(--orange); }
dialog { width: min(550px, calc(100% - 30px)); max-height: 85dvh; padding: 24px; border: 1px solid #457087; border-radius: 12px; background: #071922; color: var(--white); box-shadow: 0 18px 80px #000b; }
dialog::backdrop { background: #000a; }
.dialog-header { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 14px; }
.dialog-header h2 { font-size: 27px; }
.dialog-close { cursor: pointer; background: transparent; border: 1px solid #627988; border-radius: 50%; width: 34px; height: 34px; font-size: 24px; line-height: 1; }
#detail-content { font-size: 16px; line-height: 1.5; }
#detail-content p + p { margin-top: 12px; }
.search-input { width: 100%; border: 1px solid #627988; border-radius: 5px; padding: 9px 11px; font: inherit; color: inherit; background: #020d14; }
.search-results { display: grid; gap: 3px; padding: 0; margin: 12px 0 0; list-style: none; }
.search-results button { width: 100%; padding: 7px 0; text-align: left; border: 0; border-bottom: 1px solid #345264; background: transparent; cursor: pointer; }
.search-results button:hover { color: var(--blue); }
@media (max-width: 1150px) {
  .hero-mantra { right: 2%; }
  .about { grid-template-columns: 24% 31% 19% 26%; }
  .about-copy { padding-left: 10px; }
  .host { grid-template-columns: 33% 1fr; padding-top: 16px; padding-bottom: 16px; }
  .host-quote { grid-column: 1 / -1; margin-top: 6px; }
  .connected-copy { width: min(80%, 320px); }
}
@media (max-width: 850px) {
  .site-header { gap: 8px; }
  nav { gap: 4px; }
  nav a, nav button { padding-inline: 6px; }
  .hero-copy { width: 58%; }
  .hero-art { inset-inline: 32% -9%; }
  .hero-mantra { display: none; }
  .about { grid-template-columns: 32% 42% 26%; }
  .about-orb { display: none; }
  .about-quote { padding: 10px; }
  .lower { grid-template-columns: 1fr; }
  .host { grid-template-columns: 28% minmax(0, 1fr) 22%; }
  .host-quote { grid-column: auto; }
  .connected { border-left: 0; border-top: 1px solid var(--line); min-height: 355px; }
  .connected-art { inset-inline-start: 34%; background-position: center 47%; }
  .connected-description { font-size: 16px; }
}
@media (max-width: 580px) {
  .site-header { grid-template-columns: 1fr auto; padding-top: 8px; gap: 0 10px; }
  .brand img { width: 135px; }
  .brand span { font-size: 7px; }
  .search-button { grid-row: 1; grid-column: 2; width: 36px; height: 36px; }
  nav { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; gap: 0; }
  nav a, nav button { padding: 12px 4px 13px; font-size: 13px; }
  nav [aria-current]::after { bottom: 5px; }
  .hero { align-items: end; min-height: 490px; }
  .hero-art { inset: 0 -4% 29% -9%; background-position: 74% top; mask-image: linear-gradient(#000 50%, transparent 99%); }
  .hero-network { width: 44%; opacity: .63; }
  .hero-copy { width: 92%; margin: 0 auto; padding: 10px 0 24px; }
  .hero-brand { width: 250px; }
  .hero h1 { font-size: clamp(23px, 6.4vw, 34px); }
  .hero-copy > p { max-width: 390px; }
  .hero-actions { margin-top: 14px; gap: 12px; }
  .button-primary { padding: 10px 17px; }
  .about { grid-template-columns: 1fr 1fr; }
  .about-photo { grid-column: 1 / -1; min-height: 190px; }
  .about-photo img { object-position: center 35%; mask-image: linear-gradient(#000 69%, transparent); }
  .about-copy { grid-column: 1 / -1; padding: 0 5% 12px; margin-top: -15px; }
  .about-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.3; }
  .about-orb { display: block; }
  .about-quote { padding-right: 10%; }
  .about-quote blockquote { font-size: 15px; }
  .about-quote figcaption { font-size: 9px; letter-spacing: .1em; }
  .topics { padding-inline: 1%; }
  .topics svg { width: 30px; height: 29px; }
  .topics button:last-child svg { width: 35px; }
  .host { grid-template-columns: 34% 1fr; gap: 13px; }
  .host-quote { grid-column: 1 / -1; margin-top: 0; }
  .connected { min-height: 335px; }
  .connected-art { inset-inline-start: 28%; opacity: .83; background-position: 56% center; }
  .connected-copy { width: 90%; }
  .connected-description { max-width: 207px; }
  .site-footer { gap: 6px 9px; font-size: 10px; letter-spacing: .13em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}