:root {
  color-scheme: dark;
  --font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-korean: "Apple SD Gothic Neo", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  font-family: var(--font-korean);
  --blue: #3842ee;
  --blue-deep: #222ccb;
  --ink: #101116;
  --white: #f8f7f1;
  --lime: #baff32;
  --aqua: #69eadb;
  --coral: #ff7252;
  --pink: #f057a0;
  --line: rgba(255, 255, 255, 0.32);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.navy-version {
  --blue: #0b0a12;
  --blue-deep: #060609;
  --ink: #0b0a12;
  --white: #f3f0ff;
  --lime: #d5ff3f;
  --aqua: #48f5e5;
  --coral: #d5ff3f;
  --pink: #a879ff;
  --line: rgba(167, 121, 255, 0.42);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--blue);
}

body {
  min-height: 100dvh;
  margin: 0;
  color: var(--white);
  background: var(--blue);
}

button,
input,
a { font: inherit; }

button,
a { touch-action: manipulation; }

a { color: inherit; text-decoration: none; }

:is(a, button, input):focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: -90px;
  left: 20px;
  padding: 13px 18px;
  color: var(--ink);
  background: var(--lime);
}

.skip-link:focus { top: 16px; }

.community-shell { overflow: clip; }

.community-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100% - 64px, 1440px);
  min-height: 104px;
  transform: translateX(-50%);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  min-height: 48px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(3px 4px 0 rgba(16, 17, 22, .25));
}

.brand > span { display: grid; gap: 2px; }
.brand b { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; }
.brand small { color: color-mix(in srgb, var(--white) 58%, transparent); font-family: var(--font-display); font-size: 7px; letter-spacing: .23em; }

.top-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.top-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 13px;
  font-weight: 650;
}

.top-nav a::after {
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
}

.telegram-button {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 18px;
  min-height: 58px;
  padding: 6px 7px 6px 21px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  color: var(--blue-deep);
  background: var(--white);
  box-shadow: 5px 6px 0 rgba(16, 17, 22, .24);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.telegram-button i,
.enter-button i {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 11px;
  color: var(--ink);
  background: var(--lime);
}

.telegram-button svg,
.enter-button svg,
.band-telegram svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.telegram-button:hover i,
.enter-button:hover i { background: #d3ff7b; }

.telegram-short { display: none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, .6fr);
  align-items: center;
  gap: 56px;
  min-height: 920px;
  padding: 145px max(32px, calc((100vw - 1440px) / 2)) 205px;
  border-bottom: 2px solid var(--ink);
  isolation: isolate;
}

.hero::before {
  position: absolute;
  z-index: -3;
  inset: 0;
  content: "";
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 80%, transparent);
}

.hero-copy {
  position: relative;
  z-index: 4;
  min-width: 0;
}

.eyebrow {
  display: inline-flex;
  margin: 0 0 15px;
  padding: 8px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--aqua);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  transform: rotate(-2deg);
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(86px, 10vw, 160px);
  font-weight: 900;
  letter-spacing: -.085em;
  line-height: .76;
  text-transform: uppercase;
}

.hero h1 span {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 2px var(--white);
}

.hero-description {
  max-width: 520px;
  margin: 33px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  word-break: keep-all;
}

/* Korean copy uses a softer system face, calmer weight and more breathing room. */
:where(
  .hero-description,
  .login-panel > p,
  .session-note,
  .section-lead,
  .access-card > p:not(.card-kicker),
  .access-card ul,
  .room-card > p:last-of-type,
  .audience-card > span,
  .community-band > p,
  .gate-panel > p:not(.gate-step):not(.gate-message),
  .invite-rule,
  .gate-message
) {
  font-family: var(--font-korean);
  font-weight: 500;
  letter-spacing: -.025em;
}

:where(.access-card h3, .room-card h3, .gate-panel h3) {
  font-family: var(--font-korean);
  font-weight: 700;
  letter-spacing: -.045em;
  word-break: keep-all;
}

:where(
  .eyebrow,
  .login-panel h2,
  .ticker-track,
  .section-heading h2,
  .card-kicker,
  .room-card > p:first-of-type,
  .audience-card h2,
  .access-dialog > header h2,
  .gate-step,
  .community-band h2
) { font-family: var(--font-display); }

.login-panel {
  position: relative;
  container-type: inline-size;
  z-index: 8;
  align-self: center;
  padding: 34px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 11px 12px 0 var(--ink);
  animation: pop-in 520ms var(--ease-out) both;
}

.login-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}

.login-heading i {
  display: flex;
  align-items: center;
  gap: 6px;
  font-style: normal;
}

.login-heading b {
  width: 8px;
  height: 8px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
}

.login-panel h2 {
  margin: 30px 0 18px;
  font-size: clamp(28px, 14cqw, 50px);
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: 1.06;
  text-transform: uppercase;
}

.login-panel > p:not(.session-note) {
  margin: 0 0 25px;
  color: #484954;
  font-size: 12px;
  line-height: 1.7;
}

.login-panel label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
}

.community-password-field { position: relative; }

.community-password-field input {
  width: 100%;
  height: 55px;
  padding: 0 54px 0 15px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  font-size: 16px;
}

.community-password-field input::placeholder { color: #71727a; }
.community-password-field input[aria-invalid="true"] { border-color: #c7352a; }

.community-visibility {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.community-visibility:hover { background: #eff0eb; }

.community-visibility svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.eye-closed,
.community-visibility[aria-pressed="true"] .eye-open { display: none; }
.community-visibility[aria-pressed="true"] .eye-closed { display: block; }

.form-message {
  min-height: 20px;
  margin: 6px 0 8px;
  color: #a5221a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

.form-message[data-kind="info"] { color: #2d338c; }

.enter-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 6px 7px 6px 17px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  color: var(--white);
  background: var(--blue);
  box-shadow: 4px 5px 0 var(--ink);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.enter-button:hover { background: var(--blue-deep); }

.session-note {
  margin: 23px 0 0;
  padding-top: 18px;
  border-top: 1px solid #b9b9b3;
  color: #5c5d63;
  font-size: 10px;
  line-height: 1.7;
}

.signal-path {
  position: absolute;
  z-index: -1;
  inset: 16% -6% auto;
  width: 112%;
  height: 70%;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: draw-path 1.8s .2s var(--ease-out) forwards;
}

.motion-stage {
  position: absolute;
  z-index: 0;
  top: 48%;
  left: 41%;
  width: min(72vw, 980px);
  aspect-ratio: 1.75;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pink) 34%, transparent), transparent 48%),
    linear-gradient(145deg, color-mix(in srgb, var(--ink) 66%, transparent), color-mix(in srgb, var(--blue) 48%, transparent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pink) 24%, transparent),
    0 36px 90px color-mix(in srgb, var(--ink) 46%, transparent);
  opacity: .72;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-7deg);
  transform-style: preserve-3d;
}

.motion-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white) 11%, transparent), transparent);
  opacity: .7;
  transform: translateX(-105%) skewX(-14deg);
  animation: motion-scan 7s linear infinite;
}

.motion-grid {
  position: absolute;
  inset: -16%;
  background:
    linear-gradient(color-mix(in srgb, var(--pink) 42%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pink) 42%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .42;
  transform: perspective(520px) rotateX(67deg) rotateZ(-8deg) scale(1.25);
  animation: motion-grid-drift 10s var(--ease-in-out) infinite alternate;
}

.motion-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--pink) 70%, var(--white));
  border-radius: 50%;
  box-shadow:
    inset 0 0 30px color-mix(in srgb, var(--pink) 22%, transparent),
    0 0 22px color-mix(in srgb, var(--pink) 30%, transparent);
  font-family: var(--font-display);
  font-size: clamp(9px, 1vw, 13px);
  font-style: normal;
  font-weight: 850;
  letter-spacing: .18em;
  white-space: nowrap;
  transform-style: preserve-3d;
}

.motion-orbit::before,
.motion-orbit::after {
  position: absolute;
  inset: 9%;
  border: 1px solid color-mix(in srgb, var(--white) 34%, transparent);
  border-radius: inherit;
  content: "";
}

.motion-orbit::after { inset: 20%; }
.motion-orbit > span {
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  color: var(--white);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--pink) 28%, transparent);
}

.motion-orbit-outer {
  width: 74%;
  height: 42%;
  animation: motion-orbit-outer 15s linear infinite;
}

.motion-orbit-inner {
  width: 47%;
  height: 29%;
  animation: motion-orbit-inner 11s linear infinite reverse;
}

.motion-orbit-inner span { transform: rotate(180deg); }

.motion-type-stack {
  position: absolute;
  z-index: 2;
  top: 60%;
  left: 61%;
  display: grid;
  justify-items: start;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.7vw, 38px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .74;
  transform: translate(-50%, -50%) rotate(-5deg);
  animation: motion-type-float 5.5s var(--ease-in-out) infinite alternate;
}

.motion-type-stack > span {
  white-space: nowrap;
  line-height: 1.1;
  padding: .14em .22em .1em;
  border: 1px solid color-mix(in srgb, var(--white) 40%, transparent);
  color: var(--ink);
  background: var(--white);
  box-shadow: 5px 6px 0 color-mix(in srgb, var(--pink) 74%, var(--ink));
}

.motion-type-stack span:nth-child(2) {
  margin-left: .7em;
  color: var(--white);
  background: var(--pink);
}

.motion-type-stack span:nth-child(3) { margin-left: .25em; }

.motion-node {
  position: absolute;
  z-index: 3;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--white) 72%, transparent);
  background: var(--pink);
  box-shadow: 0 0 18px color-mix(in srgb, var(--pink) 78%, transparent);
}

.node-a {
  top: 22%;
  left: 24%;
  animation: motion-node-a 8s var(--ease-in-out) infinite alternate;
}

.node-b {
  right: 20%;
  bottom: 24%;
  border-radius: 50%;
  background: var(--lime);
  animation: motion-node-b 9s var(--ease-in-out) infinite alternate;
}

.node-c {
  top: 17%;
  right: 30%;
  width: 11px;
  height: 34px;
  background: var(--aqua);
  animation: motion-node-c 6.5s var(--ease-in-out) infinite alternate;
}

.orb,
.market-block {
  position: absolute;
  z-index: -2;
  border: 3px solid var(--ink);
  box-shadow: 9px 10px 0 var(--ink);
  pointer-events: none;
}

.orb {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
}

.orb span {
  display: block;
  width: 170%;
  height: 170%;
  background: repeating-linear-gradient(55deg, transparent 0 10px, var(--ink) 10px 12px);
}

.orb-a { top: 118px; right: -35px; background: var(--pink); transform: rotate(17deg); }
.orb-b { bottom: 72px; left: 6%; background: var(--aqua); transform: rotate(-15deg); }

