:root {
  --ink: #020b14;
  --navy: #061827;
  --glass: rgba(3, 18, 29, 0.86);
  --gold: #b9832e;
  --bright: #edcf8d;
  --ivory: #f7e9ca;
  --muted: #c5c4b9;
  --teal: #58e0d1;
  --line: rgba(196, 139, 45, 0.68);
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  background: var(--ink);
}
body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% 0, #0b2637, var(--ink) 42%);
  color: var(--ivory);
  font-family: var(--serif);
}
a {
  color: inherit;
}
.skip {
  position: fixed;
  z-index: 200;
  top: -80px;
  left: 16px;
  padding: 12px;
  background: #fff;
  color: #000;
}
.skip:focus {
  top: 16px;
}
.site-header {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  height: 72px;
  padding: 0 clamp(28px, 3vw, 55px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(2, 11, 20, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--bright);
  font-size: 25px;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.brand-seal {
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: 30px;
  box-shadow:
    inset 0 0 0 4px rgba(185, 131, 46, 0.1),
    0 0 20px rgba(185, 131, 46, 0.12);
}
.site-header nav {
  display: flex;
  gap: clamp(26px, 4vw, 68px);
}
.site-header nav a {
  text-decoration: none;
  font-size: 17px;
}
.site-header nav a:hover {
  color: var(--bright);
}
.site-header > .ornate-button {
  justify-self: end;
}
.menu {
  display: none;
}
.ornate-button {
  min-width: 230px;
  min-height: 58px;
  padding: 15px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(238, 201, 122, 0.35);
  outline-offset: -5px;
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  );
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.25s var(--ease);
}
.ornate-button:hover,
.ornate-button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.15);
  box-shadow: 0 12px 34px rgba(185, 131, 46, 0.25);
}
.ornate-button.gold,
.compact {
  background: linear-gradient(135deg, #9b6824, #efd38d 50%, #9d6a25);
  color: #160e05;
}
.ornate-button.dark {
  background: rgba(2, 16, 27, 0.82);
  color: var(--ivory);
}
.ornate-button.compact {
  min-width: 178px;
  min-height: 42px;
  padding: 8px 20px;
  font-size: 16px;
}
.chapter-one {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 72px;
  background: #020b14;
}
.living-world {
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: 1020px;
  overflow: hidden;
  background: url("./media/arcta-hero-world-wide-v1.webp") center / cover no-repeat;
}
.living-world:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 11, 20, 0.68), transparent 55%),
    linear-gradient(180deg, transparent 70%, rgba(2, 11, 20, 0.72));
}
.stars {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, #fff6d4 0 1px, transparent 1.5px);
  background-size: 110px 95px;
  opacity: 0.18;
  animation: stars 34s linear infinite;
}
.stars-b {
  background-size: 157px 139px;
  animation-duration: 52s;
  animation-direction: reverse;
}
.cloud {
  position: absolute;
  width: 50%;
  height: 17%;
  left: -52%;
  background: radial-gradient(
    ellipse,
    rgba(200, 219, 235, 0.22),
    transparent 70%
  );
  filter: blur(22px);
  animation: cloud 32s linear infinite;
}
.cloud-a {
  top: 3%;
}
.cloud-b {
  top: 23%;
  animation-delay: -18s;
  animation-duration: 44s;
}
.moon {
  position: absolute;
  top: 5%;
  right: 16%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 35%,
    #fffbe4,
    #dfd5b5 52%,
    #9ca9b4 70%
  );
  box-shadow: 0 0 45px rgba(228, 238, 255, 0.35);
  animation: moon 6s ease-in-out infinite;
}
.water-live {
  position: absolute;
  top: 15%;
  left: 40%;
  width: 25%;
  height: 65%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(226, 239, 246, 0.22),
    transparent
  );
  filter: blur(16px);
  animation: water 4s ease-in-out infinite;
}
.route-live {
  position: absolute;
  left: 28%;
  right: 1%;
  bottom: 2%;
  height: 55%;
  background: radial-gradient(
    ellipse,
    rgba(255, 199, 73, 0.29),
    transparent 58%
  );
  filter: blur(16px);
  animation: route 2.8s ease-in-out infinite;
}
.hero {
  height: 565px;
  max-width: 1460px;
  margin: auto;
  padding: 65px clamp(45px, 7vw, 110px) 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.hero-copy {
  z-index: 2;
  max-width: 620px;
}
.hero h1 {
  margin: 0;
  color: #d2a44d;
  font-size: clamp(95px, 10vw, 155px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0.03em;
  text-shadow: 0 5px 24px #000;
}
.hero-line {
  margin: 26px 0 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 45px;
  line-height: 1;
}
.hero-line:after,
.section-heading h2:after {
  content: "◇";
  display: block;
  height: 1px;
  margin: 18px auto 0;
  color: var(--gold);
  font-size: 12px;
  line-height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-line:after {
  margin-left: 0;
}
.hero-intro {
  max-width: 545px;
  font-size: 22px;
  line-height: 1.5;
}
.actions {
  display: flex;
  gap: 18px;
  margin-top: 26px;
}
.centered {
  justify-content: center;
}
.status {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sans);
  font-size: 14px;
}
.status span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
  animation: status 2s infinite;
}
.status b {
  color: var(--gold);
}
.hero-coin {
  position: relative;
  width: min(47vw, 590px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  transform: perspective(1000px) rotateX(var(--tilt-y, 0deg))
    rotateY(var(--tilt-x, 0deg));
  transition: transform 0.2s;
}
.hero-coin img {
  position: relative;
  z-index: 2;
  width: 76%;
  height: auto;
  filter: drop-shadow(0 30px 25px rgba(0, 0, 0, 0.7));
  animation: coin 6s ease-in-out infinite;
}
.living-world .moon { display: none; }
.coin-aura {
  position: absolute;
  width: 71%;
  height: 71%;
  border-radius: 50%;
  box-shadow: 0 0 65px rgba(242, 197, 94, 0.35);
  animation: aura 5s infinite;
}
.coin-plinth {
  position: absolute;
  z-index: 1;
  bottom: 3%;
  width: 78%;
  height: 18%;
  border-radius: 50%;
  background: linear-gradient(#486170, #0b1720 32%, #020609 72%);
  border: 2px solid #866126;
  box-shadow:
    0 20px 20px #000,
    inset 0 5px 10px rgba(255, 255, 255, 0.13);
}
.ornate-frame {
  position: relative;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 4px rgba(185, 131, 46, 0.1);
}
.ornate-frame:before,
.ornate-frame:after {
  content: "◆";
  position: absolute;
  color: var(--gold);
  font-size: 12px;
}
.ornate-frame:before {
  left: 12px;
  top: 9px;
}
.ornate-frame:after {
  right: 12px;
  bottom: 9px;
}
.world-panel {
  height: 383px;
  margin: 0 7px 8px;
  padding: 25px 45px;
  background: linear-gradient(rgba(2, 14, 24, 0.3), rgba(2, 14, 24, 0.67));
}
.section-heading {
  text-align: center;
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 400;
}
.section-heading h2:after {
  width: 230px;
}
.section-heading p {
  margin: 14px auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.35;
}
.destinations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px;
  margin: 10px auto 0;
  padding: 0;
  list-style: none;
}
.destinations li {
  text-align: center;
}
.medallion {
  width: 110px;
  height: 110px;
  margin: auto;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle, #0c4550, #03131f 70%);
  color: var(--bright);
  font-size: 46px;
  box-shadow:
    inset 0 0 0 6px rgba(185, 131, 46, 0.18),
    0 0 28px rgba(212, 164, 68, 0.26);
}
.destinations b {
  display: inline-block;
  margin-top: 6px;
  font-size: 25px;
  font-weight: 400;
}
.destinations a {
  font-size: 34px;
  text-decoration: none;
  color: var(--bright);
}
.editions {
  margin: 18px 15px;
  padding: 35px 45px 28px;
  min-height: 620px;
  overflow: hidden;
  background: #03101b
    url("/world/ornate-v3/arcta-community-route-world-v3.webp") center 56% /
    cover no-repeat;
}
.editions:after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(rgba(2, 11, 20, 0.65), rgba(2, 11, 20, 0.9));
  color: transparent;
}
.editions > * {
  position: relative;
  z-index: 1;
}
.coin-stage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 10px;
  margin: 16px auto 8px;
}
.coin-stage figure {
  position: relative;
  margin: 0;
  text-align: center;
}
.coin-stage img {
  position: relative;
  z-index: 2;
  width: 100%;
  clip-path: circle(44%);
  filter: drop-shadow(0 20px 17px #000);
  transition: 0.3s;
}
.coin-stage figure:hover img {
  transform: translateY(-8px);
  filter: drop-shadow(0 26px 20px #000) brightness(1.12);
}
.coin-stage figure > i {
  display: block;
  width: 90%;
  height: 26px;
  margin: -17px auto 0;
  border: 2px solid #604a30;
  border-radius: 50%;
  background: linear-gradient(#59636a, #1b2025 54%, #05090c);
  box-shadow: 0 20px 18px #000;
}
.coin-stage figure:after {
  content: "";
  display: block;
  width: 75%;
  height: 45px;
  margin: -2px auto -22px;
  background: linear-gradient(rgba(220, 190, 135, 0.15), transparent);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  opacity: 0.5;
}
.coin-stage figcaption {
  color: var(--bright);
  font-size: 18px;
}
.ruby img {
  filter: sepia(0.4) saturate(2.3) hue-rotate(315deg)
    drop-shadow(0 20px 17px #000);
}
.editions .actions {
  margin-top: 16px;
}
.coin-identity { margin: 18px 15px; padding: 42px; overflow: hidden; background: linear-gradient(145deg, #071c2b, #020b13); }
.coin-kicker, .beyond-game { margin: 0 0 10px; text-align: center; color: var(--bright); font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.two-face-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 30px; }
.two-face-grid figure { position: relative; margin: 0; padding: 7px; border: 1px solid rgba(196,139,45,.42); background: #05090c; transition: .3s; }
.two-face-grid figure:hover { transform: translateY(-7px); border-color: var(--bright); box-shadow: 0 20px 45px rgba(0,0,0,.55); }
.two-face-grid img { display: block; width: 100%; height: auto; }
.two-face-grid figcaption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: var(--bright); font-size: 19px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 8px #000; }
.standard {
  margin: 18px 15px;
  padding: 26px 42px 42px;
  background: #041421;
  overflow: hidden;
}
.blueprint {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 20px 0 0;
  background-image:
    linear-gradient(rgba(185, 131, 46, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 131, 46, 0.18) 1px, transparent 1px);
  background-size: 44px 44px;
}
.blueprint > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  min-height: 210px;
  padding: 14px;
  border-right: 1px solid var(--line);
}
.blueprint > div:last-child {
  border: 0;
}
.blueprint dt span {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-size: 50px;
}
.blueprint dt b {
  display: block;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blueprint dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.ecosystem {
  position: relative;
  min-height: 820px;
  padding: 54px 45px 35px;
  overflow: hidden;
  isolation: isolate;
}
.ecosystem-world {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("/world/ornate-v3/arcta-community-route-world-v3.webp")
    center/cover no-repeat;
}
.ecosystem-world:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(2, 11, 20, 0.35), rgba(2, 11, 20, 0.68));
}
.eco-cloud {
  position: absolute;
  left: -55%;
  top: 5%;
  width: 65%;
  height: 20%;
  background: radial-gradient(
    ellipse,
    rgba(205, 221, 235, 0.2),
    transparent 70%
  );
  filter: blur(24px);
  animation: cloud 43s linear infinite;
}
.eco-water {
  position: absolute;
  left: 33%;
  top: 24%;
  width: 34%;
  height: 58%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(210, 235, 248, 0.16),
    transparent
  );
  filter: blur(20px);
  animation: water 4s infinite;
}
.eco-route {
  position: absolute;
  inset: 35% 3% 10%;
  background: radial-gradient(
    ellipse,
    rgba(255, 196, 72, 0.28),
    transparent 56%
  );
  filter: blur(17px);
  animation: route 3s infinite;
}
.journey-line {
  position: absolute;
  z-index: 0;
  left: 2%;
  right: 2%;
  top: 270px;
  width: 96%;
  height: 260px;
  overflow: visible;
}
.journey-line path {
  fill: none;
  stroke: #f2c45f;
  stroke-width: 7;
  filter: drop-shadow(0 0 12px #ffd66c);
  animation: route-stroke 3s ease-in-out infinite;
}
.stages {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  margin: 145px 0 20px;
  padding: 0;
  list-style: none;
}
.stages li {
  text-align: center;
}
.stages li:nth-child(2) {
  transform: translateY(-65px);
}
.stages li:nth-child(3) {
  transform: translateY(-40px);
}
.stages li:nth-child(4) {
  transform: translateY(-115px);
}
.stages span {
  width: 72px;
  height: 72px;
  margin: auto;
  display: grid;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: #062333;
  box-shadow: 0 0 26px rgba(241, 193, 86, 0.35);
}
.stages b {
  display: block;
  margin: 10px 0;
  font-size: 25px;
  font-weight: 400;
}
.stages p {
  max-width: 225px;
  margin: auto;
  font-size: 16px;
  line-height: 1.45;
}
.roadmap-link {
  align-self: center;
  color: var(--ivory);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.roadmap-link span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
}
.responsibility {
  margin: 0 18px;
  padding: 25px 60px;
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  background: rgba(2, 17, 27, 0.95);
}
.responsibility-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-right: 1px solid var(--line);
  color: var(--gold);
  letter-spacing: 0.15em;
}
.responsibility h2 {
  margin: 0;
  text-align: center;
  font-size: 38px;
  font-weight: 400;
}
.responsibility p {
  text-align: center;
  font-size: 17px;
}
.faq {
  position: relative;
  min-height: 620px;
  padding: 40px 45px 55px;
  overflow: hidden;
  background: #03111c;
}
.faq-scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36%;
  height: 75%;
  background: url("/world/arcta-world-cinematic-v056.webp") left center/cover;
  opacity: 0.48;
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent);
  mask-image: linear-gradient(90deg, #000 50%, transparent);
}
.faq-list {
  position: relative;
  z-index: 2;
  width: 66%;
  margin: 26px 3% 0 auto;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  position: relative;
  padding: 15px 42px 7px;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary span:before,
.faq summary span:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 25px;
  width: 14px;
  height: 2px;
  background: var(--gold);
  transform: rotate(40deg);
}
.faq summary span:after {
  right: 0;
  transform: rotate(-40deg);
}
.faq details p {
  margin: 0;
  padding: 0 42px 15px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
footer {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 30px;
  margin: 16px;
  padding: 35px 25px 70px;
  background: #03111c;
}
footer > div:not(:first-child) {
  padding-left: 28px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
footer b {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
footer a {
  text-decoration: none;
}
footer .footer-brand p {
  font-size: 22px;
}
footer small {
  display: block;
  max-width: 275px;
  font-size: 15px;
  line-height: 1.5;
}
.foundation {
  position: absolute;
  left: 28%;
  right: 2%;
  bottom: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--gold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
@keyframes stars {
  to {
    transform: translate3d(80px, 100px, 0);
  }
}
@keyframes cloud {
  to {
    transform: translateX(190vw);
  }
}
@keyframes moon {
  50% {
    filter: brightness(1.25);
    transform: scale(1.06);
  }
}
@keyframes water {
  50% {
    opacity: 0.35;
    transform: scaleX(1.4);
  }
}
@keyframes route {
  50% {
    opacity: 0.4;
    filter: blur(23px) brightness(1.4);
  }
}
@keyframes route-stroke {
  50% {
    opacity: 0.55;
    stroke-width: 10;
  }
}
@keyframes status {
  50% {
    opacity: 0.4;
  }
}
@keyframes coin {
  50% {
    transform: translateY(-8px) rotate(0.4deg);
  }
}
@keyframes aura {
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}
@media (max-width: 1050px) {
  .site-header nav {
    gap: 18px;
  }
  .site-header nav a:nth-last-child(-n + 2) {
    display: none;
  }
  .hero {
    padding-inline: 42px;
  }
  .blueprint > div {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .blueprint dt span {
    margin: auto;
  }
  .stages {
    gap: 20px;
  }
}
@media (max-width: 760px) {
  .coin-identity { margin: 12px 8px; padding: 36px 12px; }
  .two-face-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .two-face-grid figcaption { font-size: 14px; }
  html {
    scroll-padding-top: 64px;
  }
  .site-header {
    height: 64px;
    padding: 0 14px;
    grid-template-columns: 1fr auto;
  }
  .brand {
    font-size: 17px;
  }
  .brand-seal {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .site-header > .ornate-button {
    display: none;
  }
  .menu {
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--line);
    background: transparent;
  }
  .menu span {
    width: 18px;
    height: 1px;
    background: var(--gold);
  }
  .menu b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .site-header nav {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    padding: 12px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #020b14;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
  }
  .site-header nav.open {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .site-header nav a,
  .site-header nav a:nth-last-child(-n + 2) {
    display: block;
    padding: 13px;
    border-bottom: 1px solid rgba(185, 131, 46, 0.25);
  }
  .chapter-one {
    padding-top: 64px;
  }
  .living-world {
    height: 1600px;
    background-position: 54% 35%;
  }
  .moon {
    right: 9%;
    width: 50px;
    height: 50px;
  }
  .hero {
    height: 780px;
    padding: 38px 18px;
    display: block;
  }
  .hero h1 {
    font-size: 82px;
  }
  .hero-line {
    font-size: 37px;
  }
  .hero-intro {
    font-size: 18px;
  }
  .actions {
    flex-direction: column;
  }
  .ornate-button {
    width: 100%;
    min-width: 0;
  }
  .hero-coin {
    width: 360px;
    max-width: 100%;
    margin: 18px auto 0;
  }
  .world-panel {
    height: 760px;
    margin: 0 8px;
    padding: 32px 14px;
  }
  .section-heading h2 {
    font-size: 38px;
  }
  .section-heading p {
    font-size: 16px;
  }
  .destinations {
    grid-template-columns: 1fr 1fr;
    gap: 24px 8px;
    margin-top: 28px;
  }
  .medallion {
    width: 90px;
    height: 90px;
    font-size: 38px;
  }
  .destinations b {
    font-size: 21px;
  }
  .editions,
  .standard {
    margin: 12px 8px;
    padding: 38px 14px;
  }
  .coin-stage {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 3px;
  }
  .coin-stage figure:after {
    display: none;
  }
  .coin-stage figcaption {
    font-size: 17px;
  }
  .blueprint {
    grid-template-columns: 1fr;
  }
  .blueprint > div {
    grid-template-columns: 100px 1fr;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 155px;
  }
  .blueprint dt span {
    width: 85px;
    height: 85px;
    font-size: 36px;
  }
  .ecosystem {
    min-height: 1100px;
    padding: 50px 16px;
  }
  .journey-line {
    left: 40px;
    top: 255px;
    width: 100px;
    height: 690px;
  }
  .journey-line path {
    d: path("M60 0 C0 120 110 170 50 270 S100 430 45 540 S100 650 60 690");
    stroke-width: 4;
  }
  .stages {
    grid-template-columns: 1fr;
    margin: 90px 0 20px;
    gap: 18px;
  }
  .stages li,
  .stages li:nth-child(n) {
    min-height: 150px;
    padding-left: 92px;
    text-align: left;
    transform: none;
  }
  .stages span {
    position: absolute;
    left: 10px;
  }
  .stages p {
    max-width: none;
  }
  .responsibility {
    margin: 0 8px;
    padding: 24px;
    grid-template-columns: 1fr;
  }
  .responsibility-brand {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 15px;
  }
  .responsibility h2 {
    margin-top: 18px;
    font-size: 32px;
  }
  .faq {
    padding: 50px 18px;
  }
  .faq-scene {
    width: 100%;
    opacity: 0.2;
  }
  .faq-list {
    width: 100%;
    margin-top: 25px;
  }
  .faq summary {
    padding-left: 0;
    font-size: 17px;
  }
  .faq details p {
    padding-left: 0;
  }
  footer {
    grid-template-columns: 1fr 1fr;
    margin: 8px;
    padding: 32px 20px 70px;
  }
  footer .footer-brand {
    grid-column: 1/-1;
  }
  footer > div:not(:first-child) {
    padding-left: 0;
    border-left: 0;
  }
  .foundation {
    left: 15px;
    right: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .stars,
  .cloud,
  .moon,
  .water-live,
  .route-live,
  .hero-coin img,
  .coin-aura,
  .eco-cloud,
  .eco-water,
  .eco-route,
  .journey-line path,
  .status span {
    animation: none !important;
  }
  .hero-coin {
    transform: none !important;
  }
}

.pointer-gel {
  --pointer-x: 0px;
  --pointer-y: 0px;
  --pointer-rx: 0deg;
  --pointer-ry: 0deg;
  --pointer-scale: 1;
  transform: perspective(700px) translate3d(var(--pointer-x), var(--pointer-y), 0) rotateX(var(--pointer-rx)) rotateY(var(--pointer-ry)) scale(var(--pointer-scale));
  transform-origin: center;
  transition: transform 420ms var(--motion-spring), filter var(--motion-ui) var(--motion-ease);
  will-change: transform;
}
.pointer-gel.is-pointer-active { --pointer-scale: 1.025; filter: brightness(1.06); }
.pointer-gel:active { --pointer-scale: 0.965; transition-duration: 90ms; }
@media (prefers-reduced-motion: reduce) {
  .pointer-gel { transform: none !important; filter: none !important; }
}

/* Object-matched refinement: no rectangular ambient overlays. */
@media (min-width: 901px) {
  .pixel-motion {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    mix-blend-mode: screen;
    will-change: opacity, filter, background-position;
  }

  .hero-road-pixels {
    background: #ffd77b;
    -webkit-mask: url("./media/masks/hero-road-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/hero-road-mask.webp") center / 100% 100% no-repeat;
  }

  .hero-building-pixels {
    background: #ffd07a;
    -webkit-mask: url("./media/masks/hero-buildings-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/hero-buildings-mask.webp") center / 100% 100% no-repeat;
  }

  .hero-moon-pixels {
    background: radial-gradient(circle at 77.1% 12.9%, rgba(255, 254, 233, 0.86), rgba(205, 227, 246, 0.28) 3.4%, transparent 7%);
    -webkit-mask: url("./media/masks/hero-moon-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/hero-moon-mask.webp") center / 100% 100% no-repeat;
  }

  .hero-water-pixels {
    background:
      repeating-linear-gradient(174deg, transparent 0 18px, rgba(173, 226, 249, 0.32) 23px, transparent 29px),
      linear-gradient(90deg, transparent 34%, rgba(128, 205, 239, 0.25), transparent 66%);
    background-size: 100% 142%, 180% 100%;
    -webkit-mask: url("./media/masks/hero-water-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/hero-water-mask.webp") center / 100% 100% no-repeat;
  }

  .hero-coin-pixels {
    background: radial-gradient(circle at var(--coin-light-x, 46%) var(--coin-light-y, 44%), rgba(255, 251, 218, 0.42), rgba(255, 207, 103, 0.12) 18%, transparent 42%);
    -webkit-mask: url("./media/masks/hero-coin-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/hero-coin-mask.webp") center / 100% 100% no-repeat;
  }

  .collector-coin-pixels {
    background: linear-gradient(105deg, transparent 20%, rgba(255, 249, 220, 0.33) 44%, rgba(255, 216, 127, 0.16) 54%, transparent 76%);
    background-size: 220% 100%;
    -webkit-mask: url("./media/masks/collector-coins-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/collector-coins-mask.webp") center / 100% 100% no-repeat;
  }

  .ecosystem-road-pixels {
    background: #ffd77b;
    -webkit-mask: url("./media/masks/ecosystem-road-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/ecosystem-road-mask.webp") center / 100% 100% no-repeat;
  }

  .ecosystem-building-pixels {
    background: #ffd07a;
    -webkit-mask: url("./media/masks/ecosystem-buildings-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/ecosystem-buildings-mask.webp") center / 100% 100% no-repeat;
  }

  .ecosystem-moon-pixels {
    background: radial-gradient(circle at 80.7% 5.3%, rgba(255, 254, 233, 0.86), rgba(205, 227, 246, 0.28) 3.8%, transparent 8%);
    -webkit-mask: url("./media/masks/ecosystem-moon-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/ecosystem-moon-mask.webp") center / 100% 100% no-repeat;
  }

  .ecosystem-water-pixels {
    background:
      repeating-linear-gradient(174deg, transparent 0 14px, rgba(173, 226, 249, 0.28) 18px, transparent 23px),
      linear-gradient(90deg, transparent 31%, rgba(128, 205, 239, 0.22), transparent 69%);
    background-size: 100% 138%, 180% 100%;
    -webkit-mask: url("./media/masks/ecosystem-water-mask.webp") center / 100% 100% no-repeat;
    mask: url("./media/masks/ecosystem-water-mask.webp") center / 100% 100% no-repeat;
  }

  .collector-reflection,
  .frame-breathe,
  .status-breathe {
    display: none !important;
  }

  .living-cloud {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0 34%, rgba(0, 0, 0, 0.62) 55%, transparent 76%);
    mask-image: radial-gradient(ellipse at center, #000 0 34%, rgba(0, 0, 0, 0.62) 55%, transparent 76%);
  }

  .living-water {
    clip-path: none;
    border-radius: 48% 48% 42% 42% / 18% 18% 82% 82%;
    -webkit-mask-image:
      linear-gradient(100deg, transparent 5%, #000 29%, #000 70%, transparent 96%),
      linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(100deg, transparent 5%, #000 29%, #000 70%, transparent 96%),
      linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    mask-composite: intersect;
  }

  .plate-life-one .living-water {
    left: 43.7%;
    top: 26.5%;
    width: 16.2%;
    height: 32%;
  }

  .water-tall {
    left: 36%;
    top: 10.5%;
    width: 30%;
    height: 25%;
  }

  .moon-pulse {
    left: 73.1%;
    top: 9.5%;
    width: 7.2%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 250, 219, 0.38) 0 18%, rgba(202, 224, 244, 0.14) 43%, transparent 72%);
    mix-blend-mode: screen;
    filter: blur(5px);
    will-change: opacity, filter;
  }

  .moon-tall {
    left: 74%;
    top: 2.9%;
    width: 11%;
  }

  .building-lights {
    inset: 0;
    opacity: 0;
    mix-blend-mode: screen;
    will-change: opacity, filter;
  }

  .building-lights-one {
    background:
      radial-gradient(ellipse at 12% 46%, rgba(255, 193, 80, 0.18), transparent 8%),
      radial-gradient(ellipse at 50% 40%, rgba(255, 185, 67, 0.21), transparent 7%),
      radial-gradient(ellipse at 89% 43%, rgba(255, 194, 76, 0.2), transparent 9%),
      radial-gradient(ellipse at 18% 84%, rgba(255, 189, 64, 0.2), transparent 8%),
      radial-gradient(ellipse at 68% 79%, rgba(255, 190, 67, 0.2), transparent 9%);
  }

  .building-lights-three {
    background:
      radial-gradient(ellipse at 13% 24%, rgba(255, 191, 72, 0.21), transparent 9%),
      radial-gradient(ellipse at 78% 25%, rgba(255, 188, 66, 0.23), transparent 10%),
      radial-gradient(ellipse at 11% 63%, rgba(255, 184, 62, 0.17), transparent 8%);
  }

  .living-road {
    filter: blur(1.2px) drop-shadow(0 0 5px rgba(255, 187, 58, 0.55));
  }

  .living-road path {
    stroke: rgba(255, 198, 81, 0.34);
    stroke-width: 3.2;
  }

  .tall-road path {
    stroke-width: 3;
  }

  .approved-plate.is-live .moon-pulse {
    animation: exact-moon-breathe 5.6s ease-in-out infinite;
  }

  .approved-plate.is-live .building-lights-one {
    animation: exact-buildings-one 4.8s ease-in-out infinite alternate;
  }

  .approved-plate.is-live .building-lights-three {
    animation: exact-buildings-three 5.7s 1.2s ease-in-out infinite alternate;
  }

  .approved-plate.is-live .living-road {
    animation: exact-road-light 3.6s ease-in-out infinite;
  }

  .approved-plate.is-live .living-water {
    animation: exact-water-flow 4.4s ease-in-out infinite;
  }

  .coin-sheen {
    background: radial-gradient(circle at var(--coin-light-x, 46%) var(--coin-light-y, 44%), rgba(255, 250, 211, 0.24), rgba(250, 198, 85, 0.08) 27%, transparent 57%);
    background-size: 100% 100%;
    filter: none;
    transition: background-position 180ms ease-out;
  }

  .approved-plate.is-live .coin-sheen {
    animation: exact-coin-light 4.2s ease-in-out infinite;
  }

  .hotspot::after {
    inset: auto;
    opacity: 0;
    transform: none;
    animation: none;
  }

  .hero-play::after,
  .hero-explore::after,
  .nav-play-now::after,
  .collector-designs::after,
  .media-pack::after,
  .ecosystem-play::after {
    inset: 3%;
    border-radius: 4px;
    clip-path: polygon(4% 0, 96% 0, 100% 22%, 100% 78%, 96% 100%, 4% 100%, 0 78%, 0 22%);
    background: linear-gradient(105deg, transparent 28%, rgba(255, 239, 181, 0.34) 49%, transparent 69%);
    transform: translateX(-120%);
  }

  .path-knowledge::after,
  .path-bridge::after,
  .path-garden::after,
  .path-workshop::after {
    width: 42%;
    aspect-ratio: 1;
    top: 3%;
    left: 20%;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 220, 139, 0.72);
    box-shadow: 0 0 8px rgba(231, 174, 66, 0.46), inset 0 0 8px rgba(231, 174, 66, 0.2);
  }

  .path-knowledge::after { left: 26%; }
  .path-bridge::after { left: 27%; }
  .path-garden::after { left: 17%; }
  .path-workshop::after { left: 20%; }

  .nav-play::after,
  .nav-game::after,
  .nav-ecosystem::after,
  .nav-collectors::after,
  .nav-facts::after,
  .nav-support::after {
    left: 8%;
    right: 8%;
    bottom: 7%;
    height: 1px;
    background: #d9aa55;
    box-shadow: 0 0 8px rgba(232, 184, 88, 0.8);
    transform: scaleX(0);
  }

  .hotspot:hover::after,
  .hotspot:focus-visible::after {
    opacity: 1;
  }

  .hero-play:hover::after,
  .hero-explore:hover::after,
  .nav-play-now:hover::after,
  .collector-designs:hover::after,
  .media-pack:hover::after,
  .ecosystem-play:hover::after,
  .hero-play:focus-visible::after,
  .hero-explore:focus-visible::after,
  .nav-play-now:focus-visible::after,
  .collector-designs:focus-visible::after,
  .media-pack:focus-visible::after,
  .ecosystem-play:focus-visible::after {
    animation: exact-button-sheen 820ms ease-out both;
  }

  .nav-play:hover::after,
  .nav-game:hover::after,
  .nav-ecosystem:hover::after,
  .nav-collectors:hover::after,
  .nav-facts:hover::after,
  .nav-support:hover::after,
  .nav-play:focus-visible::after,
  .nav-game:focus-visible::after,
  .nav-ecosystem:focus-visible::after,
  .nav-collectors:focus-visible::after,
  .nav-facts:focus-visible::after,
  .nav-support:focus-visible::after {
    transform: scaleX(1);
    transition: transform 220ms ease;
  }

  @keyframes exact-moon-breathe {
    0%, 100% { opacity: 0.12; filter: blur(7px) brightness(0.9); }
    50% { opacity: 0.46; filter: blur(4px) brightness(1.28); }
  }
  @keyframes exact-buildings-one {
    0% { opacity: 0.1; filter: brightness(0.9); }
    100% { opacity: 0.48; filter: brightness(1.32); }
  }
  @keyframes exact-buildings-three {
    0% { opacity: 0.08; filter: brightness(0.88); }
    100% { opacity: 0.42; filter: brightness(1.26); }
  }
  @keyframes exact-road-light {
    0%, 100% { opacity: 0.1; filter: blur(1.7px) drop-shadow(0 0 3px rgba(255, 187, 58, 0.38)); }
    50% { opacity: 0.64; filter: blur(0.8px) drop-shadow(0 0 9px rgba(255, 204, 93, 0.92)); }
  }
  @keyframes exact-water-flow {
    0%, 100% { opacity: 0.1; background-position: 0 0, 100% 0; filter: blur(2.2px) brightness(0.95); }
    50% { opacity: 0.34; background-position: 0 42%, 0 0; filter: blur(1.2px) brightness(1.24); }
  }
  @keyframes exact-coin-light {
    0%, 100% { opacity: 0.1; filter: brightness(0.96); }
    50% { opacity: 0.38; filter: brightness(1.22); }
  }
  @keyframes exact-button-sheen {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
  }
}

/* Pointer-reactive interaction layer.
   Static approved artwork stays untouched and every response is clipped to its real control. */
@media (min-width: 901px) {
  .pixel-motion,
  .living-cloud,
  .living-water,
  .living-road,
  .moon-pulse,
  .building-lights,
  .coin-sheen,
  .pedestal-reflection,
  .collector-glint {
    display: none !important;
  }

  .arcta-coin-reactor {
    --pointer-x: 50%;
    --pointer-y: 50%;
    position: absolute;
    z-index: 2;
    left: 57.2%;
    top: 17.1%;
    width: 27.2%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: auto;
    background:
      radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 248, 218, 0.34) 0, rgba(226, 189, 101, 0.12) 14%, transparent 39%);
    box-shadow: inset 0 0 0 1px rgba(255, 235, 179, 0);
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 220ms ease, box-shadow 220ms ease;
  }

  .arcta-coin-reactor.is-pointer-active {
    opacity: 0.82;
    box-shadow: inset 0 0 0 1px rgba(255, 235, 179, 0.2), 0 0 24px rgba(226, 189, 101, 0.15);
  }

  .hotspot {
    --pointer-x: 50%;
    --pointer-y: 50%;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    outline: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0);
    transform: perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
    transform-origin: center;
    transition: background 180ms ease, box-shadow 180ms ease, transform 120ms ease-out;
  }

  .hotspot::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.32) 0, rgba(226, 189, 101, 0.17) 18%, transparent 55%);
    transform: none;
    transition: opacity 180ms ease;
  }

  .hotspot.is-pointer-active {
    background: rgba(226, 189, 101, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.19), inset 0 -1px 0 rgba(226, 189, 101, 0.18), 0 0 20px rgba(226, 189, 101, 0.18);
  }

  .hotspot.is-pointer-active::before {
    opacity: 1;
  }

  .hotspot:focus-visible {
    background: rgba(226, 189, 101, 0.12);
    box-shadow: 0 0 0 3px rgba(226, 189, 101, 0.42);
  }

  .hero-play,
  .hero-explore,
  .nav-play-now,
  .collector-designs,
  .media-pack,
  .ecosystem-play {
    clip-path: polygon(4% 0, 96% 0, 100% 22%, 100% 78%, 96% 100%, 4% 100%, 0 78%, 0 22%);
  }

  .path-knowledge,
  .path-bridge,
  .path-garden,
  .path-workshop {
    width: 6.4%;
    height: 9.6%;
    top: 76.4%;
    border-radius: 50%;
  }

  .path-knowledge { left: 8.53%; }
  .path-bridge { left: 31.25%; }
  .path-garden { left: 56.7%; }
  .path-workshop { left: 81.9%; }

  .path-knowledge::after,
  .path-bridge::after,
  .path-garden::after,
  .path-workshop::after {
    display: none;
  }

  .path-knowledge:hover,
  .path-bridge:hover,
  .path-garden:hover,
  .path-workshop:hover {
    background: transparent;
    box-shadow:
      inset 0 0 0 1px rgba(255, 246, 216, 0.18),
      0 0 14px rgba(226, 189, 101, 0.22);
    border-radius: 50%;
  }

  .nav-play:hover,
  .nav-game:hover,
  .nav-ecosystem:hover,
  .nav-collectors:hover,
  .nav-facts:hover,
  .nav-support:hover {
    background: transparent;
    box-shadow: none;
    transform: translateY(-1px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .arcta-coin-reactor {
    display: none !important;
  }

  .hotspot {
    transform: none !important;
    transition: none !important;
  }
}

/* Final concept-fidelity spacing and collector material correction. */
@media (min-width: 761px) {
  .hero {
    height: 640px;
  }
  .hero-coin {
    width: min(43vw, 540px);
  }
}
.ruby img {
  filter: sepia(0.78) saturate(5) hue-rotate(310deg) brightness(0.76)
    contrast(1.18) drop-shadow(0 20px 17px #000);
}
@media (max-width: 760px) {
  .hero {
    height: 1010px;
  }
}

/* Approved cinematic homepage composition */
.brand-seal{overflow:hidden;background:radial-gradient(circle,#123444,#020b14 72%)}.brand-seal img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 0 5px rgba(237,207,141,.55))}.hero h1{color:transparent;background:linear-gradient(180deg,#fff0b3 0,#cf9638 46%,#8e5a18 76%,#efd892 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 6px #000)}.hero-line{color:#fff4d6;text-shadow:0 3px 8px #000,0 0 24px rgba(239,210,144,.18)}
.ornate-button{position:relative;isolation:isolate;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(7,20,28,.42),0 7px 16px rgba(0,0,0,.35);text-shadow:0 1px 1px rgba(255,255,255,.25)}.ornate-button:after{content:"";position:absolute;z-index:-1;inset:-60% auto -60% -35%;width:24%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:button-shine 4.8s ease-in-out infinite}
.hero-coin{width:min(49vw,650px);overflow:visible}.hero-coin img{position:absolute;height:auto;object-fit:contain}.hero-coin .hero-coin-main{z-index:4;width:63%;left:14%;top:19%;animation:coin-main 5s ease-in-out infinite}.hero-coin .hero-coin-second{z-index:3;width:38%;right:1%;top:40%;opacity:.96;animation:coin-second 6s ease-in-out infinite}.coin-aura{z-index:2;width:75%;height:75%;left:8%;top:18%;box-shadow:0 0 75px rgba(215,35,58,.16),0 0 110px rgba(242,197,94,.2)}
.coin-plinth{z-index:1;left:3%;bottom:0;width:94%;height:22%;border-radius:50% 50% 18% 18%;background:linear-gradient(165deg,#78694f 0,#302a25 28%,#11161a 60%,#020507 100%);border:1px solid #a57931;box-shadow:0 28px 28px #000,inset 0 7px 9px rgba(255,228,170,.22),inset 0 -8px 15px rgba(0,0,0,.75);transform:perspective(500px) rotateX(58deg)}.coin-plinth:after{content:"";position:absolute;inset:20% 5%;border:1px solid rgba(235,189,95,.32);border-radius:50%}.hero-sparks{position:absolute;z-index:5;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffd66f 0 2px,transparent 3px),radial-gradient(circle,#e49b35 0 1px,transparent 2px);background-size:137px 109px,91px 153px;opacity:.6;animation:sparks 7s linear infinite}
.living-world:before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(108,195,236,.08) 50%,transparent 66%);mix-blend-mode:screen;animation:sky-sweep 9s ease-in-out infinite}.water-live{opacity:.38;mix-blend-mode:screen;animation:water-live-strong 3.6s ease-in-out infinite}.route-live{opacity:.6;mix-blend-mode:screen;animation:route-live-strong 2.4s ease-in-out infinite}.destinations li,.coin-stage figure,.principles article{transition:transform .3s var(--ease),filter .3s var(--ease)}.destinations li:hover,.principles article:hover{transform:translateY(-7px);filter:brightness(1.14)}
@keyframes button-shine{0%,68%{left:-35%}82%,100%{left:125%}}@keyframes coin-main{50%{transform:translateY(-8px) rotate(-.5deg);filter:drop-shadow(0 35px 28px rgba(0,0,0,.78)) brightness(1.07)}}@keyframes coin-second{50%{transform:translate(5px,-6px) rotate(1deg);filter:drop-shadow(0 27px 22px rgba(0,0,0,.72)) brightness(1.12)}}@keyframes sparks{to{background-position:137px -109px,-91px -153px}}@keyframes sky-sweep{50%{transform:translateX(12%);opacity:.45}}@keyframes water-live-strong{50%{opacity:.7;transform:scaleX(1.42);filter:blur(19px) brightness(1.5)}}@keyframes route-live-strong{50%{opacity:.34;filter:blur(22px) brightness(1.8)}}
@media(max-width:760px){.hero-coin{width:350px;height:390px}.hero-coin .hero-coin-main{width:68%;left:7%;top:3%}.hero-coin .hero-coin-second{width:42%;right:0;top:27%}.coin-plinth{bottom:5%;height:18%}}
@media(prefers-reduced-motion:reduce){.ornate-button:after,.hero-coin .hero-coin-main,.hero-coin .hero-coin-second,.hero-sparks,.living-world:before{animation:none!important}}

/* Exact approved hero geometry */
.site-header{height:76px;background:linear-gradient(180deg,rgba(1,9,16,.68),rgba(1,9,16,.12));border-bottom:0;backdrop-filter:none}.chapter-one{padding-top:0}.living-world{height:1080px;background-image:url("./media/arcta-reference-world-stage-v1.webp");background-position:center top}.living-world:after{background:linear-gradient(90deg,rgba(1,8,14,.34) 0,rgba(1,8,14,.08) 44%,transparent 72%),linear-gradient(180deg,transparent 75%,rgba(1,8,14,.45))}.hero{height:900px;max-width:none;padding:170px 4.7% 36px;grid-template-columns:53% 47%;align-items:start}.hero-copy{max-width:650px}.hero h1{font-size:clamp(120px,10vw,180px);line-height:.78}.hero-line{margin-top:30px;font-size:44px}.hero-intro{max-width:560px;font-family:var(--sans);font-size:20px;line-height:1.65}.hero-coin{width:min(46vw,680px);height:700px;align-self:start}.hero-coin .hero-coin-main{width:76%;left:3%;top:14%}.hero-coin .hero-coin-second{width:38%;right:0;top:47%}.coin-plinth{display:none}.coin-aura{left:0;top:13%;width:79%;height:76%}.hero-sparks{inset:9% -6% 4% 0}.world-panel{height:420px;margin-top:0;background:rgba(1,12,21,.77);backdrop-filter:blur(4px)}
.ornate-button.gold{background:linear-gradient(180deg,#8b5915 0,#d49b36 18%,#80500f 52%,#b57a1f 100%);color:#f8e6b9;border-color:#f2c86e;box-shadow:inset 0 0 0 2px #2b1b08,inset 0 0 22px rgba(255,202,80,.35),0 0 18px rgba(255,183,50,.13)}.ornate-button.dark{border-color:#aa7931;box-shadow:inset 0 0 0 2px rgba(181,128,40,.17),0 7px 16px rgba(0,0,0,.45)}
@media(max-width:760px){.site-header{height:64px;background:rgba(1,9,16,.82);backdrop-filter:blur(10px)}.chapter-one{padding-top:64px}.living-world{height:1540px;background-position:58% top}.hero{height:940px;padding:52px 18px 20px;display:block}.hero h1{font-size:82px}.hero-coin{width:350px;height:390px;margin-top:12px}.hero-coin .hero-coin-main{width:69%;left:3%;top:8%}.hero-coin .hero-coin-second{width:39%;right:1%;top:37%}.world-panel{height:690px}}

/* Persistent world and restrained reference styling */
body{position:relative;isolation:isolate;background:#020a12 url("./media/arcta-reference-world-stage-v1.webp") center top/cover fixed no-repeat}.chapter-one{isolation:auto;overflow:visible;background:transparent}.living-world{position:fixed;z-index:-1;inset:0;height:100vh;background:none;pointer-events:none}.living-world:after{background:linear-gradient(90deg,rgba(1,8,14,.3),transparent 45%)}.stars{opacity:.07}.cloud{opacity:.22}.hero-sparks{display:none}.route-live{left:42%;right:18%;bottom:2%;height:48%;opacity:.12;filter:blur(24px);animation:road-breathe 5.5s ease-in-out infinite}.water-live{top:20%;left:43%;width:18%;height:39%;opacity:.1;filter:blur(18px);animation:lake-breathe 6.5s ease-in-out infinite}.living-world:before{background:radial-gradient(circle at 68% 14%,rgba(223,238,255,.14),transparent 8%);animation:moon-breathe 7s ease-in-out infinite}
.hero{height:850px;padding:155px 5% 30px;grid-template-columns:55% 45%}.hero-copy{max-width:580px}.hero h1{font-size:clamp(105px,8.5vw,150px);filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}.hero-line{margin:24px 0 14px;padding-bottom:16px;font-size:39px}.hero-intro{max-width:520px;font-size:18px;line-height:1.55}.actions{gap:16px;margin-top:22px}.status{font-size:12px}.hero-coin{width:min(42vw,590px);height:650px}.hero-coin .hero-coin-main{width:68%;left:5%;top:18%;animation:coin-main-subtle 7s ease-in-out infinite}.hero-coin .hero-coin-second{width:34%;right:2%;top:48%;animation:coin-second-subtle 8s ease-in-out infinite}.coin-aura{left:3%;top:17%;width:71%;height:68%;opacity:.42}.world-panel{height:390px;background:rgba(2,15,25,.48);border-color:rgba(196,139,45,.55);backdrop-filter:blur(10px) saturate(1.08)}
.ornate-button{min-width:0;min-height:58px;padding:14px 34px;border-width:1px;outline:1px solid rgba(222,173,79,.4);outline-offset:-6px;font-size:15px;letter-spacing:.055em;box-shadow:inset 0 0 0 1px rgba(13,23,27,.7),0 5px 14px rgba(0,0,0,.28)}.ornate-button.gold{background:linear-gradient(180deg,#b77c22,#75470d 50%,#9c6217);border-color:#e3b65d;color:#f7e5bb;box-shadow:inset 0 0 16px rgba(255,203,83,.16),0 5px 14px rgba(0,0,0,.28)}.ornate-button.dark{background:rgba(2,15,25,.62);border-color:#a8752d}.ornate-button:after{opacity:.45;animation-duration:7s}.hero h1,.hero-line,.hero-intro{max-width:100%}
.editions,.coin-identity,.standard,.responsibility,.faq,footer{position:relative;z-index:1;background:rgba(3,17,28,.66)!important;backdrop-filter:blur(14px) saturate(1.08)}.ecosystem{position:relative;z-index:1;background:rgba(2,13,22,.46);backdrop-filter:blur(8px)}.ecosystem-world{display:none}.faq-scene{opacity:.22}.coin-stage figure,.two-face-grid figure,.principles article{background-color:rgba(3,18,28,.52)}
@keyframes road-breathe{50%{opacity:.22;filter:blur(18px) brightness(1.25)}}@keyframes lake-breathe{50%{opacity:.2;transform:scaleX(1.08);filter:blur(16px) brightness(1.2)}}@keyframes moon-breathe{50%{opacity:.52;filter:brightness(1.15)}}@keyframes coin-main-subtle{50%{transform:translateY(-3px);filter:drop-shadow(0 24px 20px rgba(0,0,0,.7)) brightness(1.025)}}@keyframes coin-second-subtle{50%{transform:translateY(-2px);filter:drop-shadow(0 18px 16px rgba(0,0,0,.65)) brightness(1.03)}}
@media(max-width:760px){body{background-attachment:scroll;background-position:58% top}.living-world{position:absolute;height:100vh}.hero{height:900px;padding:48px 18px 18px}.hero h1{font-size:72px}.hero-line{font-size:32px}.hero-intro{font-size:16px}.hero-coin{width:330px;height:360px}.hero-coin .hero-coin-main{width:65%;top:14%}.hero-coin .hero-coin-second{width:33%;top:42%}.world-panel{height:660px}.ornate-button{width:100%}}
@media(prefers-reduced-motion:reduce){.route-live,.water-live,.living-world:before,.hero-coin .hero-coin-main,.hero-coin .hero-coin-second{animation:none!important}}

/* Fixed scene layer, including iOS browsers where background-attachment is unreliable */
body{background:#020a12}body:before{content:"";position:fixed;z-index:-2;inset:0;background:url("./media/arcta-reference-world-stage-v1.webp") center top/cover no-repeat;pointer-events:none}
@media(max-width:760px){body{background-attachment:initial;background-position:initial}body:before{background-position:58% top}}

/* Screenshot-matched hero controls and typography */
.site-header{height:68px;padding:0 2.2%;grid-template-columns:1fr auto 1fr}.site-header .brand{font-size:25px;font-weight:400;letter-spacing:.055em;color:#d09a42}.site-header nav{gap:clamp(30px,4.1vw,66px)}.site-header nav a{font-family:var(--sans);font-size:14px;font-weight:400;color:#f0eee8}.language-control{justify-self:end;width:38px;height:38px;display:grid;place-items:center;border:1px solid #c28c3b;border-radius:50%;color:#ddb360;font-family:var(--sans);font-size:21px;text-decoration:none;background:rgba(2,15,25,.28);transition:.25s}.language-control:hover,.language-control:focus-visible{background:rgba(195,139,50,.14);box-shadow:0 0 18px rgba(220,169,71,.22)}
.hero{padding-top:205px;padding-left:4.7%}.hero-copy{max-width:590px}.hero h1{font-size:clamp(110px,8.2vw,145px);letter-spacing:.015em;background:linear-gradient(180deg,#edcf87 0,#c58c35 48%,#9c641e 78%,#e1b963 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 2px rgba(0,0,0,.65))}.hero-line{margin-top:18px;padding-bottom:10px;border-bottom:0;font-size:39px;font-weight:400;color:#f1e7d2;text-shadow:0 2px 4px rgba(0,0,0,.72)}.hero-line:after{display:none}.hero-intro{max-width:500px;margin-top:22px;font-size:17px;line-height:1.55;color:#eceae4}.actions{margin-top:24px}.ornate-button{min-height:61px;padding:14px 30px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.035em}.hero .ornate-button.gold{min-width:270px;background:linear-gradient(180deg,#9b641b 0,#77460d 56%,#8d5513 100%);border-color:#d7a54e;color:#f2dba7;box-shadow:inset 0 0 0 2px rgba(236,190,91,.22),inset 0 0 18px rgba(239,177,55,.15),0 4px 10px rgba(0,0,0,.32)}.hero .ornate-button.dark{min-width:285px;background:rgba(2,15,25,.57);border-color:#966a2d;color:#f1eee8}.status{margin-top:18px;font-size:12px;color:#deded8}.status span{width:7px;height:7px}.hero-coin{margin-top:-30px}
@media(max-width:760px){.site-header{height:64px;padding:0 14px;grid-template-columns:1fr auto}.site-header .brand{font-size:18px}.language-control{display:none}.hero{padding-top:55px}.hero h1{font-size:72px}.hero-line{font-size:31px}.hero-intro{font-size:16px}.hero .ornate-button.gold,.hero .ornate-button.dark{min-width:0}.site-header nav{gap:0}}
.language-control svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4}.hero h1{background:linear-gradient(180deg,#f0d58e 0,#d3a352 48%,#b77d2d 78%,#e5bd68 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 2px rgba(0,0,0,.58))}

/* Latest approved concept is the canonical hero reference */
body:before{background-image:url("./media/arcta-approved-concept-world-v1.webp");background-position:center top;background-size:cover}.living-world{background-image:none}.site-header{height:72px;padding:0 2.2%;border-bottom:1px solid rgba(185,131,46,.58)}.site-header .brand{font-family:var(--serif);font-size:25px}.site-header .brand-seal{display:grid}.site-header>.ornate-button{display:inline-flex}.hero{height:565px;padding:82px 8.1% 20px;grid-template-columns:53% 47%;align-items:center}.hero h1{font-size:clamp(115px,9vw,150px)}.hero-line{font-size:43px;margin-top:25px;padding-bottom:18px;border-bottom:1px solid var(--line)}.hero-line:after{display:block}.hero-intro{font-family:var(--serif);font-size:22px;line-height:1.5}.hero-coin{width:min(43vw,560px);height:560px;margin-top:0}.hero-coin .hero-coin-main{width:70%;left:14%;top:11%;animation:coin-main-subtle 7s ease-in-out infinite}.hero-coin .hero-coin-second{display:none}.coin-aura{left:12%;top:10%;width:74%;height:74%}.world-panel{height:383px;background:rgba(2,14,24,.64);backdrop-filter:blur(4px)}
@media(max-width:760px){body:before{background-position:55% top}.site-header>.ornate-button{display:none}.hero{height:920px;padding:48px 18px 18px;display:block}.hero h1{font-size:82px}.hero-line{font-size:35px}.hero-intro{font-size:18px}.hero-coin{width:340px;height:370px;margin:12px auto 0}.hero-coin .hero-coin-main{width:72%;left:14%;top:7%}.world-panel{height:680px}}
.hero{height:637px;padding-top:112px}.hero-coin .hero-coin-main{width:62%;left:18%;top:13%}.medallion svg{width:58%;height:58%;fill:none;stroke:var(--bright);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.hero{height:920px;padding-top:48px}.hero-coin .hero-coin-main{width:68%;left:16%;top:9%}}

/* Step 1: clean background and unified coin-stage object */
body:before{background-image:url("./media/arcta-clean-world-16x9-v1.webp");background-size:cover;background-position:center top}.hero-coin{animation:coin-stage-breathe 8s ease-in-out infinite}.hero-coin .hero-pedestal{display:block;z-index:2;width:100%;height:auto;left:0;top:auto;bottom:0;filter:drop-shadow(0 25px 22px rgba(0,0,0,.72))}.hero-coin .hero-coin-main{z-index:4;width:62%;left:19%;top:1%;animation:none}.coin-aura{z-index:3;left:15%;top:1%;width:70%;height:68%;opacity:.3}.stars,.cloud,.hero-sparks,.route-live,.water-live,.living-world:before{display:none!important}
@keyframes coin-stage-breathe{50%{transform:perspective(1000px) translateY(-3px);filter:brightness(1.018)}}
@media(max-width:760px){body:before{background-position:55% top}.hero-coin .hero-pedestal{width:100%;left:0}.hero-coin .hero-coin-main{width:62%;left:19%;top:2%}}
@media(prefers-reduced-motion:reduce){.hero-coin{animation:none!important}}
body:before{background-size:min(100vw,1920px) auto;background-position:center top;background-repeat:no-repeat;background-color:#020a12}
/* Owner-approved exact home composition.
   The supplied artwork is rendered at its native ratio without cover cropping or upscaling. */
.approved-home {
  display: none;
}

@media (min-width: 901px) {
  html,
  body {
    background: #010914;
  }

  body > .site-header,
  body > main,
  body > footer {
    display: none !important;
  }

  .approved-home {
    display: grid;
    justify-items: center;
    width: 100%;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 20%, #082039 0, #020b16 46%, #010711 100%);
  }

  .approved-plate {
    position: relative;
    width: 100%;
    margin: 0 auto;
    line-height: 0;
    isolation: isolate;
  }

  .approved-plate-wide {
    max-width: 1536px;
  }

  .approved-plate-tall {
    max-width: 941px;
  }

  .approved-plate > img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center top;
    image-rendering: auto;
  }

  .plate-links,
  .hotspot {
    position: absolute;
  }

  .plate-links {
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }

  .hotspot {
    display: block;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    pointer-events: auto;
    border-radius: 8px;
  }

  .hotspot:focus-visible {
    outline: 3px solid #72f6e1;
    outline-offset: 3px;
    box-shadow: 0 0 24px rgba(114, 246, 225, 0.8);
  }

  .nav-play { left: 24.4%; top: 1.5%; width: 5.2%; height: 5%; }
  .nav-game { left: 31.2%; top: 1.5%; width: 7.5%; height: 5%; }
  .nav-ecosystem { left: 40.3%; top: 1.5%; width: 8.6%; height: 5%; }
  .nav-collectors { left: 49.1%; top: 1.5%; width: 11.5%; height: 5%; }
  .nav-facts { left: 61.4%; top: 1.5%; width: 9.5%; height: 5%; }
  .nav-support { left: 72%; top: 1.5%; width: 7%; height: 5%; }
  .nav-play-now { left: 82.4%; top: 1%; width: 12%; height: 5.2%; }
  .hero-play { left: 8.2%; top: 49.2%; width: 15.5%; height: 6.1%; }
  .hero-explore { left: 24.6%; top: 49.2%; width: 20.2%; height: 6.1%; }
  .path-knowledge { left: 8.53%; top: 76.4%; width: 6.4%; height: 9.6%; }
  .path-bridge { left: 31.25%; top: 76.4%; width: 6.4%; height: 9.6%; }
  .path-garden { left: 56.7%; top: 76.4%; width: 6.4%; height: 9.6%; }
  .path-workshop { left: 81.9%; top: 76.4%; width: 6.4%; height: 9.6%; }

  .collector-designs { left: 24%; top: 53.8%; width: 24%; height: 6.2%; }
  .media-pack { left: 49.4%; top: 53.8%; width: 23%; height: 6.2%; }

  .ecosystem-play { left: 37.5%; top: 37.1%; width: 24%; height: 4.2%; }
  .roadmap { left: 38%; top: 41%; width: 24%; height: 3.1%; }
  .faq-one { left: 31%; top: 58.6%; width: 63%; height: 3.5%; }
  .faq-two { left: 31%; top: 62.2%; width: 63%; height: 3.5%; }
  .faq-three { left: 31%; top: 65.8%; width: 63%; height: 3.5%; }
  .faq-four { left: 31%; top: 69.4%; width: 63%; height: 3.5%; }
  .faq-five { left: 31%; top: 73%; width: 63%; height: 3.5%; }
  .footer-play { left: 31.4%; top: 86.7%; width: 13%; height: 3.3%; }
  .footer-explore { left: 31.4%; top: 90.1%; width: 13%; height: 3.3%; }
  .footer-roadmap { left: 31.4%; top: 93.5%; width: 13%; height: 3.3%; }
  .footer-status { left: 46%; top: 86.7%; width: 17%; height: 3.3%; }
  .footer-responsible { left: 46%; top: 90.1%; width: 17%; height: 3.3%; }
  .footer-editions { left: 46%; top: 93.5%; width: 17%; height: 3.3%; }
  .footer-privacy { left: 64%; top: 86.7%; width: 14%; height: 3.3%; }
  .footer-terms { left: 64%; top: 90.1%; width: 14%; height: 3.3%; }
  .footer-guidelines { left: 64%; top: 93.5%; width: 14%; height: 3.3%; }
  .footer-help { left: 79%; top: 86.7%; width: 16%; height: 3.3%; }
  .footer-contact { left: 79%; top: 90.1%; width: 16%; height: 3.3%; }
  .footer-report { left: 79%; top: 93.5%; width: 16%; height: 3.3%; }

  /* Localized cinematic motion. The approved plate itself never moves. */
  .plate-life {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    contain: paint;
  }

  .plate-life i,
  .plate-life svg {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .living-cloud {
    opacity: 0;
    filter: blur(13px);
    mix-blend-mode: screen;
    background:
      radial-gradient(ellipse at 28% 54%, rgba(190, 210, 229, 0.19), transparent 43%),
      radial-gradient(ellipse at 68% 43%, rgba(145, 174, 204, 0.14), transparent 47%);
    will-change: transform, opacity;
  }

  .cloud-near { left: 4%; top: 8%; width: 58%; height: 25%; }
  .cloud-far { right: 2%; top: 7%; width: 48%; height: 22%; transform: scaleX(-1); }

  .living-water {
    left: 41%;
    top: 22%;
    width: 23%;
    height: 39%;
    opacity: 0;
    clip-path: polygon(38% 0, 66% 0, 82% 100%, 13% 100%);
    background:
      repeating-linear-gradient(174deg, transparent 0 9%, rgba(167, 218, 244, 0.18) 11%, transparent 15%),
      linear-gradient(90deg, transparent, rgba(121, 200, 238, 0.15), transparent);
    background-size: 100% 140%, 180% 100%;
    mix-blend-mode: screen;
    filter: blur(2px);
    will-change: background-position, opacity;
  }

  .living-road {
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(2px) drop-shadow(0 0 7px rgba(255, 187, 58, 0.72));
    will-change: opacity, filter;
  }

  .living-road path {
    fill: none;
    stroke: rgba(255, 194, 73, 0.42);
    stroke-width: 5;
    stroke-linecap: round;
  }

  .coin-sheen {
    left: 60.2%;
    top: 16.7%;
    width: 26.8%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    overflow: hidden;
    background: linear-gradient(112deg, transparent 41%, rgba(255, 241, 168, 0.08) 47%, rgba(255, 255, 235, 0.2) 50%, rgba(255, 218, 113, 0.06) 54%, transparent 60%);
    background-size: 260% 100%;
    background-position: 130% 0;
    mix-blend-mode: screen;
    filter: blur(2px);
    will-change: background-position, opacity;
  }

  .pedestal-reflection {
    left: 55%;
    top: 51%;
    width: 36%;
    height: 9%;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(ellipse, rgba(246, 194, 77, 0.28), rgba(203, 128, 23, 0.08) 44%, transparent 72%);
    mix-blend-mode: screen;
    filter: blur(7px);
    will-change: opacity, filter;
  }

  .collector-reflection {
    left: 2%;
    right: 2%;
    top: 43%;
    height: 18%;
    opacity: 0;
    background: linear-gradient(102deg, transparent 4%, rgba(223, 173, 80, 0.08) 22%, rgba(235, 231, 219, 0.1) 38%, rgba(245, 188, 68, 0.11) 55%, rgba(202, 213, 224, 0.08) 72%, rgba(205, 50, 46, 0.07) 92%, transparent);
    mix-blend-mode: screen;
    filter: blur(8px);
    will-change: opacity, transform;
  }

  .collector-glint {
    top: 18%;
    width: 12%;
    height: 28%;
    opacity: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 248, 220, 0.4) 50%, transparent 67%);
    mix-blend-mode: screen;
    filter: blur(4px);
    will-change: transform, opacity;
  }

  .glint-one { left: 8%; }
  .glint-two { left: 55%; }

  .frame-breathe {
    inset: 1.7% 1.1% 2.6%;
    opacity: 0;
    border: 1px solid rgba(235, 178, 69, 0.48);
    box-shadow: inset 0 0 18px rgba(227, 171, 65, 0.13), 0 0 12px rgba(227, 171, 65, 0.08);
    will-change: opacity, box-shadow;
  }

  .cloud-tall { left: 3%; top: 2%; width: 90%; height: 16%; }
  .water-tall {
    left: 32%;
    top: 10%;
    width: 38%;
    height: 26%;
    clip-path: polygon(31% 0, 67% 0, 87% 100%, 8% 100%);
  }
  .tall-road path { stroke-width: 4; }

  .status-breathe {
    left: 18%;
    top: 45%;
    width: 75%;
    height: 34%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(32, 111, 150, 0.11), transparent 71%);
    mix-blend-mode: screen;
    will-change: opacity;
  }

  .approved-plate.is-live .cloud-near { animation: approved-cloud-left 18s ease-in-out infinite alternate; }
  .approved-plate.is-live .cloud-far,
  .approved-plate.is-live .cloud-tall { animation: approved-cloud-right 23s ease-in-out infinite alternate; }
  .approved-plate.is-live .living-water { animation: approved-water 5.8s ease-in-out infinite; }
  .approved-plate.is-live .living-road { animation: approved-road-breathe 3.8s ease-in-out infinite; }
  .approved-plate.is-live .coin-sheen { animation: approved-coin-sheen 6.8s ease-in-out infinite; }
  .approved-plate.is-live .pedestal-reflection { animation: approved-pedestal 4.6s ease-in-out infinite; }
  .approved-plate.is-live .collector-reflection { animation: approved-reflection 7s ease-in-out infinite; }
  .approved-plate.is-live .glint-one { animation: approved-glint 8s ease-in-out infinite; }
  .approved-plate.is-live .glint-two { animation: approved-glint 8s 3.7s ease-in-out infinite; }
  .approved-plate.is-live .frame-breathe { animation: approved-frame 5.5s ease-in-out infinite; }
  .approved-plate.is-live .status-breathe { animation: approved-status 5.4s ease-in-out infinite; }

  .hotspot::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(105deg, transparent 25%, rgba(255, 240, 188, 0.4) 49%, transparent 70%);
    transform: translateX(-125%);
    mix-blend-mode: screen;
    transition: opacity 180ms ease;
  }

  .hotspot:hover::after,
  .hotspot:focus-visible::after {
    opacity: 1;
    animation: approved-button-sheen 780ms ease-out both;
  }

  @keyframes approved-cloud-left {
    from { opacity: 0.08; transform: translate3d(-1.5%, 0, 0) scale(1); }
    to { opacity: 0.24; transform: translate3d(4%, 1%, 0) scale(1.035); }
  }
  @keyframes approved-cloud-right {
    from { opacity: 0.07; transform: translate3d(2%, 0, 0) scaleX(-1); }
    to { opacity: 0.21; transform: translate3d(-3%, 1%, 0) scaleX(-1.03); }
  }
  @keyframes approved-water {
    0%, 100% { opacity: 0.12; background-position: 0 0, 100% 0; }
    50% { opacity: 0.34; background-position: 0 36%, 0 0; }
  }
  @keyframes approved-road-breathe {
    0%, 100% { opacity: 0.16; filter: blur(2.5px) drop-shadow(0 0 4px rgba(255, 187, 58, 0.42)); }
    50% { opacity: 0.58; filter: blur(1.3px) drop-shadow(0 0 11px rgba(255, 198, 77, 0.9)); }
  }
  @keyframes approved-coin-sheen {
    0%, 22% { opacity: 0; background-position: 130% 0; }
    35%, 58% { opacity: 0.28; }
    72%, 100% { opacity: 0; background-position: -80% 0; }
  }
  @keyframes approved-pedestal {
    0%, 100% { opacity: 0.12; filter: blur(9px); }
    50% { opacity: 0.52; filter: blur(5px); }
  }
  @keyframes approved-reflection {
    0%, 100% { opacity: 0.08; transform: translate3d(-1%, 0, 0); }
    50% { opacity: 0.35; transform: translate3d(1%, 0, 0); }
  }
  @keyframes approved-glint {
    0%, 25%, 100% { opacity: 0; transform: translateX(-32%) skewX(-8deg); }
    42% { opacity: 0.42; }
    62% { opacity: 0; transform: translateX(80%) skewX(-8deg); }
  }
  @keyframes approved-frame {
    0%, 100% { opacity: 0.18; box-shadow: inset 0 0 12px rgba(227, 171, 65, 0.08), 0 0 7px rgba(227, 171, 65, 0.05); }
    50% { opacity: 0.56; box-shadow: inset 0 0 24px rgba(227, 171, 65, 0.18), 0 0 15px rgba(227, 171, 65, 0.12); }
  }
  @keyframes approved-status {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.3; }
  }
  @keyframes approved-button-sheen {
    from { transform: translateX(-125%); }
    to { transform: translateX(125%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .approved-plate.is-live .plate-life * {
    animation: none !important;
  }

  .approved-plate .plate-life {
    display: none;
  }
}

/* ARCTA living interaction system, calibrated to the approved plate artwork. */
@media (min-width: 901px) {
  .approved-home .hotspot {
    transform: translateZ(0);
    transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
  }

  .approved-home .hotspot::before {
    content: "";
    position: absolute;
    inset: -40% -30%;
    opacity: 0;
    background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, 0.28), rgba(226, 189, 101, 0.18), transparent 66%);
    transform: translateX(-120%);
    transition: transform 560ms ease, opacity 220ms ease;
    pointer-events: none;
  }

  .approved-home .hotspot::after {
    display: none;
  }

  .approved-home .hotspot:hover,
  .approved-home .hotspot:focus-visible {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.05), rgba(226, 189, 101, 0.1)), rgba(255, 255, 255, 0.03);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 -1px 0 rgba(226, 189, 101, 0.24),
      0 0 28px rgba(226, 189, 101, 0.24),
      0 10px 34px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px) scale(1.008);
  }

  .approved-home .hotspot:hover::before,
  .approved-home .hotspot:focus-visible::before {
    opacity: 1;
    transform: translateX(120%);
  }

  .approved-home .nav-play-now:hover,
  .approved-home .hero-play:hover,
  .approved-home .hero-explore:hover,
  .approved-home .collector-designs:hover,
  .approved-home .media-pack:hover,
  .approved-home .ecosystem-play:hover,
  .approved-home .roadmap:hover {
    animation: arcta-button-alive 620ms cubic-bezier(0.2, 1.7, 0.35, 1) both;
  }

  .approved-home .path-knowledge,
  .approved-home .path-bridge,
  .approved-home .path-garden,
  .approved-home .path-workshop {
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
  }

  .approved-home .nav-play,
  .approved-home .nav-game,
  .approved-home .nav-ecosystem,
  .approved-home .nav-collectors,
  .approved-home .nav-facts,
  .approved-home .nav-support {
    border-radius: 5px;
  }

  @keyframes arcta-button-alive {
    0% { transform: translateY(0) scale(1); }
    22% { transform: translateY(-3px) translateX(2px) scale(1.012, 0.992); }
    42% { transform: translateY(1px) translateX(-2px) scale(0.996, 1.01); }
    62% { transform: translateY(-2px) translateX(1px) scale(1.008, 0.997); }
    82% { transform: translateY(0) translateX(-1px) scale(1.002); }
    100% { transform: translateY(-2px) translateX(0) scale(1.008); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .approved-home .hotspot,
  .approved-home .hotspot::before { animation: none !important; transition: none !important; }
}

/* Shape-matched hover motion for artwork objects that are embedded in the approved plates. */
@media (min-width: 901px) {
  .motion-zones {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .motion-zone {
    position: absolute;
    display: block;
    pointer-events: auto;
    opacity: 0.16;
    background:
      radial-gradient(circle at 38% 28%, rgba(255, 249, 221, 0.44), transparent 18%),
      radial-gradient(circle at 50% 54%, transparent 45%, rgba(226, 189, 101, 0.24) 70%, transparent 78%);
    box-shadow: inset 0 0 0 1px rgba(255, 231, 167, 0.12);
    mix-blend-mode: screen;
    transform: translateZ(0) scale(1);
    transition: opacity 220ms ease, filter 220ms ease, transform 260ms cubic-bezier(0.2, 1.6, 0.35, 1), box-shadow 220ms ease;
    animation: arcta-object-breathe 5.2s ease-in-out infinite;
  }

  .motion-zone::after {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(255, 224, 143, 0.28);
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 220ms ease, transform 320ms cubic-bezier(0.2, 1.55, 0.35, 1);
  }

  .motion-zone:hover {
    opacity: 0.78;
    filter: brightness(1.35) saturate(1.12);
    transform: translateY(-3px) scale(1.035);
    box-shadow:
      inset 0 0 0 1px rgba(255, 239, 194, 0.42),
      0 0 18px rgba(226, 189, 101, 0.36),
      0 12px 28px rgba(0, 0, 0, 0.2);
    animation: none;
  }

  .motion-zone:hover::after {
    opacity: 0.9;
    transform: scale(1);
  }

  .hero-coin-zone {
    left: 57.3%;
    top: 17.4%;
    width: 27.4%;
    height: 36.8%;
    border-radius: 50%;
    clip-path: ellipse(48% 49% at 50% 50%);
  }

  .brand-seal-zone {
    left: 1.9%;
    top: 0.4%;
    width: 4.5%;
    height: 6.6%;
    border-radius: 50%;
    clip-path: circle(49% at 50% 50%);
    animation-delay: -1.8s;
  }

  .collector-zone {
    top: 17.8%;
    width: 14.2%;
    height: 29.8%;
    border-radius: 50%;
    clip-path: ellipse(48% 49% at 50% 50%);
  }
  .collector-one { left: 3.5%; animation-delay: -0.4s; }
  .collector-two { left: 19.1%; animation-delay: -1.1s; }
  .collector-three { left: 34.9%; animation-delay: -1.8s; }
  .collector-four { left: 50.7%; animation-delay: -2.5s; }
  .collector-five { left: 66.4%; animation-delay: -3.2s; }
  .collector-six { left: 82.1%; animation-delay: -3.9s; }

  .principle-zone {
    top: 69.6%;
    width: 11.3%;
    height: 17.2%;
    border-radius: 50%;
    clip-path: circle(49% at 50% 50%);
  }
  .principle-one { left: 4.8%; animation-delay: -0.7s; }
  .principle-two { left: 28.7%; animation-delay: -1.6s; }
  .principle-three { left: 53%; animation-delay: -2.5s; }
  .principle-four { left: 77.4%; animation-delay: -3.4s; }

  .milestone-zone {
    top: 22.7%;
    width: 13.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    clip-path: circle(49% at 50% 50%);
  }
  .milestone-one { left: 5.2%; animation-delay: -0.6s; }
  .milestone-two { left: 43.2%; animation-delay: -2s; }
  .milestone-three { left: 80.7%; animation-delay: -3.4s; }

  .status-seal-zone {
    left: 5.9%;
    top: 55.2%;
    width: 12.4%;
    aspect-ratio: 1;
    border-radius: 50%;
    clip-path: circle(49% at 50% 50%);
    animation-delay: -2.7s;
  }

  .approved-home .nav-play:hover,
  .approved-home .nav-game:hover,
  .approved-home .nav-ecosystem:hover,
  .approved-home .nav-collectors:hover,
  .approved-home .nav-facts:hover,
  .approved-home .nav-support:hover {
    background: linear-gradient(180deg, transparent 70%, rgba(226, 189, 101, 0.3));
    box-shadow: 0 5px 12px -8px rgba(255, 222, 139, 0.9);
    transform: translateY(-2px) scale(1.03);
  }

  @keyframes arcta-object-breathe {
    0%, 100% { opacity: 0.12; filter: brightness(0.96); }
    50% { opacity: 0.27; filter: brightness(1.15); }
  }
}

@media (max-width: 900px) {
  .motion-zones { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-zones { display: none !important; }
}

/* Motion language adapted from the public TCA interaction system.
   Effects stay on the pictured control or object, never on a glass hitbox. */
:root {
  --motion-fast: 160ms;
  --motion-ui: 220ms;
  --motion-reveal: 720ms;
  --motion-stagger: 55ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-spring: cubic-bezier(0.2, 1.55, 0.35, 1);
}

@media (min-width: 901px) {
  .motion-ready .motion-stage {
    opacity: 0.001;
    transform: translateY(18px);
    transition:
      opacity 550ms ease,
      transform var(--motion-reveal) var(--motion-ease);
  }

  .motion-ready .motion-stage.motion-entered {
    opacity: 1;
    transform: none;
  }

  .approved-home .hotspot {
    background: transparent !important;
    box-shadow: none !important;
    filter: none;
    transition:
      transform var(--motion-ui) var(--motion-spring),
      filter var(--motion-ui) ease;
  }

  .approved-home .hotspot::before {
    inset: -28% -34%;
    opacity: 0;
    background: linear-gradient(
      108deg,
      transparent 35%,
      rgba(255, 246, 207, 0.08) 44%,
      rgba(255, 245, 201, 0.78) 50%,
      rgba(208, 147, 48, 0.16) 56%,
      transparent 65%
    );
    mix-blend-mode: screen;
    transform: translateX(-125%);
    transition: transform 560ms ease, opacity var(--motion-fast) ease;
  }

  .approved-home .hotspot:hover,
  .approved-home .hotspot:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-2px) scale(1.008);
    filter: brightness(1.12) saturate(1.04) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.24));
  }

  .approved-home .hotspot:hover::before,
  .approved-home .hotspot:focus-visible::before {
    opacity: 1;
    transform: translateX(125%);
  }

  .approved-home .hotspot.is-pressed,
  .approved-home .hotspot:active {
    transform: translateY(1px) scale(0.982);
    transition-duration: 90ms;
  }

  .approved-home .nav-play,
  .approved-home .nav-game,
  .approved-home .nav-ecosystem,
  .approved-home .nav-collectors,
  .approved-home .nav-facts,
  .approved-home .nav-support {
    overflow: visible;
  }

  .approved-home .nav-play::before,
  .approved-home .nav-game::before,
  .approved-home .nav-ecosystem::before,
  .approved-home .nav-collectors::before,
  .approved-home .nav-facts::before,
  .approved-home .nav-support::before {
    inset: auto 8% 2px;
    height: 1px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, #e2bd65 18%, #f7dd9a 50%, #e2bd65 82%, transparent);
    transform: scaleX(0.25);
    transform-origin: center;
    transition: opacity var(--motion-fast) ease, transform var(--motion-ui) var(--motion-ease);
  }

  .approved-home .nav-play:hover::before,
  .approved-home .nav-game:hover::before,
  .approved-home .nav-ecosystem:hover::before,
  .approved-home .nav-collectors:hover::before,
  .approved-home .nav-facts:hover::before,
  .approved-home .nav-support:hover::before,
  .approved-home .nav-play:focus-visible::before,
  .approved-home .nav-game:focus-visible::before,
  .approved-home .nav-ecosystem:focus-visible::before,
  .approved-home .nav-collectors:focus-visible::before,
  .approved-home .nav-facts:focus-visible::before,
  .approved-home .nav-support:focus-visible::before {
    opacity: 1;
    transform: scaleX(1);
  }

  .motion-zone {
    opacity: 0.035;
    background:
      radial-gradient(circle at 36% 25%, rgba(255, 250, 224, 0.5), transparent 13%),
      radial-gradient(circle at 50% 55%, transparent 58%, rgba(230, 181, 76, 0.18) 72%, transparent 79%);
    border: 0;
    box-shadow: none;
    animation: arcta-object-presence 6.4s ease-in-out infinite;
    animation-delay: calc(var(--motion-index) * -310ms);
    transition:
      opacity var(--motion-ui) ease,
      filter var(--motion-ui) ease,
      transform 360ms var(--motion-spring);
  }

  .motion-zone::after {
    display: none;
  }

  .motion-zone:hover {
    opacity: 0.42;
    background:
      radial-gradient(circle at 34% 23%, rgba(255, 253, 235, 0.88), transparent 12%),
      radial-gradient(circle at 50% 55%, transparent 61%, rgba(236, 191, 88, 0.24) 72%, transparent 79%);
    box-shadow: none;
    filter: brightness(1.16) saturate(1.05) drop-shadow(0 9px 12px rgba(0, 0, 0, 0.24));
    transform: translateY(-3px) scale(1.025);
    animation: arcta-object-touch 420ms var(--motion-ease) both;
  }

  .motion-stage.motion-entered .motion-zone {
    transition-delay: calc(var(--motion-index) * var(--motion-stagger));
  }

  @keyframes arcta-object-presence {
    0%, 100% { opacity: 0.025; filter: brightness(0.98); }
    50% { opacity: 0.115; filter: brightness(1.08); }
  }

  @keyframes arcta-object-touch {
    0% { transform: translateY(0) scale(1); }
    34% { transform: translateY(-4px) scale(1.032, 0.988); }
    64% { transform: translateY(-1px) scale(0.996, 1.018); }
    100% { transform: translateY(-3px) scale(1.025); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-stage,
  .approved-home .hotspot,
  .approved-home .hotspot::before,
  .motion-zone {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none !important;
  }
}

/* Educational continuation beneath the approved artwork. */
.audience-guide {
  position: relative;
  z-index: 1;
  color: #f4e8ca;
  background:
    radial-gradient(circle at 50% 0, rgba(16, 59, 82, 0.34), transparent 31rem),
    linear-gradient(180deg, #010914, #02101b 48%, #010914);
  border-top: 1px solid rgba(205, 151, 58, 0.5);
  overflow: hidden;
}

.audience-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(199, 145, 53, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 145, 53, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, black, transparent 72%);
}

.guide-shell {
  position: relative;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(72px, 8vw, 124px) 0 90px;
}

.guide-intro,
.responsible-boundary {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid rgba(208, 153, 57, 0.7);
  background: linear-gradient(135deg, rgba(5, 28, 44, 0.96), rgba(1, 13, 23, 0.9));
  box-shadow: inset 0 0 0 3px rgba(208, 153, 57, 0.08), 0 24px 70px rgba(0, 0, 0, 0.24);
}

.guide-intro {
  grid-template-columns: 104px minmax(0, 1fr);
}

.guide-mark {
  display: grid;
  place-items: center;
  width: 92px;
  aspect-ratio: 1;
  margin: 0;
  border: 2px solid #d4a64d;
  border-radius: 50%;
  color: #e6c26f;
  font-family: var(--serif);
  font-size: 58px;
  line-height: 1;
  box-shadow: inset 0 0 22px rgba(40, 168, 179, 0.18), 0 0 22px rgba(205, 155, 61, 0.14);
}

.guide-label,
.guide-heading > p,
.guide-number {
  margin: 0 0 10px;
  color: #d7ae5b;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.guide-intro h2,
.guide-heading h2,
.responsible-boundary h2 {
  margin: 0;
  color: #f7ead0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.guide-intro h2 {
  max-width: 900px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
}

.guide-intro div > p:last-child,
.responsible-boundary div > p {
  max-width: 930px;
  margin: 20px 0 0;
  color: #b9c8d2;
  font-family: var(--sans);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.72;
}

.guide-paths {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 54px 0 112px;
  border-top: 1px solid rgba(202, 148, 54, 0.54);
  border-bottom: 1px solid rgba(202, 148, 54, 0.54);
}

.guide-path {
  min-height: 330px;
  padding: 38px 30px 34px;
  border-right: 1px solid rgba(202, 148, 54, 0.32);
  transition: transform var(--motion-ui) var(--motion-ease), background var(--motion-ui) ease;
}

.guide-path:last-child { border-right: 0; }
.guide-path:hover { transform: translateY(-4px); background: rgba(17, 61, 74, 0.2); }
.guide-path h3 { margin: 48px 0 18px; color: #f6e7c5; font: 500 31px/1.1 var(--serif); }
.guide-path p { min-height: 116px; margin: 0; color: #aebfca; font: 15px/1.65 var(--sans); }
.guide-path a,
.door-list a,
.guide-button,
.boundary-actions a {
  color: #e5bc68;
  text-decoration: none;
}

.guide-path a {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  font: 700 13px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-path a span,
.guide-button span { transition: transform var(--motion-ui) var(--motion-ease); }
.guide-path a:hover span,
.guide-path a:focus-visible span,
.guide-button:hover span,
.guide-button:focus-visible span { transform: translateX(5px); }

.mindset-section,
.ecosystem-doors,
.book-section { margin: 0 0 118px; }

.platform-access { margin: 0 0 118px; }
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.platform-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 142px;
  padding: 26px 28px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(205, 151, 58, 0.58);
  background: linear-gradient(145deg, rgba(7, 42, 56, 0.92), rgba(2, 17, 29, 0.97));
  box-shadow: inset 0 1px rgba(255, 230, 164, 0.09), 0 18px 48px rgba(0, 0, 0, 0.2);
}
.platform-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 15%, rgba(241, 194, 99, 0.1) 48%, transparent 70%);
  opacity: 0;
  transform: translateX(-35%);
  transition: opacity var(--motion-ui) ease, transform 600ms var(--motion-ease);
}
.platform-card.is-ready {
  transition: transform 360ms var(--motion-spring), border-color var(--motion-ui) ease, box-shadow var(--motion-ui) ease;
}
.platform-card.is-ready:hover,
.platform-card.is-ready:focus-visible {
  transform: translateY(-5px);
  border-color: #e3ba61;
  box-shadow: inset 0 1px rgba(255, 230, 164, 0.14), 0 22px 54px rgba(0, 0, 0, 0.3), 0 0 26px rgba(203, 151, 54, 0.1);
}
.platform-card.is-ready:hover::before,
.platform-card.is-ready:focus-visible::before { opacity: 1; transform: translateX(35%); }
.platform-card.is-pending { opacity: 0.72; border-color: rgba(159, 151, 127, 0.35); }
.platform-icon {
  display: grid;
  place-items: center;
  width: 72px;
  aspect-ratio: 1;
  border: 1px solid #d6a74c;
  border-radius: 50%;
  color: #f2ca77;
  background: radial-gradient(circle at 35% 30%, #145f68, #062434 68%);
  font: 36px/1 var(--serif);
  box-shadow: inset 0 0 0 5px rgba(3, 15, 25, 0.55), 0 0 22px rgba(44, 187, 180, 0.13);
}
.platform-windows { font-family: var(--sans); }
.platform-copy { display: flex; min-width: 0; flex-direction: column; }
.platform-copy small {
  color: #d4a750;
  font: 700 10px/1.2 var(--sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.platform-copy strong { margin: 7px 0; color: #f6e6c3; font: 500 27px/1.08 var(--serif); }
.platform-copy em { color: #aebfca; font: normal 13px/1.45 var(--sans); }
.platform-card > b {
  color: #e3bd6b;
  font: 700 11px/1.25 var(--sans);
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}
.platform-card > b span { display: inline-block; margin-left: 5px; font-size: 22px; transition: transform var(--motion-ui) var(--motion-ease); }
.platform-card.is-ready:hover > b span,
.platform-card.is-ready:focus-visible > b span { transform: translateX(5px); }
.platform-note { max-width: 820px; margin: 20px auto 0; color: #8fa5b1; font: 12px/1.55 var(--sans); text-align: center; }

.guide-heading { max-width: 850px; margin: 0 auto 54px; text-align: center; }
.guide-heading h2 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.08; }
.guide-heading::after {
  content: "◇";
  display: block;
  width: 260px;
  margin: 24px auto 0;
  color: #c7943b;
  background: linear-gradient(90deg, transparent, rgba(207, 156, 63, 0.7), transparent) center/100% 1px no-repeat;
  font-size: 18px;
}

.mindset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(205, 151, 58, 0.55);
}

.mindset-grid article { min-height: 300px; padding: 42px 30px; text-align: center; border-right: 1px solid rgba(205, 151, 58, 0.3); }
.mindset-grid article:last-child { border-right: 0; }
.mindset-grid article > span {
  display: grid;
  place-items: center;
  width: 88px;
  aspect-ratio: 1;
  margin: 0 auto 24px;
  border: 1px solid #c9963e;
  border-radius: 50%;
  color: #e4bd68;
  font: 38px/1 var(--serif);
  transition: transform 360ms var(--motion-spring), filter var(--motion-ui) ease;
}
.mindset-grid article:hover > span { transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 0 12px rgba(222, 171, 72, 0.42)); }
.mindset-grid h3 { margin: 0 0 14px; color: #f5e5c2; font: 500 28px/1.1 var(--serif); }
.mindset-grid p { margin: 0; color: #aebfca; font: 15px/1.65 var(--sans); }

.door-list { border-top: 1px solid rgba(205, 151, 58, 0.45); }
.door-list a {
  display: grid;
  grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.5fr) 32px;
  gap: 28px;
  align-items: center;
  padding: 25px 10px;
  border-bottom: 1px solid rgba(205, 151, 58, 0.32);
  transition: padding var(--motion-ui) var(--motion-ease), background var(--motion-ui) ease;
}
.door-list a:hover,
.door-list a:focus-visible { padding-inline: 22px; background: linear-gradient(90deg, rgba(14, 64, 78, 0.2), transparent); }
.door-list strong { color: #f2dfb8; font: 500 24px/1.15 var(--serif); }
.door-list span { color: #aebfca; font: 15px/1.55 var(--sans); }
.door-list b { color: #e2b65c; font: 400 32px/1 var(--serif); transition: transform var(--motion-ui) ease; }
.door-list a:hover b,
.door-list a:focus-visible b { transform: translateX(6px); }

.book-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.book-rail a {
  position: relative;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 28px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(205, 151, 58, 0.55);
  background: linear-gradient(160deg, rgba(8, 42, 57, 0.92), rgba(2, 15, 26, 0.98));
  transition: transform 360ms var(--motion-spring), border-color var(--motion-ui) ease, box-shadow var(--motion-ui) ease;
}
.book-rail a::before {
  content: "A";
  position: absolute;
  top: 22px;
  right: 24px;
  color: rgba(216, 170, 79, 0.12);
  font: 116px/1 var(--serif);
  transition: transform 500ms var(--motion-ease), color var(--motion-ui) ease;
}
.book-rail a:hover,
.book-rail a:focus-visible { transform: translateY(-6px); border-color: #e0b85f; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28); }
.book-rail a:hover::before,
.book-rail a:focus-visible::before { transform: rotate(-4deg) scale(1.05); color: rgba(216, 170, 79, 0.22); }
.book-rail span { position: relative; color: #d9aa50; font: 700 11px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.book-rail strong { position: relative; margin: 14px 0 12px; color: #f5e4bf; font: 500 27px/1.12 var(--serif); }
.book-rail em { position: relative; color: #aebfca; font: normal 14px/1.5 var(--sans); }

.guide-button {
  display: flex;
  width: fit-content;
  min-width: 280px;
  justify-content: center;
  gap: 18px;
  margin: 34px auto 0;
  padding: 18px 28px;
  border: 1px solid #d8aa50;
  background: linear-gradient(180deg, #d8ae5b, #a56c1f);
  color: #130d05;
  font: 700 14px/1 var(--serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 245, 203, 0.68);
  transition: transform var(--motion-ui) var(--motion-spring), filter var(--motion-ui) ease;
}
.guide-button:hover,
.guide-button:focus-visible { transform: translateY(-3px) scale(1.01); filter: brightness(1.1); }

.responsible-boundary { margin-top: 20px; }
.responsible-boundary h2 { font-size: clamp(32px, 3vw, 46px); }
.boundary-actions { display: flex; flex-direction: column; gap: 12px; }
.boundary-actions a {
  min-width: 170px;
  padding: 14px 18px;
  text-align: center;
  border: 1px solid rgba(216, 170, 80, 0.7);
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background var(--motion-ui) ease, transform var(--motion-ui) var(--motion-spring);
}
.boundary-actions a:hover,
.boundary-actions a:focus-visible { background: rgba(216, 170, 80, 0.12); transform: translateY(-2px); }

.audience-guide a:focus-visible {
  outline: 3px solid #72f6e1;
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .guide-paths,
  .mindset-grid,
  .book-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-path:nth-child(2) { border-right: 0; }
  .guide-path:nth-child(-n + 2) { border-bottom: 1px solid rgba(202, 148, 54, 0.32); }
  .mindset-grid article:nth-child(2) { border-right: 0; }
  .mindset-grid article:nth-child(-n + 2) { border-bottom: 1px solid rgba(205, 151, 58, 0.3); }
}

@media (max-width: 680px) {
  .guide-shell { width: min(100% - 28px, 560px); padding: 52px 0 64px; }
  .guide-intro,
  .responsible-boundary { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; }
  .guide-mark { width: 70px; font-size: 43px; }
  .guide-paths,
  .mindset-grid,
  .book-rail,
  .platform-grid { grid-template-columns: 1fr; }
  .platform-card { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; min-height: 126px; padding: 22px 20px; }
  .platform-icon { width: 62px; font-size: 30px; }
  .platform-copy strong { font-size: 23px; }
  .platform-card > b { grid-column: 2; text-align: left; }
  .guide-path { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(202, 148, 54, 0.32); }
  .guide-path:last-child { border-bottom: 0; }
  .guide-path h3 { margin-top: 28px; }
  .guide-path p { min-height: 0; }
  .mindset-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(205, 151, 58, 0.3); }
  .mindset-grid article:last-child { border-bottom: 0; }
  .door-list a { grid-template-columns: 1fr 30px; gap: 10px 16px; }
  .door-list a span { grid-column: 1; }
  .door-list a b { grid-column: 2; grid-row: 1 / span 2; }
  .book-rail a { min-height: 250px; }
  .guide-button { width: 100%; min-width: 0; }
  .boundary-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .audience-guide *,
  .audience-guide *::before,
  .audience-guide *::after { animation: none !important; transition: none !important; }
}