/* About presentation — three connected chapters built on the shared deck shell. */
:root {
  --about-blue: #7895ff;
  --about-blue-bright: #c4d7ff;
  --about-gold: #f0c798;
  --about-muted: rgba(243, 245, 255, 0.69);
}

.about-deck-page .desktop-nav a[aria-current="page"]::after { background: var(--about-blue); }

.about-scene {
  display: grid;
  grid-template-columns: minmax(380px, .78fr) minmax(610px, 1.22fr);
  gap: clamp(28px, 4vw, 78px);
  background:
    radial-gradient(circle at 70% 46%, rgba(30, 61, 118, .2), transparent 35%),
    radial-gradient(circle at 44% 84%, rgba(16, 39, 81, .15), transparent 30%),
    linear-gradient(135deg, #010205 0%, #030812 54%, #010205 100%);
}

.about-scene::before {
  opacity: .64;
  background-image:
    radial-gradient(circle at 7% 17%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 14% 69%, rgba(126,166,255,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 23% 31%, rgba(255,255,255,.52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 83%, rgba(124,163,255,.66) 0 1px, transparent 1.7px),
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 77%, rgba(117,155,255,.68) 0 1px, transparent 1.7px),
    radial-gradient(circle at 75% 14%, rgba(255,255,255,.74) 0 1px, transparent 1.6px),
    radial-gradient(circle at 87% 67%, rgba(129,164,255,.65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 95% 36%, rgba(255,255,255,.72) 0 1px, transparent 1.7px);
}

.about-scene::after {
  height: 22%;
  opacity: .18;
}

.about-copy {
  position: relative;
  z-index: 10;
  align-self: center;
  padding-left: clamp(4px, .65vw, 12px);
  opacity: var(--scene-copy-opacity);
  transform: translate3d(var(--scene-copy-shift), 0, 0);
  will-change: transform, opacity;
}

.about-copy > p:first-child {
  margin: 0 0 18px;
  color: var(--about-blue);
  font: 700 .74rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.about-copy h1,
.about-copy h2 {
  max-width: 670px;
  margin: 0;
  color: #f8f7f2;
  font-family: "Arial Narrow", "Avenir Next Condensed", var(--sans);
  font-size: clamp(2.4rem, 3.45vw, 4.15rem);
  font-stretch: condensed;
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.about-copy h1 + p,
.about-copy h2 + p {
  max-width: 485px;
  margin: 25px 0 0;
  color: var(--about-muted);
  font: 400 clamp(.91rem, 1.08vw, 1.05rem)/1.65 var(--sans);
}

.about-text-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-top: 32px;
  color: var(--about-blue);
  font: 700 .72rem/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.about-text-action svg { width: 17px; height: 17px; transition: transform 180ms ease; }
.about-text-action svg,
.about-value svg {
  position: static;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.about-text-action:hover svg { transform: translateX(5px); }

.about-primary-action {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 0 27px;
  border: 1px solid rgba(189,207,255,.45);
  border-radius: 2px;
  background: linear-gradient(135deg, #3f5de5, #5978ff);
  box-shadow: 0 8px 30px rgba(48,80,218,.3), inset 0 1px rgba(255,255,255,.24);
  color: #fff;
  font: 700 .73rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.about-primary-action:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(48,80,218,.4), inset 0 1px rgba(255,255,255,.28); }
.about-mobile-summary { display: none; }

.about-system,
.about-first-visual {
  position: relative;
  z-index: 4;
  min-width: 0;
  height: 100%;
  opacity: var(--scene-visual-opacity);
  transform: translate3d(var(--scene-visual-shift), 0, 0);
  will-change: transform, opacity;
}

.about-visual-art {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: min(104%, 960px);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.about-visual-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-origin-art { width: min(105%, 950px); }
.about-connection-art { width: min(104%, 920px); }
.about-first-art { width: min(112%, 980px); }

.about-connection-scene { grid-template-columns: minmax(400px,.88fr) minmax(650px,1.12fr); }

.connection-role {
  position: absolute;
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(246,247,252,.79);
  font: 700 .65rem/1.1 var(--sans);
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}

.connection-role svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(174,198,255,.56);
  border-radius: 50%;
  color: #e9efff;
  filter: drop-shadow(0 0 9px rgba(101,147,255,.3));
}

.connection-role-people { top: 8%; left: 50%; transform: translateX(-50%); }
.connection-role-businesses { top: 50%; left: 18%; transform: translate(-50%,-50%); }
.connection-role-communities { top: 50%; right: 18%; transform: translate(50%,-50%); }
.connection-role-systems { bottom: 5%; left: 50%; transform: translateX(-50%); }

.about-first-copy > strong {
  display: block;
  max-width: 455px;
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.23);
  color: var(--about-blue);
  font: 700 .68rem/1.3 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
}

.about-first-copy .about-text-action { display: flex; width: max-content; margin-top: 8px; }
.about-first-visual {
  min-width: 0;
  padding: 0 clamp(8px, 2vw, 32px) 4px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
}

.about-first-device {
  position: relative;
  top: auto;
  left: auto;
  grid-row: 1;
  width: auto;
  height: min(58vh, 620px);
  aspect-ratio: 506 / 1100;
  place-self: center;
  transform: none;
}

.about-first-device .platform-device-frame,
.about-first-device img {
  width: 100%;
  height: 100%;
}

.about-square-node,
.about-value {
  position: absolute;
  z-index: 9;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(244,246,253,.79);
  font: 700 .64rem/1.25 var(--sans);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.about-square-node {
  top: 58%;
  right: 1%;
  transform: translateY(-50%);
}

.about-values {
  position: relative;
  z-index: 9;
  grid-row: 2;
  display: grid;
  width: 100%;
  min-height: 84px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  padding-top: 8px;
}

.about-value {
  position: static;
  align-self: start;
}
.about-value svg {
  width: 34px;
  height: 34px;
  color: rgba(230,237,255,.8);
  stroke-width: 1.3;
}
.about-value-integrate { transform: none; }

@media (max-width: 1100px) and (min-width: 821px) {
  .about-scene { grid-template-columns: minmax(330px,.78fr) minmax(520px,1.22fr); gap: 22px; }
  .about-copy h1, .about-copy h2 { font-size: clamp(2.25rem, 3.5vw, 3.1rem); }
  .about-visual-art { width: 108%; }
  .about-first-device { height: min(55vh, 520px); }
  .about-square-node { right: 0; }
}

@media (max-width: 820px) {
  body.about-deck-page { min-height: 100svh; }
  .about-deck-page .platform-header { width: calc(100vw - 32px); }
  .about-scene {
    min-height: 100svh;
    padding: 78px 20px 18px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 6px;
  }

  .about-scene .platform-scene-name { display: none; }
  .about-copy { align-self: start; padding: 0; text-align: left; }
  .about-copy > p:first-child { margin-bottom: 9px; font-size: .68rem; }
  .about-copy h1, .about-copy h2 {
    max-width: 420px;
    font-size: clamp(1.8rem, 8.3vw, 2.75rem);
    line-height: 1.04;
  }
  .about-copy h1 br, .about-copy h2 br { display: none; }
  .about-copy h1 + p, .about-copy h2 + p { max-width: 470px; margin-top: 12px; font-size: .78rem; line-height: 1.5; }
  .about-text-action { min-height: 40px; margin-top: 7px; font-size: .69rem; }
  .about-system, .about-first-visual { height: auto; min-height: 0; transform: none !important; }

  .about-origin-system { margin-top: -8px; }
  .about-origin-art { width: min(112vw, 570px); }

  /* The mobile reference is one editorial composition: statement, system,
     explanation, then CTA. Keep those pieces on fixed visual rails while the
     vertical gesture continues to drive the horizontal deck. */
  .about-origin-copy > p:first-child { display: none; }
  .about-origin-copy h1 + p,
  .about-origin-copy .about-text-action { display: none; }
  .about-origin-system {
    position: absolute;
    top: 190px;
    right: 18px;
    bottom: 204px;
    left: 18px;
    height: auto;
    margin: 0;
  }
  .about-mobile-summary {
    position: absolute;
    right: 18px;
    bottom: 16px;
    left: 18px;
    z-index: 11;
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
  }
  .about-mobile-summary > p {
    max-width: 360px;
    margin: 0 0 4px;
    color: var(--about-muted);
    font: 400 .76rem/1.48 var(--sans);
  }
  .about-mobile-summary .about-text-action {
    min-height: 38px;
    margin: 0;
    font-size: .66rem;
  }
  .about-mobile-summary .about-text-action + .about-text-action { margin-top: -9px; }

  .about-connection-system { margin-top: 0; }
  .about-connection-art { width: min(110vw, 560px); }
  .connection-role { font-size: .54rem; letter-spacing: .09em; }
  .connection-role svg { width: 34px; height: 34px; padding: 8px; }
  .connection-role-people { top: 4%; }
  .connection-role-businesses { left: 17%; }
  .connection-role-communities { right: 17%; }
  .connection-role-systems { bottom: 2%; }

  .about-first-copy h2 + p { max-width: 520px; }
  .about-first-copy > strong { margin-top: 12px; padding-top: 10px; font-size: .59rem; }
  .about-primary-action { min-height: 44px; margin-top: 12px; padding: 0 18px; font-size: .68rem; }
  .about-first-copy .about-text-action { display: inline-flex; margin: 4px 0 0 9px; }
  .about-first-visual { margin-top: -4px; padding-inline: 0; }
  .about-first-art { width: min(112vw, 620px); }
  .about-first-device { height: min(37vh, 360px); width: auto; }
  .about-square-node { top: 48%; right: 3%; font-size: .51rem; }
  .about-values { min-height: 58px; padding-top: 4px; }
  .about-value { font-size: .49rem; letter-spacing: .08em; }
  .about-value svg { width: 27px; height: 27px; }
}

@media (max-width: 500px) {
  .about-scene { padding: 76px 18px 16px; }
  .about-origin-copy h1 + p { max-width: 350px; }
  .about-copy h1, .about-copy h2 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .about-connection-copy h2 + p { font-size: .73rem; }
  .about-first-copy h2 + p { font-size: .71rem; }
  .about-first-copy > strong { display: none; }
  .about-first-copy .about-text-action { margin-left: 5px; }
  .about-first-device { height: min(35vh, 330px); width: auto; }
}

@media (max-width: 360px) and (max-height: 640px) {
  .about-scene { padding: 70px 14px 10px; }
  .about-copy > p:first-child { margin-bottom: 6px; }
  .about-copy h1, .about-copy h2 { font-size: 1.55rem; }
  .about-copy h1 + p, .about-copy h2 + p { margin-top: 8px; font-size: .68rem; line-height: 1.36; }
  .about-text-action { margin-top: 2px; }
  .about-origin-system { top: 162px; bottom: 186px; }
  .about-mobile-summary > p { font-size: .66rem; line-height: 1.35; }
  .about-mobile-summary .about-text-action { min-height: 34px; }
  .about-primary-action { min-height: 40px; margin-top: 8px; }
  .about-first-copy .about-text-action { display: none; }
  .about-first-device { height: min(31vh, 200px); width: auto; }
  .about-value span { display: none; }
  .about-square-node span { display: none; }
}