.market-block {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 9px;
  width: 128px;
  height: 128px;
  padding: 20px;
  background: var(--lime);
  transform: rotate(17deg);
}

.market-block i { width: 17px; border: 2px solid var(--ink); background: var(--white); }
.market-block i:nth-child(1) { height: 39%; }
.market-block i:nth-child(2) { height: 68%; }
.market-block i:nth-child(3) { height: 92%; background: var(--coral); }
.block-a { top: 154px; left: -48px; }
.block-b { right: 34%; bottom: -83px; background: var(--coral); transform: rotate(-9deg); }

.ticker {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(112px, 10vw, 152px);
  border-top: 2px solid var(--ink);
  color: var(--ink);
  background: var(--lime);
  font-family: var(--font-display);
  font-size: clamp(44px, 6.2vw, 96px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .82;
}

.ticker-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
  width: max-content;
  min-width: 100%;
  padding: 0 32px;
  animation: ticker-move 30s linear infinite;
}

.ticker-track i {
  width: clamp(13px, 1.5vw, 22px);
  height: clamp(13px, 1.5vw, 22px);
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  transform: rotate(45deg);
}

.ticker-track span { white-space: nowrap; }
.ticker-track .ticker-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

.section-heading > p:first-child {
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(58px, 7vw, 104px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .84;
  text-transform: uppercase;
}

.section-heading h2 > span { color: transparent; -webkit-text-stroke: 2px var(--ink); }

.section-lead {
  max-width: 530px;
  margin: 25px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  word-break: keep-all;
}

.access-section {
  padding: 108px max(32px, calc((100vw - 1440px) / 2));
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  background: #f5f1e8;
}

.access-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 68px;
}

.access-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 570px;
  overflow: hidden;
  padding: 34px;
  border: 3px solid var(--ink);
  border-radius: 28px;
  box-shadow: 10px 11px 0 var(--ink);
}

.reference-card { background: var(--aqua); }
.member-card { background: #f4c9d8; }

.card-number {
  position: absolute;
  top: 28px;
  right: 30px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.pass-orbit,
.price-orbit {
  display: grid;
  place-items: center;
  width: 158px;
  height: 158px;
  margin-bottom: 36px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 8px 9px 0 var(--ink);
}

.pass-orbit { background: var(--lime); }
.price-orbit { background: var(--blue); color: var(--white); }

.pass-orbit::before,
.price-orbit::before {
  position: absolute;
  width: 205px;
  height: 74px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
  transform: rotate(-24deg);
}

.pass-orbit > span,
.price-orbit > span { font-size: 28px; font-weight: 950; letter-spacing: -.04em; }

.card-kicker { margin: 0 0 10px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.access-card h3 { margin: 0; font-size: clamp(38px, 4vw, 58px); letter-spacing: -.065em; line-height: 1; }
.access-card > p:not(.card-kicker) { max-width: 490px; margin: 18px 0; font-size: 14px; font-weight: 600; line-height: 1.75; word-break: keep-all; }
.access-card ul { display: grid; gap: 9px; margin: 20px 0 30px; padding: 0; list-style: none; font-size: 12px; font-weight: 700; }
.access-card li::before { content: "↗"; margin-right: 9px; }
.access-card .price { display: flex; align-items: baseline; gap: 9px; margin: 18px 0 0; }
.access-card .price b { font-size: 36px; letter-spacing: -.05em; }
.access-card .price span { font-size: 11px; font-weight: 800; }

.access-card > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  margin-top: auto;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  color: var(--white);
  background: var(--ink);
  box-shadow: 5px 6px 0 rgba(56, 66, 238, .65);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.access-card > button svg,
.carousel-controls svg,
.audience-card :is(button,a) svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.inside-section {
  padding: 104px 0 112px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  background: #d8fff8;
}

.inside-heading-wrap {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding: 0 max(32px, calc((100vw - 1440px) / 2));
}

.carousel-controls { display: flex; gap: 8px; }

.carousel-controls button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--white);
  cursor: pointer;
}

.carousel-controls button:hover:not(:disabled) { background: var(--lime); }
.carousel-controls button:disabled { opacity: .3; cursor: default; }
.carousel-controls button:focus-visible,
.room-cards:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.room-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding: 0 max(32px, calc((100vw - 1440px) / 2));
}
.room-navigation p { margin: 0 0 5px; font-size: 15px; font-weight: 800; }
.room-navigation span { font-size: 12px; }
.room-navigation .carousel-controls { margin-top: 0; }

.motion-reel {
  display: grid;
  grid-template-columns: minmax(330px, .68fr) minmax(0, 1.32fr);
  gap: 38px;
  width: min(calc(100% - 64px), 1440px);
  min-height: 570px;
  margin: 62px auto 0;
  padding: 34px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 28px;
  color: var(--white);
  background: var(--ink);
  box-shadow: 10px 11px 0 color-mix(in srgb, var(--blue) 74%, var(--ink));
}

.motion-reel-copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 4px;
}

.motion-reel-copy > p:first-child {
  margin: 0 auto auto 0;
  padding: 8px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

.motion-reel-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.5vw, 68px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .82;
}

.motion-reel-copy h3 { line-height: 1.12; word-break: keep-all; }

.motion-reel-copy h3 > span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
}

.motion-reel-copy > p:last-child {
  max-width: 390px;
  margin: 27px 0 0;
  color: color-mix(in srgb, var(--white) 72%, transparent);
  font-size: 13px;
  line-height: 1.75;
  word-break: keep-all;
}

.motion-reel-stage {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--white) 34%, transparent);
  border-radius: 22px;
  background: var(--blue);
  perspective: 900px;
  isolation: isolate;
}

.reel-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(.94) rotate(-1deg);
  animation-duration: 18s;
  animation-timing-function: var(--ease-in-out);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.reel-scene-charts {
  color: var(--ink);
  background: color-mix(in srgb, var(--white) 92%, var(--pink));
  animation-name: reel-scene-charts;
}

.reel-scene-orbits {
  color: var(--white);
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--pink) 42%, transparent), transparent 38%),
    color-mix(in srgb, var(--ink) 88%, var(--blue));
  animation-name: reel-scene-orbits;
}

.reel-scene-language {
  color: var(--ink);
  background: color-mix(in srgb, var(--white) 86%, var(--pink));
  animation-name: reel-scene-language;
}

.reel-perspective-grid {
  position: absolute;
  inset: -34%;
  background:
    linear-gradient(color-mix(in srgb, currentColor 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, currentColor 22%, transparent) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .65;
  transform: rotateX(66deg) rotateZ(-10deg) translate3d(0, 8%, 0) scale(1.22);
  animation: reel-grid 7s var(--ease-in-out) infinite alternate;
}

.reel-chart {
  position: absolute;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 17px;
  background: var(--white);
  box-shadow: 9px 10px 0 color-mix(in srgb, var(--pink) 78%, var(--ink));
  animation: reel-chart-float 5.5s var(--ease-in-out) infinite alternate;
}

.reel-chart img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #192d3f;
}

.reel-chart > .mini-visual {
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 26px 24px 48px;
}
.reel-chart-market > .mini-visual { color: var(--white); background: var(--blue); }
.reel-chart-flow > .mini-visual { color: var(--ink); background: var(--lime); }
.reel-chart .note-visual > span { width: 90px; height: 90px; font-size: 50px; }

.reel-chart figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 9px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--lime);
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.reel-chart-market {
  top: 12%;
  left: 9%;
  width: 58%;
  height: 58%;
  transform: rotate(-5deg);
}

.reel-chart-flow {
  right: 6%;
  bottom: 9%;
  width: 51%;
  height: 52%;
  transform: rotate(6deg);
  animation-name: reel-chart-flow;
  animation-delay: -2.2s;
}

.reel-bars {
  position: absolute;
  z-index: 3;
  right: 9%;
  top: 9%;
  display: flex;
  align-items: end;
  gap: 7px;
  height: 118px;
  padding: 18px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--pink);
  box-shadow: 7px 8px 0 var(--ink);
  transform: rotate(7deg);
}

.reel-bars i { width: 17px; border: 2px solid currentColor; background: var(--white); }
.reel-bars i:nth-child(1) { height: 38%; }
.reel-bars i:nth-child(2) { height: 66%; }
.reel-bars i:nth-child(3) { height: 52%; background: var(--aqua); }
.reel-bars i:nth-child(4) { height: 92%; background: var(--lime); }

.reel-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--pink) 76%, var(--white));
  border-radius: 50%;
  box-shadow: 0 0 34px color-mix(in srgb, var(--pink) 38%, transparent);
  font-family: var(--font-display);
  font-size: clamp(9px, 1vw, 13px);
  font-weight: 900;
  letter-spacing: .16em;
  white-space: nowrap;
  transform-style: preserve-3d;
}

.reel-ring::before,
.reel-ring::after {
  position: absolute;
  inset: 11%;
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  border-radius: inherit;
  content: "";
}

.reel-ring::after { inset: 23%; }
.reel-ring > span {
  white-space: nowrap;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--white) 38%, transparent);
  background: color-mix(in srgb, var(--ink) 78%, transparent);
}

.reel-ring-a {
  width: 76%;
  height: 42%;
  animation: reel-ring-a 12s linear infinite;
}

.reel-ring-b {
  width: 52%;
  height: 29%;
  animation: reel-ring-b 9s linear infinite reverse;
}

.reel-orbit-core {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 52px);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: 1.12;
  white-space: nowrap;
  text-align: center;
  text-shadow: 6px 7px 0 color-mix(in srgb, var(--pink) 70%, var(--ink));
  transform: translate(-50%, -50%) rotate(-7deg);
  animation: reel-core-float 4.5s var(--ease-in-out) infinite alternate;
}

.reel-orbit-core b { color: var(--pink); font-weight: inherit; }

.reel-word,
.reel-pill {
  position: absolute;
  z-index: 3;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--pink) 72%, var(--ink));
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
}

.reel-word {
  padding: .13em .2em .08em;
  font-size: clamp(28px, 3.5vw, 52px);
  letter-spacing: -.07em;
  line-height: 1.12;
  white-space: nowrap;
}

.word-observe { top: 15%; left: 7%; transform: rotate(-7deg); }
.word-compare { top: 39%; right: 5%; color: var(--white); background: var(--pink); transform: rotate(5deg); }
.word-context { bottom: 11%; left: 18%; transform: rotate(-2deg); }

.reel-pill {
  white-space: nowrap;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
}

