/* Mstr Network — vistas especiales, consolidado V10.2 */

:root {
  --mstr-bg: #06111f;
  --mstr-bg-2: #071426;
  --mstr-bg-3: #091c34;
  --mstr-panel: rgba(10,28,50,.76);
  --mstr-panel-strong: rgba(8,24,43,.94);
  --mstr-line: rgba(145,183,229,.15);
  --mstr-line-strong: rgba(145,183,229,.28);
  --mstr-text: #edf4fb;
  --mstr-muted: #879bb0;
  --mstr-muted-2: #6f8399;
  --mstr-blue: #2e72c6;
  --mstr-orange: #ff6600;
  --mstr-orange-soft: #ff9b58;
  --mstr-green: #35c68a;
}
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--mstr-bg);
  color: var(--mstr-text);
  font-family: Inter,"Segoe UI",Arial,sans-serif;
}
body {
  min-height: 100vh;
}
a {
  text-decoration: none;
  color: inherit;
}
button, input {
  font: inherit;
}
.special-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 76% 42%,rgba(46,114,198,.15),transparent 27%),radial-gradient(circle at 15% 88%,rgba(255,102,0,.07),transparent 28%),linear-gradient(145deg,var(--mstr-bg),var(--mstr-bg-2) 54%,var(--mstr-bg-3));
}
.special-page::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -4;
  opacity: .16;
  background-image: linear-gradient(rgba(120,165,220,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,165,220,.055) 1px,transparent 1px);
  background-size: 72px 72px;
  transform: perspective(900px) rotateX(62deg) translateY(17%);
  transform-origin: center bottom;
  animation: mstrGrid 26s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom,transparent 8%,#000 44%,#000 84%,transparent);
  mask-image: linear-gradient(to bottom,transparent 8%,#000 44%,#000 84%,transparent);
}
.special-orbit {
  position: absolute;
  z-index: -3;
  border: 1px solid rgba(83,142,255,.12);
  border-radius: 50%;
  pointer-events: none;
}
.special-orbit.one {
  width: min(760px,66vw);
  aspect-ratio: 1;
  right: -245px;
  top: -95px;
  animation: mstrFloat 16s ease-in-out infinite alternate;
}
.special-orbit.two {
  width: min(510px,48vw);
  aspect-ratio: 1;
  right: -60px;
  top: 21%;
  border-color: rgba(255,102,0,.12);
  animation: mstrFloat 20s ease-in-out infinite alternate-reverse;
}
.tech-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(183,216,251,.55);
  box-shadow: 0 0 0 0 rgba(92,156,225,.20);
  animation: mstrPulse 4.8s ease-out infinite;
  z-index: -1;
}
.tech-dot.d1 {
  left: 10%;
  top: 19%;
}
.tech-dot.d2 {
  left: 27%;
  bottom: 14%;
  animation-delay: -1.2s;
}
.tech-dot.d3 {
  right: 18%;
  top: 19%;
  animation-delay: -2.2s;
}
.tech-dot.d4 {
  right: 8%;
  bottom: 24%;
  animation-delay: -3.2s;
}
.tech-dot.d5 {
  left: 57%;
  top: 11%;
  animation-delay: -1.7s;
}
.special-wrap {
  width: min(1220px,calc(100% - 64px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(410px,.92fr);
  gap: 70px;
  align-items: center;
  padding: 72px 0;
  position: relative;
  z-index: 2;
}
.special-copy {
  min-width: 0;
}
.special-brand {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-bottom: 42px;
}
.special-brand::before {
  content: "";
  position: absolute;
  inset: -24px -34px;
  background: radial-gradient(ellipse,rgba(255,255,255,.13),rgba(255,255,255,.04) 35%,transparent 72%);
  filter: blur(12px);
  z-index: -1;
}
.special-brand img {
  display: block;
  width: 168px;
  max-width: 45vw;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.38)) drop-shadow(0 0 10px rgba(255,255,255,.06));
}
.special-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  color: #90a7bf;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.special-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--mstr-orange);
}
.special-copy h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(2.75rem,5vw,5.3rem);
  line-height: .97;
  letter-spacing: -.055em;
  font-weight: 760;
}
.special-copy h1 span {
  background: linear-gradient(100deg,#fff,#94baff 52%,#ff9d5f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.special-copy .lead {
  max-width: 650px;
  margin: 24px 0 0;
  color: #9badbf;
  font-size: clamp(.98rem,1.3vw,1.12rem);
  line-height: 1.72;
}
.special-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  margin-top: 24px;
  padding: 9px 12px;
  border: 1px solid var(--mstr-line);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #72869b;
  font-size: .73rem;
}
.special-meta i {
  color: #91acd0;
}
.special-meta span, .special-meta code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(470px,60vw);
  color: #a6b7c8;
  font-family: inherit;
}
.special-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 31px;
}
.mstr-btn {
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: .82rem;
  font-weight: 720;
  cursor: pointer;
  transition: .22s ease;
}
.mstr-btn.primary {
  background: var(--mstr-orange);
  color: #fff;
  box-shadow: 0 12px 30px rgba(255,102,0,.12);
}
.mstr-btn.primary:hover {
  transform: translateY(-2px);
  background: #ff751a;
}
.mstr-btn.ghost {
  background: rgba(255,255,255,.025);
  border-color: var(--mstr-line);
  color: #dce7f3;
}
.mstr-btn.ghost:hover {
  transform: translateY(-2px);
  border-color: var(--mstr-line-strong);
  background: rgba(255,255,255,.05);
}
.special-help {
  margin-top: 26px;
  color: #6f8398;
  font-size: .72rem;
}
.special-help a {
  color: #9eb4ca;
}
.special-help a:hover {
  color: #fff;
}
.special-stage {
  display: grid;
  place-items: center;
  min-width: 0;
}
.network-core {
  position: relative;
  width: min(430px,38vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.network-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(129,170,255,.16);
}
.ring-1 {
  inset: 8%;
}
.ring-2 {
  inset: 24%;
  border-style: dashed;
  animation: spin 28s linear infinite;
}
.ring-3 {
  inset: 37%;
  border-color: rgba(255,102,0,.25);
}
.core-content {
  position: relative;
  z-index: 2;
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  background: radial-gradient(circle,rgba(28,72,126,.88),rgba(7,20,38,.84));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 80px rgba(45,114,255,.14);
  padding: 18px;
}
.core-content strong {
  display: block;
  font-size: clamp(3.2rem,5.4vw,5.35rem);
  line-height: .82;
  letter-spacing: -.075em;
  color: #fff;
  text-shadow: 0 12px 34px rgba(0,0,0,.35);
}
.core-content small {
  display: block;
  margin-top: 16px;
  color: var(--mstr-orange-soft);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.core-content .core-icon {
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: 10px;
}
.core-content.word strong {
  font-size: clamp(1.15rem,2.2vw,1.7rem);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.core-content.word small {
  margin-top: 9px;
}
.network-node {
  position: absolute;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0d213a;
  border: 1px solid rgba(255,255,255,.13);
  color: #dce9fb;
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.network-node i {
  font-size: 1rem;
}
.node-a {
  top: 3%;
  left: 46%;
}
.node-b {
  top: 31%;
  right: 4%;
}
.node-c {
  bottom: 12%;
  right: 18%;
}
.node-d {
  bottom: 12%;
  left: 18%;
}
.node-e {
  top: 31%;
  left: 4%;
}
.network-node.active {
  border-color: rgba(255,102,0,.42);
  color: #fff;
  background: rgba(38,39,46,.82);
  box-shadow: 0 0 0 5px rgba(255,102,0,.04),0 12px 30px rgba(0,0,0,.3);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes mstrGrid {
  from {
    background-position: 0 0,0 0;
  }
  to {
    background-position: 72px 72px,72px 72px;
  }
}
@keyframes mstrFloat {
  0% {
    transform: translate3d(0,-2%,0) scale(.97);
  }
  100% {
    transform: translate3d(-5%,5%,0) scale(1.03);
  }
}
@keyframes mstrPulse {
  0% {
    transform: scale(.8);
    box-shadow: 0 0 0 0 rgba(92,156,225,.2);
    opacity: .2;
  }
  45% {
    opacity: .55;
  }
  100% {
    transform: scale(1.18);
    box-shadow: 0 0 0 16px rgba(92,156,225,0);
    opacity: .14;
  }
}
@media (max-width:991.98px) {
  body {
    overflow: auto;
  }
  .special-page {
    overflow: auto;
  }
  .special-wrap {
    width: min(760px,calc(100% - 36px));
    grid-template-columns: 1fr;
    gap: 42px;
    min-height: auto;
    padding: 96px 0 60px;
  }
  .special-stage {
    order: -1;
  }
  .network-core {
    width: min(430px,82vw);
  }
  .special-copy {
    text-align: center;
  }
  .special-brand {
    margin-bottom: 28px;
  }
  .special-eyebrow {
    justify-content: center;
  }
  .special-copy h1, .special-copy .lead {
    margin-left: auto;
    margin-right: auto;
  }
  .special-actions {
    justify-content: center;
  }
  .special-meta {
    margin-left: auto;
    margin-right: auto;
  }
  .special-help {
    text-align: center;
  }
  .special-orbit.one {
    width: 740px;
    right: -460px;
  }
  .special-orbit.two {
    width: 520px;
    right: -335px;
  }
}
@media (max-width:575.98px) {
  .special-wrap {
    width: calc(100% - 28px);
    padding-top: 70px;
  }
  .network-core {
    width: min(360px,90vw);
  }
  .network-node {
    width: 42px;
    height: 42px;
  }
  .special-brand img {
    width: 145px;
  }
  .special-copy h1 {
    font-size: clamp(2.35rem,13vw,3.55rem);
  }
  .core-content {
    width: 45%;
  }
  .core-content strong {
    font-size: 3.4rem;
  }
}
@media (prefers-reduced-motion:reduce) {
  .special-page::before, .special-orbit, .tech-dot, .ring-2 {
    animation: none !important;
  }
}