.pill-a { top: 9%; right: 14%; background: var(--lime); transform: rotate(8deg); }
.pill-b { bottom: 18%; right: 7%; background: var(--aqua); transform: rotate(-8deg); }
.pill-c { bottom: 8%; left: 6%; background: var(--pink); transform: rotate(5deg); }

.reel-shape {
  position: absolute;
  z-index: 2;
  display: block;
  border: 2px solid var(--ink);
  background: var(--pink);
  box-shadow: 5px 6px 0 var(--ink);
  animation: reel-shape-float 5s var(--ease-in-out) infinite alternate;
}

.shape-a { top: 12%; left: 48%; width: 42px; height: 42px; transform: rotate(20deg); }
.shape-b { right: 16%; bottom: 11%; width: 62px; height: 62px; border-radius: 50%; background: var(--lime); animation-delay: -1.8s; }
.shape-c { left: 8%; bottom: 30%; width: 25px; height: 70px; background: var(--aqua); animation-delay: -3s; }

/* Keep complete concept compositions visible, including their illustration labels. */
.depth-stack .room-card .concept-visual img {
  height: clamp(280px, calc(100svh - 330px), 440px);
  object-fit: contain;
  object-position: center;
  background: #0b1422;
}
@media (max-width: 768px) {
  .depth-stack .room-card .concept-visual img { height: auto; aspect-ratio: 1942 / 809; }
}

.market-spotlight { padding: 64px max(24px, calc((100vw - 1280px) / 2)) 72px; background: var(--blue); color: var(--white); scroll-margin-top: 24px; }
.market-spotlight-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 0 0 28px; }
.market-spotlight-kicker { margin: 0 0 14px; font: 750 11px/1.5 var(--font-display); letter-spacing: .12em; color: var(--lime); }
.market-spotlight-heading h2 { margin: 0; font-size: clamp(30px, 4vw, 54px); line-height: 1.18; letter-spacing: -.055em; word-break: keep-all; }
.market-spotlight-heading > p { margin: 0; font-size: 15px; line-height: 1.8; }
.market-spotlight-frame { margin: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 22px; background: #172b3c; box-shadow: 10px 12px 0 var(--ink); }
.market-spotlight-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 17px 22px; color: #f4f0e5; background: #0d1d2b; font-size: 12px; }
.market-spotlight-bar b { font: 800 15px/1.4 var(--font-display); }
.market-spotlight-bar .snapshot-badge { margin-left: auto; color: #d8c79f; font-size: 11px; }
.market-spotlight-frame > a { display: block; }
.market-spotlight-frame img { display: block; width: 100%; height: auto; }
.market-spotlight-frame .price-only-preview { position: relative; aspect-ratio: 1176 / 212; overflow: hidden; }
.market-spotlight-frame .price-only-preview > img { position: absolute; inset: 0 auto auto 0; width: 100%; height: auto; max-width: none; }
.chart-mobile-note { display: none; }
.market-spotlight-frame figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 22px; background: #0d1d2b; color: #c6d1d9; font-size: 12px; line-height: 1.6; }
.market-spotlight-frame figcaption a { color: #f4f0e5; text-decoration: underline; text-underline-offset: 4px; }
.market-spotlight a:focus-visible { outline: 3px solid var(--lime); outline-offset: -4px; }
.market-reading-order { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.market-reading-order a { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 17px 0; border-top: 1px solid var(--line); text-decoration: none; transition: color .2s; }
.market-reading-order a:hover { color: var(--lime); }
.market-reading-order a > span { grid-row: span 2; font: 700 12px/1.7 var(--font-display); color: var(--lime); }
.market-reading-order b { font-size: 17px; }
.market-reading-order small { font-size: 13px; opacity: .8; }
.room-card[id] { scroll-margin-top: 36px; }
@media (max-width: 768px) {
  .market-spotlight { padding: 40px 18px 44px; }
  .market-spotlight-heading { display: block; margin-bottom: 22px; }
  .market-spotlight-heading > p { margin-top: 16px; font-size: 14px; }
  .market-spotlight-frame { border-radius: 14px; box-shadow: 6px 7px 0 var(--ink); }
  .market-spotlight-bar { padding: 12px; gap: 6px 10px; }
  .market-spotlight-bar .snapshot-badge { width: 100%; margin: 0; }
  .market-spotlight-frame figcaption { padding: 12px; font-size: 11px; }
  .market-spotlight-frame img { height: 280px; object-fit: cover; object-position: right center; }
  .market-spotlight-frame .price-only-preview { aspect-ratio: 1.8; }
  .market-spotlight-frame .price-only-preview > img { width: 320%; left: -220%; }
  .chart-mobile-note { display: inline; }
  .market-reading-order { gap: 12px; margin-top: 24px; }
  .market-reading-order a { grid-template-columns: 1fr; gap: 8px; }
  .market-reading-order a > span { grid-row: auto; }
  .market-reading-order b { font-size: 14px; word-break: keep-all; }
  .market-reading-order small { font-size: 11px; }
}

.room-cards {
  display: flex;
  scroll-margin-top: 108px;
  gap: 24px;
  margin-top: 18px;
  padding: 0 max(32px, calc((100vw - 1440px) / 2)) 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(32px, calc((100vw - 1440px) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}

/* Scroll-led feature deck. Sticky wrappers keep readable cards in real document flow. */
.room-cards.depth-stack {
  display: block;
  width: min(calc(100% - 64px), 1100px);
  margin: 28px auto 0;
  padding: 0 0 70px;
  overflow: visible;
  scroll-snap-type: none;
}
.depth-step {
  position: sticky;
  top: 94px;
  margin-bottom: 26vh;
}
.depth-step:last-child { margin-bottom: 0; }
.stack-anchor { height: 0; margin: 0; padding: 0; pointer-events: none; }
.depth-stack .room-card {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  column-gap: 36px;
  min-height: 0;
  padding: 26px;
  transform-origin: center top;
  transition: none;
  opacity: 1;
}
.depth-stack .room-card > .mini-visual {
  grid-column: 1 / -1;
  height: clamp(200px, 34vh, 300px);
  margin-bottom: 22px;
}
.depth-stack .room-card > .network-visual { height: clamp(200px, 34vh, 300px); }
.depth-stack .evidence-visual img {
  height: clamp(200px, 38vh, 360px);
  aspect-ratio: auto;
  object-fit: contain;
  background: #192d3f;
}
.depth-stack .room-card > p:first-of-type { grid-column: 1; margin: 0 0 8px; }
.depth-stack .room-card h3 { grid-column: 1; font-size: clamp(28px, 3vw, 40px); }
.depth-stack .room-card > p:last-of-type { grid-column: 2; grid-row: 2 / 4; margin: 0; font-size: 14px; }
.depth-stack .card-tags { position: static; grid-column: 2; margin-top: 14px; }
.depth-stack .room-index { top: 8px; right: 12px; }
.room-navigation {
  position: sticky;
  z-index: 10;
  top: 0;
  min-height: 78px;
  padding-block: 12px;
  background: #dafff7;
  border-bottom: 1px solid rgba(16,17,22,.16);
}
.room-navigation .carousel-controls svg { transform: rotate(90deg); }
.navy-version .room-navigation { background: #0d0c16; }
.depth-stack.stack-static .depth-step { position: relative; top: auto !important; margin-bottom: 30px; }
@media (max-width: 768px) {
  .room-cards.depth-stack { width: calc(100% - 36px); padding: 0 0 44px; }
  .depth-step { top: 82px; margin-bottom: 22vh; }
  .depth-stack .room-card { display: block; padding: 20px; border-radius: 20px; }
  .depth-stack .room-card > .mini-visual { height: 200px; margin-bottom: 22px; }
  .depth-stack .evidence-visual img { height: 210px; object-fit: cover; object-position: right center; }
  .depth-stack .evidence-visual-map img { object-position: left center; }
  .depth-stack .room-card > .network-visual { height: 200px; }
  .depth-stack .room-card h3 { font-size: 29px; }
  .depth-stack .room-card > p:last-of-type { margin: 16px 0 0; font-size: 13px; }
  .depth-stack .card-tags { margin-top: 18px; }
  .room-navigation { min-height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .depth-stack .depth-step { position: relative; top: auto !important; margin-bottom: 30px; }
  .depth-stack .room-card { transform: none !important; }
  .room-navigation { position: relative; }
}

.room-card {
  position: relative;
  flex: 0 0 min(680px, 80vw);
  min-height: 490px;
  padding: 27px 27px 75px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 9px 0 var(--ink);
  scroll-snap-align: start;
}

.card-blue { color: var(--white); background: var(--blue); }
.card-pink { background: var(--pink); }
.card-lime { background: var(--lime); }
.card-aqua { background: var(--aqua); }
.room-index { position: absolute; top: 25px; right: 26px; font-size: 10px; font-weight: 900; }
.room-card > p:first-of-type { margin: 26px 0 10px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.room-card h3 { margin: 0; font-size: 37px; letter-spacing: -.06em; }
.room-card > p:last-of-type { margin: 18px 0; font-size: 13px; font-weight: 600; line-height: 1.75; word-break: keep-all; }

.mini-visual {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 185px;
  padding: 24px;
  border: 2px solid currentColor;
  border-radius: 17px;
  background: rgba(255,255,255,.14);
}

.snapshot-note { margin: 28px 32px 0; font-size: 13px; line-height: 1.7; word-break: keep-all; scroll-margin-top: 110px; }
.snapshot-note > span { display: block; margin-top: 6px; font-size: 11px; }
.evidence-visual {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: #192d3f;
  text-decoration: none;
}
.evidence-visual:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }

.evidence-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 5;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.evidence-visual > span {
  position: static;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 9px;
  background: rgba(16,17,22,.78);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
}

.evidence-visual-flow img { object-position: right center; }

.chart-visual i { width: 28px; border: 2px solid currentColor; background: var(--white); }
.chart-visual i:nth-child(1) { height: 35%; }
.chart-visual i:nth-child(2) { height: 58%; background: var(--aqua); }
.chart-visual i:nth-child(3) { height: 43%; }
.chart-visual i:nth-child(4) { height: 82%; background: var(--lime); }
.chart-visual i:nth-child(5) { height: 68%; }

.compare-visual { align-items: center; }
.compare-visual i { width: 86px; height: 110px; border: 2px solid currentColor; border-radius: 44px 44px 14px 14px; background: var(--white); }
.compare-visual i:last-child { background: var(--aqua); transform: rotate(8deg); }
.compare-visual b { width: 38px; border-top: 3px solid currentColor; }
.note-visual { align-items: center; }
.note-visual span { display: grid; place-items: center; width: 115px; height: 115px; border: 3px solid currentColor; border-radius: 50%; font-size: 62px; font-weight: 950; background: var(--white); box-shadow: 7px 8px 0 var(--ink); }
.depth-stack .room-card > .rooms-visual {
  display: block;
  height: auto;
  min-height: 300px;
  padding: 14px 24px 24px;
  color: var(--ink);
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.24);
  overflow: hidden;
}
.rooms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rooms-toolbar > span { font: 700 10px/1.5 var(--font-display); letter-spacing: .1em; }
.rooms-panels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; max-width: 920px; margin: 0 auto; padding: 6px 5px 10px; }
.rooms-panel { position: relative; padding: 16px 20px 18px; border: 1.5px solid currentColor; border-radius: 6px 20px 6px 6px; background: var(--white); box-shadow: 4px 5px 0 var(--ink); transform-origin: center bottom; }
.rooms-panel.rooms-events { background: var(--lime); transform: translateY(-6px); }
.rooms-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 9px/1.4 var(--font-display); letter-spacing: .07em; }
.rooms-panel-top { min-height: 28px; }
.rooms-panel > svg { display: block; width: 100%; height: 100px; margin: 6px 0 12px; overflow: visible; }
.rooms-panel > strong { display: block; font-size: 19px; letter-spacing: -.04em; }
.rooms-panel-caption { display: block; margin-top: 8px; font: 700 8px/1.4 var(--font-display); letter-spacing: .08em; }
.rooms-toolbar { min-height: 44px; }
.rooms-visual:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.rooms-loop { transform-box: fill-box; transform-origin: center; animation: room-research-loop 3.6s var(--ease-in-out) infinite; animation-play-state: paused; }
.rooms-events .rooms-loop { animation-name: room-event-loop; animation-delay: -1.2s; }
.rooms-partners .rooms-loop { animation-name: room-channel-loop; animation-delay: -2.4s; }
.rooms-visual.is-active .rooms-loop { animation-play-state: running; }
@keyframes room-research-loop {
  0%, 100% { transform: translateY(0) rotate(0); }
  33% { transform: translateY(-8px) rotate(-7deg); }
  66% { transform: translateY(-3px) rotate(5deg); }
}
@keyframes room-event-loop {
  0%, 100% { transform: rotate(0) scale(1); }
  33% { transform: rotate(-22deg) scale(1.15); }
  66% { transform: rotate(22deg) scale(1.15); }
}
@keyframes room-channel-loop {
  0%, 100% { transform: translateX(0); opacity: .35; }
  20% { transform: translateX(0); opacity: 1; }
  70% { transform: translateX(48px); opacity: 1; }
  90% { transform: translateX(48px); opacity: 0; }
}
@media (max-width: 768px) {
  .depth-stack .room-card > .rooms-visual { min-height: 0; padding: 8px 10px 18px; }
  .rooms-toolbar { gap: 6px; margin-bottom: 10px; }
  .rooms-toolbar > span { font-size: 8px; letter-spacing: .02em; }
    .rooms-panels { grid-template-columns: 1fr; gap: 12px; padding: 0 5px 5px; }
  .rooms-panel { display: grid; grid-template-columns: 66px minmax(0,1fr); column-gap: 14px; padding: 12px 14px; border-radius: 5px 16px 5px 5px; }
  .rooms-panel.rooms-events { transform: none; }
  .rooms-panel-top { grid-column: 2; font-size: 8px; }
  .rooms-panel-top { min-height: 16px; }
  .rooms-panel > svg { grid-column: 1; grid-row: 1 / 4; align-self: center; height: 60px; margin: 0; }
  .rooms-panel > strong { grid-column: 2; margin-top: 4px; font-size: 17px; }
  .rooms-panel-caption { grid-column: 2; font-size: 7px; margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rooms-visual .rooms-loop { animation: none; }
}

.card-tags { position: absolute; right: 27px; bottom: 27px; left: 27px; display: flex; gap: 7px; }
.card-tags span { padding: 6px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 9px; font-weight: 850; }

.audience-bands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--ink);
}

.audience-card {
  position: relative;
  min-height: 570px;
  padding: 62px max(32px, calc((100vw - 1440px) / 2));
  color: var(--ink);
}

.audience-card:first-child { padding-right: 55px; padding-left: max(32px, calc((100vw - 1440px) / 2)); }
.audience-card:last-child { padding-right: max(32px, calc((100vw - 1440px) / 2)); padding-left: 55px; border-left: 2px solid var(--ink); }
.for-members { background: var(--coral); }
.for-partners { background: var(--pink); }
.audience-card > p { margin: 0 0 25px; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.audience-card h2 { margin: 0; font-size: clamp(58px, 6vw, 92px); font-weight: 950; letter-spacing: -.08em; line-height: .84; }
.audience-card > span { display: block; max-width: 430px; margin-top: 30px; font-size: 14px; font-weight: 700; line-height: 1.7; }
.audience-card :is(button,a) { position: absolute; right: 50px; bottom: 50px; display: grid; place-items: center; width: 68px; height: 68px; border: 3px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--lime); box-shadow: 6px 7px 0 var(--ink); cursor: pointer; }

.partner-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.partner-capabilities li {
  padding: 8px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .04em;
}

.future-badge {
  position: absolute;
  right: 50px;
  bottom: 50px;
  display: grid;
  place-items: center;
  min-width: 118px;
  min-height: 48px;
  padding: 0 15px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.band-telegram { border: 2px solid var(--ink); cursor: pointer; }

.reveal-card,
.reveal-section .section-heading {
  opacity: 0;
  transform: translateY(28px) rotate(.35deg);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

.reveal-card.is-visible,
.reveal-section.is-visible .section-heading { opacity: 1; transform: translateY(0) rotate(0); }
.reveal-card:nth-child(2) { transition-delay: 70ms; }
.reveal-card:nth-child(3) { transition-delay: 140ms; }
.reveal-card:nth-child(4) { transition-delay: 210ms; }

.access-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 16, 21, .68);
  backdrop-filter: blur(8px);
}

.access-backdrop[hidden] { display: none; }

.access-dialog {
  width: min(680px, 100%);
  max-height: min(780px, calc(100dvh - 40px));
  overflow: auto;
  padding: 28px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 12px 14px 0 var(--lime);
  animation: dialog-in 340ms var(--ease-out) both;
}

.access-dialog > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
.access-dialog > header p { margin: 0 0 8px; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.access-dialog > header h2 { margin: 0; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.065em; line-height: 1; text-transform: uppercase; }
.dialog-close { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--lime); cursor: pointer; }
.dialog-close svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; }

.access-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 22px 0; }
.access-tabs button { min-height: 49px; border: 2px solid var(--ink); border-radius: 10px; color: var(--ink); background: transparent; font-size: 11px; font-weight: 850; cursor: pointer; }
.access-tabs button[aria-selected="true"] { color: var(--white); background: var(--blue); }

.gate-panel { padding: 18px 0 4px; }
.gate-step { margin: 0 0 12px; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.gate-panel h3 { margin: 0; font-size: 29px; letter-spacing: -.045em; }
.gate-panel > p:not(.gate-step):not(.gate-message) { margin: 14px 0 22px; color: #4d4e55; font-size: 13px; line-height: 1.75; word-break: keep-all; }
.gate-panel label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 850; }
.gate-message { min-height: 22px; margin: 8px 0; color: #a5221a; font-size: 11px; font-weight: 700; line-height: 1.7; }
.gate-message[data-kind="info"] { color: #2d338c; }
.invite-rule { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding: 16px; border: 2px solid var(--ink); border-radius: 12px; background: var(--aqua); font-size: 10px; font-weight: 800; }
.invite-rule span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid var(--ink); border-radius: 50%; background: var(--white); font-size: 8px; }
.invite-rule i { flex: 1; min-width: 12px; border-top: 1px solid var(--ink); }
.member-price { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 26px 0; padding: 22px; border: 2px solid var(--ink); border-radius: 14px; background: #f4c9d8; }
.member-price b { font-size: 39px; letter-spacing: -.06em; }
.member-price span { font-size: 10px; font-weight: 800; }
.reference-pass-placeholder,
.payment-placeholder { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 12px; color: var(--white); background: var(--blue); font-size: 12px; font-weight: 850; cursor: pointer; }
.reference-pass-placeholder { margin-top: 4px; }
.reference-pass-placeholder span,
.payment-placeholder span { font-size: 22px; }
.access-dialog > footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #b9b9b3; color: #5e5f65; font-size: 9px; font-weight: 750; }

body.dialog-open { overflow: hidden; }

@keyframes ticker-move { to { transform: translateX(-50%); } }
@keyframes reel-scene-charts {
  0%, 31% { opacity: 1; transform: scale(1) rotate(0); }
  33%, 97% { opacity: 0; transform: scale(1.07) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes reel-scene-orbits {
  0%, 31% { opacity: 0; transform: scale(.94) rotate(-1deg); }
  33%, 64% { opacity: 1; transform: scale(1) rotate(0); }
  66%, 100% { opacity: 0; transform: scale(1.07) rotate(1deg); }
}
@keyframes reel-scene-language {
  0%, 64% { opacity: 0; transform: scale(.94) rotate(-1deg); }
  66%, 97% { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.07) rotate(1deg); }
}
@keyframes reel-grid {
  from { transform: rotateX(66deg) rotateZ(-10deg) translate3d(-2%, 6%, 0) scale(1.22); }
  to { transform: rotateX(66deg) rotateZ(-10deg) translate3d(2%, 10%, 0) scale(1.22); }
}
@keyframes reel-chart-float {
  from { transform: translate3d(-2%, 2%, 0) rotate(-5deg); }
  to { transform: translate3d(3%, -3%, 0) rotate(-2deg); }
}
@keyframes reel-chart-flow {
  from { transform: translate3d(2%, -2%, 0) rotate(6deg); }
  to { transform: translate3d(-3%, 3%, 0) rotate(3deg); }
}
@keyframes reel-ring-a {
  from { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0); }
  to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); }
}
@keyframes reel-ring-b {
  from { transform: translate(-50%, -50%) rotateX(74deg) rotateZ(0); }
  to { transform: translate(-50%, -50%) rotateX(74deg) rotateZ(360deg); }
}
@keyframes reel-core-float {
  from { transform: translate(-50%, -54%) rotate(-7deg) scale(.96); }
  to { transform: translate(-50%, -47%) rotate(-3deg) scale(1); }
}
@keyframes reel-shape-float {
  from { transform: translate3d(-8px, 10px, 0) rotate(-12deg); }
  to { transform: translate3d(14px, -18px, 0) rotate(28deg); }
}
@keyframes motion-scan {
  0%, 18% { opacity: 0; transform: translateX(-105%) skewX(-14deg); }
  28% { opacity: .7; }
  46%, 100% { opacity: 0; transform: translateX(105%) skewX(-14deg); }
}
@keyframes motion-grid-drift {
  from { transform: perspective(520px) rotateX(67deg) rotateZ(-8deg) translate3d(-2%, -1%, 0) scale(1.25); }
  to { transform: perspective(520px) rotateX(67deg) rotateZ(-8deg) translate3d(2%, 2%, 0) scale(1.25); }
}
@keyframes motion-orbit-outer {
  from { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); }
}
@keyframes motion-orbit-inner {
  from { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); }
}
@keyframes motion-type-float {
  from { transform: translate(-50%, -52%) rotate(-5deg) scale(.96); }
  to { transform: translate(-50%, -48%) rotate(-2deg) scale(1); }
}
@keyframes motion-node-a {
  from { transform: translate3d(-12px, 8px, 0) rotate(20deg); }
  to { transform: translate3d(22px, -14px, 0) rotate(140deg); }
}
@keyframes motion-node-b {
  from { transform: translate3d(12px, -9px, 0) scale(.88); }
  to { transform: translate3d(-24px, 18px, 0) scale(1.08); }
}
@keyframes motion-node-c {
  from { transform: translate3d(6px, -15px, 0) rotate(-20deg); }
  to { transform: translate3d(-16px, 20px, 0) rotate(35deg); }
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.community-band {
  display: grid;
  grid-template-columns: 1.15fr .85fr auto;
  align-items: end;
  gap: 64px;
  padding: 94px max(32px, calc((100vw - 1440px) / 2));
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  background: var(--aqua);
}

.community-band > div > p {
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.community-band h2 {
  margin: 0;
  font-size: clamp(52px, 5.5vw, 82px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .92;
  text-transform: uppercase;
}

.community-band > p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  word-break: keep-all;
}

.band-telegram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 224px;
  min-height: 60px;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  color: var(--white);
  background: var(--ink);
  box-shadow: 5px 6px 0 rgba(56, 66, 238, .65);
  font-size: 13px;
  font-weight: 800;
}

.community-footer {
  display: grid;
  grid-template-columns: .8fr 2fr .8fr;
  align-items: center;
  gap: 30px;
  min-height: 154px;
  padding: 32px max(32px, calc((100vw - 1440px) / 2));
  color: var(--white);
  background: var(--ink);
}

.footer-brand {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .09em;
}

.footer-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.footer-tabs a {
  display: grid;
  min-height: 68px;
  padding: 12px 18px;
  border-left: 1px solid #43444a;
  font-size: 13px;
  font-weight: 700;
}

.footer-tabs a:last-child { border-right: 1px solid #43444a; }
.footer-tabs a[aria-current="page"] { color: var(--lime); }
.footer-tabs span { color: #777880; font-size: 9px; }

.version-switch {
  display: flex;
  justify-self: end;
  gap: 5px;
}

.version-switch a {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 48px;
  border: 1px solid #4c4d53;
  color: #aaaab0;
  font-size: 9px;
  font-weight: 800;
}

.version-switch a[aria-current="page"] {
  border-color: var(--lime);
  color: var(--ink);
  background: var(--lime);
}

.telegram-status {
  position: fixed;
  z-index: 40;
  right: 18px;
  bottom: 18px;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  background: var(--lime);
  box-shadow: 4px 5px 0 var(--ink);
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.telegram-status[data-visible="true"] { opacity: 1; transform: translateY(0); }

/* Version 01 shares Version 02's content and motion; only the palette changes. */
.navy-version .hero::before {
  background:
    linear-gradient(rgba(167, 121, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 121, 255, .08) 1px, transparent 1px);
  background-size: 80px 80px;
}

.navy-version .hero { background: radial-gradient(ellipse at 18% 25%, #7131ff38, transparent 58%), radial-gradient(ellipse at 82% 80%, #b9ff3020, transparent 54%), #0b0a12; }
.navy-version .hero h1 span { -webkit-text-stroke-color: #d5ff3f; text-shadow: 0 0 26px #d5ff3f22; }
.navy-version .telegram-button,
.navy-version .login-panel { box-shadow: 7px 8px 0 #d5ff3f; }
.navy-version .enter-button { color: #0b0a12; background: #d5ff3f; }
.navy-version .enter-button:hover { background: #e2ff79; }
.enter-button:disabled { opacity: .65; cursor: wait; }
.navy-version .ticker { background: #d5ff3f; }
.navy-version .access-section { color: var(--white); background: #0d0c16; }
.navy-version .access-section .section-heading h2 > span,
.navy-version .inside-section .section-heading h2 > span { -webkit-text-stroke-color: #a879ff; }
.navy-version .access-card,
.navy-version .room-card { box-shadow: 10px 11px 0 #0b0a12; }
.navy-version .reference-card {
  border-color: #0b0a12;
  color: #f3f0ff;
  background: linear-gradient(145deg, #532ac0, #201039);
  box-shadow: 10px 11px 0 #d5ff3f;
}
.navy-version .reference-card .card-number { border-color: #f3f0ff; }
.navy-version .reference-card .pass-orbit {
  border-color: #f3f0ff;
  color: #0b0a12;
  background: #d5ff3f;
  box-shadow: 8px 9px 0 #48f5e5;
}
.navy-version .reference-card > button {
  border-color: #f3f0ff;
  color: #0b0a12;
  background: #f3f0ff;
  box-shadow: 5px 6px 0 #48f5e5;
}
.navy-version .member-card { color: var(--ink); background: #d5ff3f; }
.navy-version .inside-section { color: var(--white); background: #0d0c16; }
.navy-version .card-blue { background: linear-gradient(135deg, #532ac0, #201039); }
.navy-version .card-pink { color: var(--ink); background: #a879ff; }
.navy-version .card-lime { color: var(--ink); background: #e2ff79; }
.navy-version .card-aqua { color: var(--ink); background: #48f5e5; }
.navy-version .word-compare { color: #0b0a12; }
.navy-version .motion-type-stack > span:nth-child(2) { color: #0b0a12; }
.navy-version .cycle-stage > figcaption b { color: #48f5e5; }
.navy-version .cycle-dots > button[aria-current="step"]::after { background: #d5ff3f; }
.navy-version .planned-label { color: #48f5e5; border-color: #7289aa; }
.navy-version .for-members {
  color: #f3f0ff;
  background: #201039;
}
.navy-version .for-members > button {
  border-color: #f3f0ff;
  color: #0b0a12;
  background: #d5ff3f;
  box-shadow: 6px 7px 0 #48f5e5;
}
.navy-version .for-partners { background: #a879ff; }
.navy-version .for-partners > a {
  color: #f3f0ff;
  background: #0b0a12;
  box-shadow: 6px 7px 0 #f3f0ff;
}
.navy-version .community-band {
  border-color: #48f5e5;
  color: #f3f0ff;
  background: linear-gradient(120deg, #201039, #0b0a12);
}
.navy-version .community-band > div > p { color: #48f5e5; }
.navy-version .community-band > p { color: #f3f0ff; }
.navy-version .band-telegram {
  border-color: #f3f0ff;
  color: #0b0a12;
  background: #d5ff3f;
  box-shadow: 5px 6px 0 #48f5e5;
}
.navy-version .community-footer { background: #060609; }


/* Cyberpunk palette: dark surfaces and neon accents, shared motion unchanged. */
.navy-version .login-panel { color: var(--white); background: #171321; border-color: #a879ff; box-shadow: 7px 8px 0 #7139dc, 0 0 36px #8b40ff24; }
.navy-version .login-heading { color: #d5ff3f; border-color: #756382; }
.navy-version .login-panel > p:not(.session-note),
.navy-version .session-note { color: #c6bfd5; }
.navy-version .session-note { border-color: #756382; }
.navy-version .community-password-field input { color: var(--white); background: #0b0a12; border-color: #8e7d9b; }
.navy-version .community-password-field input::placeholder { color: #bcb2cc; }
.navy-version .community-password-field input[aria-invalid="true"] { border-color: #ff8ba5; }
.navy-version .community-visibility { color: #c6bfd5; }
.navy-version .community-visibility:hover { background: #332142; }
.navy-version .form-message { color: #ff9cb2; }
.navy-version .form-message[data-kind="info"] { color: #48f5e5; }
.navy-version .reference-card { border-color: #a879ff; box-shadow: 8px 9px 0 #7139dc; }
.navy-version .room-card { border-color: #a879ff; box-shadow: 8px 9px 0 #3e245e; }
.navy-version .motion-reel { border-color: #756382; box-shadow: 8px 9px 0 #3e245e; }
.navy-version .room-navigation { color: var(--white); border-color: #756382; }
.navy-version :is(a, button, input):focus-visible,
.navy-version .room-cards:focus-visible { outline-color: #a879ff; }

@keyframes draw-path { to { stroke-dashoffset: 0; } }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(18px) rotate(1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@media (max-width: 1080px) {
  .community-header { width: calc(100% - 40px); }
  .top-nav { display: none; }
  .community-header { grid-template-columns: 1fr auto; }
  .hero {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 34px;
    min-height: 860px;
    padding-right: 24px;
    padding-left: 24px;
  }
  .hero h1 { font-size: clamp(72px, 10vw, 102px); }
  .community-band { grid-template-columns: 1fr 1fr; gap: 35px; }
  .band-telegram { grid-column: 2; }
  .access-section,
  .inside-heading-wrap,
  .room-navigation { padding-inline: 24px; }
  .room-cards { padding-right: 24px; padding-left: 24px; scroll-padding-inline: 24px; }
  .audience-card { min-height: 500px; }
  .audience-card:first-child { padding-right: 36px; padding-left: 24px; }
  .audience-card:last-child { padding-right: 24px; padding-left: 36px; }
  .audience-card h2 { font-size: 57px; }
  .community-footer { grid-template-columns: 1fr auto; }
  .footer-tabs { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 760px) {
  .community-header {
    position: relative;
    width: calc(100% - 32px);
    min-height: 82px;
  }
  .brand { gap: 8px; }
  .brand-logo { width: 34px; height: 34px; filter: drop-shadow(2px 3px 0 rgba(16, 17, 22, .24)); }
  .brand b { font-size: 8px; letter-spacing: .1em; }
  .brand small { font-size: 6px; letter-spacing: .17em; }
  .telegram-button { min-height: 48px; padding: 5px 6px 5px 13px; border-radius: 14px; }
  .telegram-full { display: none; }
  .telegram-short { display: inline; font-size: 11px; }
  .telegram-button i { width: 34px; height: 34px; border-radius: 9px; }
  .hero {
    display: block;
    min-height: auto;
    padding: 46px 18px 142px;
  }
  .hero-copy { text-align: center; }
  .eyebrow { margin-bottom: 20px; font-size: 8px; }
  .hero h1 { font-size: clamp(58px, 20vw, 82px); line-height: .8; }
  .hero-description { margin: 28px auto 0; font-size: 14px; }
  .login-panel { width: min(100%, 460px); margin: 42px auto 0; padding: 26px; border-radius: 19px; box-shadow: 7px 8px 0 var(--ink); text-align: left; }
  .login-panel h2 { font-size: clamp(28px, 14cqw, 50px); }
  .motion-stage {
    top: 27%;
    left: 50%;
    width: 124vw;
    max-width: 700px;
    opacity: .5;
  }
  .motion-type-stack {
    display: none;
  }
  .orb-a { top: 4%; right: -70px; }
  .orb-b { display: none; }
  .block-a { top: 28%; left: -83px; transform: rotate(22deg) scale(.72); }
  .block-b { right: -60px; bottom: 30%; transform: rotate(-9deg) scale(.7); }
  .ticker { min-height: 98px; justify-content: flex-start; overflow: hidden; white-space: nowrap; font-size: 42px; }
  .ticker-track { gap: 22px; padding: 0 18px; animation-duration: 24s; }
  .motion-reel {
    display: block;
    width: calc(100% - 36px);
    min-height: 0;
    margin-top: 38px;
    padding: 18px;
    border-radius: 21px;
    box-shadow: 7px 8px 0 var(--ink);
  }
  .motion-reel-copy { min-height: 280px; padding: 4px; }
  .motion-reel-copy h3 { font-size: clamp(30px, 10.5vw, 52px); }
  .motion-reel-stage { min-height: 390px; margin-top: 20px; border-radius: 16px; }
  .reel-chart-market { top: 10%; left: 5%; width: 72%; height: 49%; }
  .reel-chart-flow { right: 4%; bottom: 8%; width: 72%; height: 47%; }
  .reel-bars { top: 5%; right: 4%; height: 92px; padding: 12px; }
  .reel-bars i { width: 10px; }
  .reel-word { font-size: clamp(22px, 7.4vw, 34px); }
  .word-observe { top: 17%; left: 2%; }
  .word-compare { top: 42%; right: 1%; }
  .word-context { bottom: 15%; left: 6%; }
  .access-section { padding: 72px 18px; }
  .section-heading h2 { font-size: 53px; }
  .section-lead { font-size: 13px; }
  .access-cards { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
  .access-card { min-height: 535px; padding: 24px; border-radius: 21px; box-shadow: 7px 8px 0 var(--ink); }
  .pass-orbit, .price-orbit { width: 130px; height: 130px; }
  .pass-orbit::before, .price-orbit::before { width: 165px; height: 58px; }
  .access-card h3 { font-size: 42px; }
  .inside-section { padding: 72px 0 78px; }
  .inside-heading-wrap { display: block; padding: 0 18px; }
  .carousel-controls { margin-top: 27px; }
  .carousel-controls button { width: 48px; height: 48px; }
  .room-navigation { padding-inline: 18px; }
  .room-cards { gap: 17px; margin-top: 16px; padding: 0 18px 17px; scroll-padding-inline: 18px; }
  .room-card { flex-basis: min(330px, 86vw); min-height: 490px; padding: 22px 22px 75px; border-radius: 20px; }
  .evidence-visual img { height: 210px; object-fit: cover; object-position: right center; }
  .evidence-visual-map img { object-position: left center; }
  .evidence-visual > span { letter-spacing: .02em; }
  .snapshot-note { margin-inline: 18px; }
  .audience-bands { grid-template-columns: 1fr; }
  .audience-card,
  .audience-card:first-child,
  .audience-card:last-child { min-height: 500px; padding: 58px 24px; border-left: 0; }
  .audience-card:last-child { border-top: 2px solid var(--ink); }
  .audience-card h2 { font-size: 61px; }
  .audience-card :is(button,a) { right: 27px; bottom: 27px; width: 62px; height: 62px; }
  .future-badge { right: 27px; bottom: 27px; min-width: 110px; min-height: 44px; }
  .community-band { display: block; padding: 68px 24px; }
  .community-band h2 { font-size: 52px; }
  .community-band > p { margin: 27px 0; }
  .band-telegram { width: 100%; }
  .community-footer { display: block; min-height: 0; padding: 35px 18px 22px; }
  .footer-brand { display: block; margin-bottom: 26px; }
  .footer-tabs { grid-template-columns: 1fr 1fr; margin-bottom: 22px; }
  .footer-tabs a:nth-child(3) { border-top: 1px solid #43444a; }
  .footer-tabs a:nth-child(4) { border-top: 1px solid #43444a; }
  .version-switch { justify-content: flex-start; }
  .telegram-status { right: 12px; bottom: 12px; }
  .access-backdrop { padding: 10px; }
  .access-dialog { max-height: calc(100dvh - 20px); padding: 20px; border-radius: 18px; box-shadow: 7px 8px 0 var(--lime); }
  .access-dialog > header h2 { font-size: 34px; }
  .access-tabs { grid-template-columns: 1fr; }
  .invite-rule { flex-wrap: wrap; }
  .invite-rule i { flex-basis: 20px; }
  .member-price { display: block; }
  .member-price span { display: block; margin-top: 8px; }
  .access-dialog > footer { display: grid; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ticker-track { transform: none !important; }
  .motion-stage::after,
  .motion-grid,
  .motion-orbit,
  .motion-type-stack,
  .motion-node { animation: none !important; }
  .reel-scene,
  .reel-perspective-grid,
  .reel-chart,
  .reel-ring,
  .reel-orbit-core,
  .reel-shape { animation: none !important; }
  .reel-scene { display: none; opacity: 0; transform: none; }
  .reel-scene-charts { display: block; opacity: 1; }
  .reel-perspective-grid { transform: rotateX(66deg) rotateZ(-10deg) translate3d(0, 8%, 0) scale(1.22); }
  .motion-grid { transform: perspective(520px) rotateX(67deg) rotateZ(-8deg) scale(1.25); }
  .motion-orbit-outer { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(-8deg); }
  .motion-orbit-inner { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(14deg); }
  .motion-type-stack { transform: translate(-50%, -50%) rotate(-4deg); }
  .reveal-card,
  .reveal-section .section-heading { opacity: 1; transform: none; }
}

/* Feature-specific previews. Historical diagram rules are superseded by captures below. */
.depth-stack .room-card > .feature-demo {
  grid-column: 1 / -1; margin-bottom: 24px; padding: 22px;
  border: 1px solid #536277; border-radius: 18px;
  color: #f5f0e6; background: #101c2b; min-width: 0;
}
.demo-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.demo-topline > span:first-child { font: 750 11px/1.5 var(--font-display); letter-spacing: .1em; }
.cycle-play { min-height: 44px; padding: 8px 14px; border: 1px solid #8391a3; border-radius: 24px; background: transparent; color: inherit; font-size: 12px; }
.cycle-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cycle-steps button { min-height: 64px; text-align: left; padding: 12px; border: 1px solid #58687c; border-radius: 10px; color: #b9c5d3; background: #172638; }
.cycle-steps button[aria-current="step"] { color: #101c2b; border-color: #e1cea5; background: #e1cea5; }
.cycle-steps small { display: block; font-size: 10px; letter-spacing: .08em; margin-bottom: 5px; }
.cycle-steps b { font-size: 15px; }
.feature-demo button:focus-visible { outline: 3px solid #a0dfff; outline-offset: 3px; }
.cycle-canvas { min-height: 144px; display: grid; align-items: center; padding: 22px 0 12px; }
.cycle-stage[hidden] { display: none; }
.cycle-stage { text-align: center; }
.cycle-stage.is-entering { animation: cycle-explanation-in 180ms var(--ease-out) both; }
.cycle-stage > p { margin: 14px 0 0; color: #c2cbd7; font-size: 13px; line-height: 1.6; }
.asset-universe { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.asset-universe b { padding: 14px 18px; border: 1px solid #72849b; border-radius: 10px; font: 650 18px/1.2 var(--font-display); }
.cycle-buckets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cycle-buckets > div { display: grid; gap: 6px; border-left: 2px solid #e1cea5; padding: 4px 12px; text-align: left; }
.cycle-buckets small { color: #a9bcdb; font-size: 10px; }
.cycle-buckets b { font-size: 15px; }
.cycle-buckets span { font-size: 12px; color: #b5c1cf; }
.watch-demo, .review-demo { display: flex; justify-content: center; align-items: center; gap: 16px; }
.watch-demo > b, .review-demo > span { border: 1px solid #b5a380; border-radius: 10px; padding: 15px; }
.watch-demo > span, .watch-demo > b, .review-demo > span { font-size: 15px; }
.watch-demo > i { color: #e1cea5; font-style: normal; }
.demo-footnote { border-top: 1px solid #3b4d62; padding-top: 12px; margin-top: 8px; color: #b9c5d3; font-size: 11px; line-height: 1.6; }
.planned-label { font-size: 11px; color: #e1cea5; border: 1px solid #746c5c; border-radius: 20px; padding: 5px 9px; white-space: nowrap; }
.comparison-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comparison-mobile { display: none; }
.comparison-columns > section { padding: 16px; border: 1px solid #536277; border-radius: 12px; }
.comparison-columns small { color: #9dacbf; font-size: 10px; letter-spacing: .1em; }
.comparison-columns h4 { margin: 6px 0 12px; font: 650 28px/1.1 var(--font-display); }
.comparison-placeholder { display: grid; gap: 10px; align-content: center; min-height: 82px; padding: 12px; text-align: center; border: 1px dashed #61728b; border-radius: 8px; background: repeating-linear-gradient(0deg,transparent,transparent 23px,#293749 24px); }
.comparison-placeholder > span:first-child { font-size: 15px; }
.comparison-placeholder > span:last-child { font-size: 11px; color: #b9c5d3; }
.comparison-columns p { margin: 12px 0 0; font-size: 12px; color: #c2cbd7; }
.shared-window { text-align: center; font-size: 12px; padding: 16px 0 4px; color: #e1cea5; }
.shared-window > span { padding-inline: 18px; }
.evidence-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: center; }
.structure-sketch { padding: 8px; border: 1px solid #536277; border-radius: 10px; }
.structure-sketch svg { display: block; width: 100%; height: 172px; color: #e1cea5; }
.structure-sketch path, .reel-evidence path { fill: none; stroke: currentColor; stroke-width: 2; }
.structure-sketch circle, .reel-evidence circle { fill: #101c2b; stroke: #a9bcff; stroke-width: 2; }
.structure-sketch text { font: 600 14px sans-serif; fill: #f5f0e6; }
.structure-sketch .review-zone { fill: #e1cea522; stroke: #b5a380; stroke-width: 1; }
.structure-sketch > span { display: block; text-align: center; font-size: 11px; color: #b9c5d3; padding: 6px; }
.reason-notes > section { padding: 10px 0; border-bottom: 1px solid #3b4d62; }
.reason-notes > section:last-child { border-bottom: 0; }
.reason-notes small { color: #d8c59e; font-size: 11px; }
.reason-notes p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
/* Both figures stay entirely inside the stage, with no overlapping masks or captions. */
.motion-reel-stage .reel-scene-charts { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; padding: 28px; }
.motion-reel-stage .reel-chart { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; transform: none; animation-name: reel-panel-drift; border-width: 2px; box-shadow: 5px 5px 0 #101116; }
.motion-reel-stage .reel-chart-flow { animation-delay: -2.2s; }
.motion-reel-stage .reel-chart figcaption { position: static; margin: 0; border: 0; border-top: 1px solid var(--ink); border-radius: 0; font-size: 9px; text-align: center; }
.reel-scene-charts > .reel-bars { display: none; }
.reel-workflow { display: grid; align-content: center; gap: 9px; padding: 14px; text-align: center; background: #101c2b; color: #f5f0e6; }
.reel-workflow b { font: 750 clamp(11px,1.2vw,18px)/1.4 var(--font-display); }
.reel-workflow > span { font-size: 12px; color: #e1cea5; }
.reel-workflow i { font-style: normal; color: #b5c9ff; }
.reel-evidence { display: grid; align-content: center; padding: 10px 18px; background: #101c2b; color: #e1cea5; }
.reel-evidence svg { display: block; width: 100%; height: 90px; }
.reel-evidence > span { font: 700 10px/1.5 var(--font-display); text-align: center; }
.reel-evidence .review-zone { stroke: #72849b; stroke-dasharray: 4 5; }
@keyframes reel-panel-drift { from { transform: translateY(3px); } to { transform: translateY(-3px); } }
@keyframes cycle-explanation-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) {
  .feature-demo button:hover { border-color: #f5f0e6; }
}
@media (max-width: 768px) {
  .depth-stack .room-card > .feature-demo { padding: 14px; margin-bottom: 20px; }
  .demo-topline { flex-wrap: wrap; margin-bottom: 12px; gap: 8px; }
  .demo-topline > span:first-child { font-size: 10px; }
  .cycle-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .cycle-steps button { min-height: 55px; padding: 8px; }
  .cycle-steps b { font-size: 13px; }
  .cycle-canvas { min-height: 144px; padding: 16px 0 10px; }
  .asset-universe { gap: 8px; }
  .asset-universe b { font-size: 14px; padding: 10px 14px; }
  .cycle-stage > p { font-size: 12px; }
  .cycle-buckets { gap: 6px; }
  .cycle-buckets > div { padding: 4px 6px; }
  .cycle-buckets b { font-size: 12px; }
  .cycle-buckets small { font-size: 8px; }
  .cycle-buckets span { font-size: 10px; }
  .watch-demo, .review-demo { gap: 7px; }
  .watch-demo > b, .review-demo > span { padding: 10px 7px; }
  .watch-demo > span, .watch-demo > b, .review-demo > span { font-size: 11px; }
  .comparison-columns { gap: 8px; }
  .comparison-columns > section { padding: 10px; }
  .comparison-columns h4 { font-size: 23px; }
  .comparison-placeholder { padding: 6px; min-height: 100px; }
  .comparison-placeholder > span:first-child { font-size: 12px; }
  .shared-window { font-size: 11px; line-height: 1.7; }
  .shared-window > span { padding-inline: 6px; }
  .evidence-layout { grid-template-columns: 1fr; gap: 8px; }
  .structure-sketch svg { height: 106px; }
  .reason-notes { display: grid; gap: 8px; }
  .reason-notes > section { padding: 6px 0; }
  .reason-notes p { font-size: 12px; }
  .motion-reel-stage .reel-scene-charts { padding: 18px; gap: 14px; }
  .reel-workflow { gap: 5px; padding: 8px; }
  .reel-workflow > span { font-size: 10px; }
  .reel-evidence svg { height: 74px; }
  .reel-evidence > span, .motion-reel-stage .reel-chart figcaption { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cycle-stage.is-entering { animation: none; }
  .motion-reel-stage .reel-chart { animation: none !important; transform: none; }
}

/* Actual, dated dashboard captures: preserve every pixel of the selected region. */
.depth-stack .room-card > .feature-demo { padding: 16px; }
.feature-demo .demo-topline { margin-bottom: 12px; min-height: 32px; }
.chart-capture { display: block; color: inherit; border-radius: 8px; overflow: hidden; }
.chart-capture:focus-visible { outline: 3px solid #e1cea5; outline-offset: 3px; }
.cycle-stage .chart-capture img { display: block; width: 100%; height: auto; }
.detail-selectors { gap: 8px; flex-wrap: wrap; }
.cycle-dots.detail-selectors > button { width: auto; min-height: 44px; padding: 10px 16px; border: 1px solid #64748b; color: #e9edf3; font: inherit; font-size: 12px; }
.cycle-dots.detail-selectors > button::after { display: none; }
.cycle-dots.detail-selectors > button[aria-current="step"] { background: #e1cea5; border-color: #e1cea5; color: #152737; }
.evidence-strategy-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.evidence-strategy-pair figure { min-width: 0; margin: 0; }
.evidence-strategy-pair figcaption { display: grid; gap: 5px; margin: 0 0 12px; }
.evidence-strategy-pair figcaption b { color: #e1cea5; font: 700 10px/1.5 var(--font-display); letter-spacing: .07em; }
.evidence-strategy-pair figcaption > span { color: #e9edf3; font-size: 13px; }
.evidence-strategy-pair img { display: block; width: 100%; height: auto; }
.cycle-canvas { display: grid; min-height: 0; padding: 0; }
.cycle-canvas > .cycle-stage { grid-area: 1 / 1; }
.cycle-canvas > .cycle-stage[hidden] { display: block; visibility: hidden; pointer-events: none; }
.cycle-stage { margin: 0; }
.cycle-stage > img, .comparison-capture {
  display: block; width: 100%; height: clamp(180px, calc(100svh - 510px), 390px);
  object-fit: contain; background: #152737; border-radius: 8px;
}
.cycle-stage > figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px 10px; text-align: left; }
.cycle-stage > figcaption b { font: 700 11px/1.5 var(--font-display); letter-spacing: .08em; color: #e1cea5; }
.cycle-stage > figcaption > span { color: #e9edf3; font-size: 13px; }
.capture-footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.capture-footer > span { color: #b9c5d3; font-size: 10px; line-height: 1.5; }
.cycle-dots { display: flex; align-items: center; flex: 0 0 auto; }
.cycle-dots > button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; border-radius: 8px; }
.cycle-dots > button::after { content: ''; position: absolute; width: 17px; height: 3px; top: 20px; left: 13px; border-radius: 5px; background: #64748b; }
.cycle-dots > button[aria-current="step"]::after { background: #e1cea5; }
.evidence-captures { display: grid; grid-template-columns: minmax(0, 3.27fr) minmax(0, 1fr); align-items: center; gap: 12px; height: clamp(180px, calc(100svh - 510px), 390px); background: #192d3e; border-radius: 8px; }
.evidence-captures > img { display: block; width: 100%; height: 100%; object-fit: contain; min-width: 0; min-height: 0; }
.motion-reel-stage .reel-chart > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; background: #192d3e; }
@media (min-width: 1000px) {
  .depth-stack .room-card:has(> .feature-demo) { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); column-gap: 28px; align-content: center; }
  .depth-stack .room-card > .feature-demo { grid-column: 1; grid-row: 1 / 5; margin-bottom: 0; padding: 12px; }
  .depth-stack .room-card:has(> .feature-demo) > p:first-of-type { grid-column: 2; grid-row: 1; align-self: end; }
  .depth-stack .room-card:has(> .feature-demo) > h3 { grid-column: 2; grid-row: 2; align-self: start; font-size: 32px; }
  .depth-stack .room-card:has(> .feature-demo) > p:last-of-type { grid-column: 2; grid-row: 3; }
  .depth-stack .room-card:has(> .feature-demo) > .card-tags { grid-column: 2; grid-row: 4; align-self: start; }
  .cycle-stage > img, .comparison-capture, .evidence-captures { height: clamp(220px, calc(100svh - 430px), 330px); }
  .cycle-stage > figcaption { display: grid; gap: 4px; }
  .cycle-stage > figcaption > span { font-size: 12px; }
  .evidence-captures { grid-template-columns: minmax(0, 2.8fr) minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 768px) {
  .depth-stack .room-card > .feature-demo { padding: 10px; margin-bottom: 18px; }
  .feature-demo .demo-topline { flex-wrap: nowrap; gap: 8px; }
  .demo-topline > span:first-child { font-size: 8px; letter-spacing: .05em; }
  .planned-label { font-size: 9px; padding: 4px 6px; }
  .cycle-play { padding: 6px 10px; font-size: 10px; flex: 0 0 auto; }
  .cycle-stage > img, .comparison-capture { height: auto; aspect-ratio: 1.85; }
  .cycle-stage > figcaption { display: grid; gap: 4px; padding: 12px 0 8px; }
  .cycle-stage > figcaption b { font-size: 9px; }
  .cycle-stage > figcaption > span { font-size: 11px; }
  .capture-footer { gap: 2px; }
  .capture-footer > span { font-size: 9px; }
  .cycle-dots > button { width: 36px; }
  .cycle-dots > button::after { left: 10px; }
  .evidence-captures { grid-template-columns: 1fr; gap: 10px; height: auto; }
  .evidence-captures > img { height: auto; }
  .evidence-captures > img:last-child { width: min(100%, 180px); margin: 0 auto 10px; }
  .evidence-strategy-pair { grid-template-columns: 1fr; gap: 18px; }
  .capture-footer:has(.detail-selectors) { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
}

/* Analysis previews need space: screenshots above, concise story below. */
@media (min-width: 1000px) {
  .depth-stack #brief-card, .depth-stack #checkpoint-card { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); }
  .depth-stack #brief-card > .feature-demo, .depth-stack #checkpoint-card > .feature-demo { grid-column: 1 / -1; grid-row: 1; margin-bottom: 22px; }
  .depth-stack #brief-card > p:first-of-type, .depth-stack #checkpoint-card > p:first-of-type { grid-column: 1; grid-row: 2; }
  .depth-stack #brief-card > h3, .depth-stack #checkpoint-card > h3 { grid-column: 1; grid-row: 3; }
  .depth-stack #brief-card > p:last-of-type, .depth-stack #checkpoint-card > p:last-of-type { grid-column: 2; grid-row: 2 / 4; }
  .depth-stack #brief-card > .card-tags, .depth-stack #checkpoint-card > .card-tags { grid-column: 2; grid-row: 4; }
  .cycle-stage .chart-capture img { height: auto; background: #152737; }
}

/* Anonymous cycle previews: cover ticker pixels without changing chart data. */
.cycle-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.motion-reel-stage .reel-chart > .cycle-shot { height: 100%; min-height: 0; }
#cycle-stage-0 .chart-capture { position: relative; background: #192d3e; }

/* ENTRY MOTION — decorative attention cues; labels, prices and form stay still. */
/* Logo returns to its original upper-right anchor, then gives one soft sparkle. */
.logo-traveller {
  animation: logo-square-lap 3s linear infinite;
  animation-play-state: paused;
}
.logo-beacon, .logo-spark {
  transform-box: view-box; transform-origin: 44px 20px;
  opacity: 0; animation: logo-home-spark 3s var(--ease-out) infinite;
  animation-play-state: paused;
}
.logo-spark { animation-name: logo-home-cross; }
.brand-logo.entry-motion-active :is(.logo-traveller, .logo-beacon, .logo-spark) {
  animation-play-state: running;
}
@keyframes logo-square-lap {
  0% { transform: translate(0, 0); }
  18% { transform: translate(0, 24px); }
  36% { transform: translate(-24px, 24px); }
  54% { transform: translate(-24px, 0); }
  72%, 100% { transform: translate(0, 0); }
}
@keyframes logo-home-spark {
  0%, 72% { opacity: 0; transform: scale(.85); }
  80% { opacity: .55; transform: scale(1.15); }
  94%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes logo-home-cross {
  0%, 74% { opacity: 0; transform: scale(.8) rotate(-12deg); }
  82% { opacity: .9; transform: scale(1.05) rotate(0); }
  94%, 100% { opacity: 0; transform: scale(1.2) rotate(12deg); }
}

/* Broad, continuously visible 4px gold perimeter; no card-interior wash. */
.entry-edge {
  position: absolute; inset: -3px; padding: 4px; border-radius: inherit;
  overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.entry-edge::before {
  content: ""; position: absolute; inset: -80%; opacity: 1;
  background: conic-gradient(from 0deg, transparent 0deg 190deg, #b87919 212deg, #ffcd64 248deg, #ffe598 290deg, #fff9df 328deg, #ffd46e 346deg, transparent 360deg);
  animation: entry-perimeter-light 4.8s linear infinite;
  animation-play-state: paused;
}
.entry-motion-active > .entry-edge::before { animation-play-state: running; }
.login-panel:focus-within > .entry-edge::before { animation-play-state: paused; }
@keyframes entry-perimeter-light {
  from { transform: rotate(0); opacity: 1; }
  to { transform: rotate(360deg); opacity: 1; }
}
@supports not (mask-composite: exclude) {
  .entry-edge { display: none; }
}
.pass-orbit, .price-orbit { position: relative; }
.pass-orbit::before, .price-orbit::before {
  animation: entry-orbit 4s linear infinite;
  animation-play-state: paused;
}
.price-orbit::before { animation-direction: reverse; animation-delay: -1.3s; }
.pass-orbit::after, .price-orbit::after {
  content: ""; position: absolute; inset: -9px; border: 1px solid currentColor;
  border-radius: 50%; opacity: .25; pointer-events: none;
  animation: entry-halo 3.2s var(--ease-in-out) infinite;
  animation-play-state: paused;
}
.price-orbit::after { animation-delay: -1.6s; }
.entry-word {
  position: relative; display: inline-block; isolation: isolate;
  color: #946000;
  text-shadow: 0 0 14px #ffb52c66, 0 0 32px #ff9f222e;
}
.navy-version .entry-word { color: #ffd66b; }
.entry-word > .entry-glyph {
  position: absolute; inset: 0; pointer-events: none;
  background: none; color: #fff1a8; text-shadow: 0 0 8px #ffc44a;
  opacity: 0; clip-path: inset(0 100% 0 0);
  animation: entry-glyph-light 4.8s linear infinite;
  animation-play-state: paused;
}
.entry-word::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.04em;
  height: .085em; border-radius: 20px; background: currentColor;
  transform-origin: left; opacity: .3;
  box-shadow: 0 0 10px #ffbf4780;
  animation: entry-underline 4.8s var(--ease-in-out) infinite;
  animation-play-state: paused; pointer-events: none;
}
.telegram-button svg, .band-telegram svg {
  animation: entry-arrow 2.4s var(--ease-in-out) infinite;
  animation-play-state: paused;
}
.band-telegram svg { animation-delay: -.9s; }
.entry-motion-active::before, .entry-motion-active::after,
.entry-motion-active .entry-word > .entry-glyph,
.entry-motion-active .entry-word::after,
.telegram-button.entry-motion-active svg, .band-telegram.entry-motion-active svg {
  animation-play-state: running;
}
.login-panel:focus-within .entry-word::after,
.login-panel:focus-within .entry-word > .entry-glyph,
.telegram-button:focus-visible svg, .band-telegram:focus-visible svg {
  animation-play-state: paused;
}
.community-footer { grid-template-columns: .8fr 2fr; }
.entry-motion-toggle {
  justify-self: start; padding: 8px 0; color: inherit; background: none;
  border: 0; border-bottom: 1px solid currentColor; font: inherit;
  font-size: 11px; cursor: pointer; opacity: .8;
}
@keyframes entry-orbit {
  from { transform: rotate(-24deg); }
  to { transform: rotate(336deg); }
}
@keyframes entry-glyph-light {
  0%, 48% { clip-path: inset(0 100% 0 0); opacity: 0; }
  50% { clip-path: inset(0 96% 0 0); opacity: 1; }
  61% { clip-path: inset(0 35% 0 40%); opacity: 1; }
  73% { clip-path: inset(0 0 0 100%); opacity: 1; }
  76%, 100% { clip-path: inset(0 0 0 100%); opacity: 0; }
}
@keyframes entry-halo {
  0%, 100% { transform: scale(.98); opacity: .18; }
  50% { transform: scale(1.09); opacity: .5; }
}
@keyframes entry-underline {
  0%, 68% { transform: scaleX(.12); opacity: .25; }
  90% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: .25; }
}
@keyframes entry-arrow {
  0%, 62%, 100% { transform: translateX(0); opacity: 1; }
  78% { transform: translateX(5px); opacity: .45; }
  88% { transform: translateX(0); opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .access-card > button svg { transition: transform 180ms var(--ease-out); }
  .access-card > button:hover svg { transform: translateX(4px); }
}
@media (max-width: 768px) {
  .community-footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo :is(.logo-traveller, .logo-beacon, .logo-spark),
  .entry-edge::before { animation: none; }
  .entry-edge, .logo-beacon, .logo-spark { display: none; }
  .pass-orbit::before, .price-orbit::before,
  .pass-orbit::after, .price-orbit::after, .entry-word > .entry-glyph, .entry-word::after,
  .telegram-button svg, .band-telegram svg { animation: none; }
  .access-card > button:hover svg { transform: none; }
}

/* Production availability notes; the approved V1 layout is retained. */
.preview-caption{margin:0;padding:20px 32px;background:var(--blue-deep);color:var(--white);font-size:13px;text-align:center;line-height:1.7}
#deferred-entry a{display:inline-flex;align-items:center;min-height:44px;color:var(--lime)}
@media(max-width:768px){.preview-caption{padding:18px 24px;text-align:left}}

/* Compact on-chart labels; the original chart stays stationary. */
.strategy-frame { position: relative; }
.strategy-focus { position: absolute; pointer-events: none; border: 2px solid #ffe397; border-radius: 4px; opacity: 0; box-shadow: 0 0 0 1px #101c2b; }
.strategy-focus > b { position: absolute; top: -12px; left: 4px; padding: 4px 6px; border-radius: 4px; background: #ffe397; color: #101c2b; font: 800 clamp(9px, .85vw, 11px)/1.3 var(--font-display); white-space: nowrap; letter-spacing: .02em; }
.focus-range { left: 3.1%; top: 8.2%; width: 89.3%; height: 28.7%; }
.focus-break { left: 64%; top: 32%; width: 6%; height: 15%; }
.focus-break > b { left: auto; right: -4px; }
.focus-flow { left: 40%; top: 56%; width: 50%; height: 19%; }
.focus-flow > b { left: auto; right: 4px; }
.strategy-walkthrough[data-review-step="0"] .focus-range,
.strategy-walkthrough[data-review-step="1"] .focus-break,
.strategy-walkthrough[data-review-step="2"] .focus-flow { opacity: 1; }
.strategy-focus.is-entering > b { animation: strategy-label-in 180ms var(--ease-out) both; }
/* Keep original captures intact; enlarge their chart regions only on phones. */
@media (max-width: 768px) {
  .room-cards.depth-stack { width: calc(100% - 24px); }
  .depth-stack .room-card { padding: 12px; }
  .depth-stack .room-card > .feature-demo { padding: 8px; }
  .comparison-desktop { display: none; }
  .comparison-mobile { display: grid; gap: 18px; }
  .comparison-mobile figure { min-width: 0; margin: 0; }
  .comparison-mobile figcaption { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #e9edf3; font: 700 12px/1.5 var(--font-display); }
  .comparison-mobile figcaption > span { color: #b9c5d3; }
  .comparison-mobile svg { display: block; width: 100%; height: auto; aspect-ratio: 574 / 330; background: #192d3e; }
  .feature-demo .demo-topline > span:first-child { font-size: 10px; }
  .evidence-strategy-pair figcaption b { font-size: 11px; }
  .strategy-focus > b { font-size: 11px; }
  .cycle-stage > figcaption b { font-size: 11px; }
  .cycle-stage > figcaption > span { font-size: 12px; }
  .carousel-controls { gap: 10px; }
  .carousel-controls > button { min-width: 44px; min-height: 44px; touch-action: manipulation; }
}
@keyframes strategy-label-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
/* Full chart previews stay in the page; no separate zoom interaction. */
.detail-shot, .cycle-stage .cycle-shot { display: block; width: 100%; height: auto; aspect-ratio: auto; }
.motion-reel-stage .reel-chart > .detail-shot { width: 100%; height: 100%; }
@media (max-width: 768px) {
  .depth-stack #brief-card > .feature-demo, .depth-stack #flow-card > .feature-demo, .depth-stack #checkpoint-card > .feature-demo { margin-inline: -8px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .strategy-focus { opacity: 1; }
  .strategy-focus.is-entering > b { animation: none; }
}