@font-face {
  font-family: Gym;
  src: url(/assets/motion-home/font-fa.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Gym;
  src: url(/assets/motion-home/font-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF;
}
:root {
  overflow-x: clip;
  --bg: #080d0b;
  --card: #11161a;
  --ink: #f3f7f3;
  --muted: #a1aab0;
  --line: #ffffff18;
  --green: #54aced;
  --soft: #131f28;
  --head: #ffffff;
  --nav: #0b0f12db;
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
:root[data-theme="light"] {
  --bg: #eff3f5;
  --card: #ffffff;
  --ink: #101c25;
  --muted: #4c5b66;
  --line: #10263520;
  --green: #124975;
  --soft: #dae6ed;
  --head: #101c25;
  --nav: #eff3f5ee;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Gym, sans-serif;
  line-height: 1.9;
  overflow-x: hidden;
}
button,
input,
a,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
button {
  color: inherit;
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px;
}
button {
  border: 0;
  background: none;
}
header {
  position: fixed;
  top: 28px;
  right: 4vw;
  left: 4vw;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: var(--nav);
  border-radius: 22px;
  padding: 15px 24px;
  z-index: 20;
  backdrop-filter: blur(20px);
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
}
.brand small {
  font-size: 8px;
  display: block;
  margin-top: 5px;
  letter-spacing: 1px;
  font-weight: 500;
}
.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--green);
  border-radius: 12px;
  font: 900 28px sans-serif;
  color: var(--green);
}
.brand-icon span {
  position: absolute;
  top: -6px;
  right: 0;
  font: 18px sans-serif;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
nav {
  display: flex;
  gap: 23px;
  font-size: 11px;
  color: var(--muted);
}
nav a:hover {
  color: var(--green);
}
#theme {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 22px;
}
.login {
  font-size: 11px;
  white-space: nowrap;
}
#menu {
  display: none;
}
.skip {
  position: fixed;
  top: -80px;
}
.skip:focus {
  top: 5px;
  z-index: 80;
  padding: 10px;
  background: var(--card);
}
.hero {
  position: relative;
  min-height: 850px;
  overflow: hidden;
  isolation: isolate;
}
.hero-inner {
  max-width: 1500px;
  margin: auto;
  display: grid;
  grid-template-columns: 46% 54%;
  padding: 165px 5vw 75px;
  min-height: 790px;
  align-items: center;
}
.hero-copy {
  z-index: 5;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 25px;
}
.eyebrow i,
.body-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}
h1 {
  font-size: clamp(42px, 5.1vw, 78px);
  letter-spacing: -4px;
  line-height: 1.42;
  margin: 0;
  font-weight: 850;
  color: var(--head);
}
h1 span {
  color: var(--green);
  display: block;
}
.lead {
  font-size: 14px;
  color: var(--muted);
  margin: 24px 0 32px;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 650;
  border: 1px solid var(--line);
  transition:
    transform 0.25s,
    background 0.25s;
}
.button:hover {
  transform: translateY(-4px);
}
.primary {
  background: #54aced;
  color: #071521;
  border-color: #54aced;
}
.primary span {
  background: #0919251d;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
}
.secondary {
  color: var(--ink);
  background: var(--card);
}
.hero-tags {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  font-size: 9px;
  color: var(--muted);
}
.hero-tags span + span:before {
  content: "•";
  margin-left: 10px;
  color: var(--green);
}
.hero-visual {
  position: relative;
  height: 520px;
  margin-right: -50px;
  margin-left: -60px;
  isolation: isolate;
}
.hero-visual canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  inset: 0;
  display: block;
}
.hero-orbit {
  position: absolute;
  left: -20%;
  top: 15%;
  width: 70vw;
  height: 70vw;
  max-width: 950px;
  max-height: 950px;
  border: 1px solid #63baf81d;
  border-radius: 50%;
  box-shadow:
    0 0 0 60px #39abff10,
    0 0 0 120px #39abff07;
  z-index: -1;
  transform: rotateX(55deg);
}
.hero-lines {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 25% 40%, #31a1f820, transparent 50%),
    linear-gradient(0deg, transparent 98%, #7ac9fd09 98%),
    linear-gradient(90deg, transparent 98%, #7ac9fd09 98%);
  background-size:
    auto,
    80px 80px,
    80px 80px;
  mask-image: linear-gradient(black, black 65%, transparent);
}
.orbital-word {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  font: 900 clamp(70px, 10vw, 170px)/1 sans-serif;
  letter-spacing: -8px;
  color: transparent;
  -webkit-text-stroke: 1px #7fcafc24;
  z-index: 1;
  direction: ltr;
  transform: rotate(-12deg);
}
.visual-tag {
  position: absolute;
  z-index: 4;
  padding: 14px 19px;
  border: 1px solid #caebff1c;
  background: var(--nav);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 15px 40px #0002;
  animation: float 6s ease-in-out infinite;
}
.visual-tag span {
  font: 8px sans-serif;
  letter-spacing: 1.5px;
  color: var(--muted);
  display: block;
}
.visual-tag b {
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-top: 5px;
}
.tag-a {
  top: 15px;
  left: 8%;
}
.tag-b {
  bottom: 45px;
  right: 10%;
  animation-delay: -3s;
}
.visual-tag i {
  height: 4px;
  width: 60%;
  display: block;
  background: #54aced;
  border-radius: 10px;
  margin-top: 12px;
  box-shadow: 35px 0 #54aced22;
}
.pause {
  position: absolute;
  left: 15%;
  bottom: 35px;
  font-size: 10px;
  color: var(--muted);
  z-index: 5;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 8px 16px;
}
.view-caption {
  position: absolute;
  right: 7%;
  bottom: -5px;
  font-size: 9px;
  color: var(--muted);
  z-index: 5;
}
.view-caption span {
  margin-right: 15px;
  font-size: 20px;
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  margin: 0 5vw;
  padding-bottom: 30px;
  font:
    8px Gym,
    sans-serif;
  letter-spacing: 1.5px;
  color: var(--muted);
  direction: ltr;
}
.hero-bottom a {
  letter-spacing: 0;
  direction: rtl;
}
.hero-bottom b {
  margin-right: 14px;
  color: var(--green);
  font-size: 20px;
}
.ticker {
  overflow: hidden;
  background: #54aced;
  color: #071521;
  transform: none;
  padding: 20px 0;
}
.ticker > div {
  white-space: nowrap;
  animation: marquee 26s linear infinite;
  font-size: 17px;
  font-weight: 750;
  word-spacing: 25px;
  width: max-content;
}
.section {
  max-width: 1440px;
  margin: auto;
  padding: 105px 5vw;
}
.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 45px;
}
.section-title p:last-child {
  font-size: 12px;
  color: var(--muted);
}
h2 {
  font-size: clamp(30px, 3.2vw, 50px);
  line-height: 1.55;
  letter-spacing: -1.5px;
  font-weight: 760;
  margin: 0;
}
h2 span {
  color: var(--green);
}
.services-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 18px;
}
.service {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 28px;
  background: var(--card);
  overflow: hidden;
  transition:
    transform 0.35s,
    border-color 0.35s;
}
.service:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    #56b1f525,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s;
}
.service:hover {
  transform: translateY(-8px);
  border-color: #54aced77;
}
.service:hover:before {
  opacity: 1;
}
.service > * {
  position: relative;
  z-index: 1;
}
.service.featured {
  background: linear-gradient(140deg, var(--soft), var(--card));
}
.card-label {
  font: 8px sans-serif;
  letter-spacing: 1.4px;
  color: var(--muted);
  display: block;
}
.service h3 {
  font-size: 19px;
  letter-spacing: -0.5px;
  margin: 12px 0;
}
.service p {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 25px;
}
.card-go {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 11px;
}
.card-go b {
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.service-drawing {
  height: 160px;
  width: 100%;
  color: var(--green);
  margin: 10px 0;
  overflow: visible;
}
.layer {
  transition: transform 0.6s;
  transform: translateY(0);
}
.l1 {
  animation: layer1 5s ease-in-out infinite;
}
.l2 {
  animation: layer2 5s ease-in-out infinite;
}
.service:hover .l1 {
  transform: translateY(-25px);
}
.rings {
  height: 180px;
  display: grid;
  place-items: center;
  position: relative;
  perspective: 500px;
  color: var(--green);
}
.rings i {
  position: absolute;
  width: 105px;
  height: 105px;
  border: 1px solid var(--green);
  border-radius: 50%;
  animation: ring 8s linear infinite;
}
.rings i:nth-child(2) {
  width: 130px;
  height: 130px;
  animation-direction: reverse;
  animation-delay: -2s;
  opacity: 0.5;
}
.rings i:nth-child(3) {
  width: 155px;
  height: 155px;
  animation-delay: -4s;
  opacity: 0.2;
}
.rings b {
  font: 50px sans-serif;
}
.sound-bars {
  height: 180px;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
.sound-bars i {
  width: 8px;
  border-radius: 10px;
  background: var(--green);
  height: 25px;
  animation: sound 2s ease-in-out infinite;
}
.sound-bars i:nth-child(2n) {
  animation-delay: -0.5s;
}
.sound-bars i:nth-child(3n) {
  animation-delay: -1s;
}
.sound-bars i:nth-child(4) {
  height: 100px;
}
.bank {
  padding-top: 40px;
}
.bank-layout {
  display: grid;
  grid-template-columns: 37% 63%;
  direction: rtl;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--card);
  overflow: hidden;
}
.bank-info {
  padding: 40px;
}
.bank-info h3 {
  font-size: 31px;
  margin: 10px 0;
}
.bank-info p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 25px;
  max-width: 310px;
}
.exercise-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.exercise-options button {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 9px 12px;
  font-size: 10px;
}
.exercise-options button.active {
  border-color: var(--green);
  background: var(--soft);
  color: var(--green);
}
dl {
  font-size: 10px;
  margin: 30px 0;
  display: flex;
  gap: 35px;
}
dt {
  color: var(--muted);
}
dd {
  margin: 0;
}
.bank-info label {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
#phase {
  width: 100%;
  accent-color: #54aced;
  margin: 15px 0;
}
.bank-controls {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 10px;
}
.bank-controls button {
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 8px 14px;
}
.bank-controls a {
  padding: 8px 0;
  color: var(--green);
}
.body-view {
  position: relative;
  min-height: 570px;
  background: radial-gradient(ellipse at 50% 40%, #3878a914, transparent 65%);
  isolation: isolate;
}
.body-view canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.body-badge {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 8px sans-serif;
  letter-spacing: 1px;
  color: var(--muted);
}
.body-caption {
  position: absolute;
  bottom: 27px;
  right: 25px;
  left: 25px;
  text-align: center;
  font-size: 9px;
  color: var(--muted);
  z-index: 3;
}
.motion-index {
  position: absolute;
  left: 20px;
  top: 18%;
  font: 200 220px sans-serif;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #779cb322;
}
.fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  font: 900 50px sans-serif;
  color: var(--green);
  opacity: 0.5;
  z-index: 0;
}
.webgl-ready .fallback {
  display: none;
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.plans-grid article {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 35px;
  background: var(--card);
}
.plans-grid h3 {
  font-size: 22px;
  margin-top: 35px;
}
.plans-grid p {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 35px;
}
.accent-plan {
  background: linear-gradient(135deg, var(--soft), var(--card)) !important;
  border-color: #54aced55 !important;
}
.plans {
  padding-top: 40px;
}
.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 50px;
  padding-top: 40px;
}
.team p {
  color: var(--muted);
  font-size: 13px;
}
.team-mark {
  position: relative;
  direction: ltr;
  background: var(--soft);
  height: 350px;
  border: 1px solid var(--line);
  border-radius: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.team-mark span {
  font: 900 180px sans-serif;
  color: transparent;
  -webkit-text-stroke: 1px var(--green);
  animation: float 7s ease-in-out infinite;
}
.team-mark span:nth-child(2) {
  animation-delay: -3s;
  color: var(--green);
  -webkit-text-stroke: 0;
}
.team-mark i {
  font: 9px sans-serif;
  letter-spacing: 2px;
  position: absolute;
  bottom: 25px;
  left: 30px;
  color: var(--muted);
}
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.journal article {
  border-top: 1px solid var(--line);
  padding: 25px 0;
}
.journal article > span {
  font-size: 10px;
  color: var(--green);
}
.journal h3 {
  font-size: 22px;
  margin: 30px 0 15px;
}
.journal p {
  font-size: 12px;
  color: var(--muted);
}
summary {
  cursor: pointer;
  font-size: 11px;
  margin-top: 30px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 15px;
}
details[open] summary {
  color: var(--green);
}
.professional {
  background: var(--soft);
  max-width: none;
  padding: 80px max(5vw, calc((100vw - 1296px) / 2));
}
.professional > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 45px;
}
.professional article {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.professional h3 {
  font-size: 26px;
}
.professional p {
  font-size: 12px;
  color: var(--muted);
}
.professional a {
  font-size: 12px;
  color: var(--green);
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}
footer {
  padding: 65px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
footer p {
  font-size: 11px;
  color: var(--muted);
}
footer > a {
  font-size: 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.preview-note {
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 40;
  background: var(--nav);
  color: var(--muted);
  font-size: 8px;
  border: 1px solid var(--line);
  border-radius: 25px;
  padding: 7px 14px;
  backdrop-filter: blur(10px);
}
@keyframes float {
  50% {
    transform: translateY(-12px);
  }
}
@keyframes marquee {
  to {
    transform: translateX(45%);
  }
}
@keyframes ring {
  to {
    transform: rotateY(360deg) rotateX(30deg);
  }
}
@keyframes sound {
  50% {
    height: 90px;
    opacity: 0.6;
  }
}
@keyframes layer1 {
  50% {
    transform: translateY(-15px);
  }
}
@keyframes layer2 {
  50% {
    transform: translateY(15px);
  }
}
@media (max-width: 1100px) {
  header {
    padding: 14px 18px;
    gap: 15px;
  }
  nav {
    gap: 13px;
    font-size: 9px;
  }
  h1 {
    letter-spacing: -2px;
  }
  .hero-inner {
    padding-top: 185px;
  }
  .hero-visual {
    height: 470px;
  }
  .hero {
    min-height: 780px;
  }
  .hero-inner {
    min-height: 720px;
  }
  .hero-copy {
    padding-left: 10px;
  }
  .button {
    padding: 10px 18px;
    gap: 15px;
    font-size: 11px;
  }
  .bank-info {
    padding: 30px;
  }
  .team {
    gap: 25px;
  }
  .section {
    padding: 80px 5vw;
  }
}
@media (max-width: 820px) {
  header {
    position: fixed;
    top: 18px;
    right: 5vw;
    left: 5vw;
    padding: 13px 18px;
  }
  nav {
    display: none;
  }
  .brand {
    font-size: 23px;
  }
  #menu {
    display: block;
    font-size: 18px;
    width: 32px;
    height: 32px;
  }
  nav.open {
    display: flex;
    position: absolute;
    top: 75px;
    right: 0;
    left: 0;
    flex-direction: column;
    background: var(--card);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--line);
    gap: 0;
    font-size: 12px;
  }
  nav.open a {
    padding: 11px;
  }
  .hero-inner {
    display: flex;
    flex-direction: column;
    padding: 150px 7vw 65px;
    min-height: 0;
    align-items: stretch;
  }
  .hero-copy {
    padding: 0;
    max-width: 600px;
  }
  .hero {
    min-height: 0;
  }
  .hero h1 {
    font-size: clamp(40px, 8.5vw, 68px);
    line-height: 1.4;
    letter-spacing: -2px;
  }
  .hero h1 span {
    display: inline;
  }
  .lead {
    font-size: 12px;
    line-height: 2;
    margin: 22px 0;
  }
  .hero-visual {
    height: 380px;
    margin: 5px -9vw -20px;
  }
  .hero-tags {
    font-size: 8px;
    margin-top: 23px;
    gap: 8px;
  }
  .tag-a {
    top: 40px;
    left: 10%;
    padding: 10px 12px;
  }
  .tag-b {
    right: 10%;
    bottom: 50px;
    padding: 10px 12px;
  }
  .visual-tag b {
    font-size: 10px;
  }
  .visual-tag span {
    font-size: 6px;
  }
  .pause {
    bottom: 43px;
    left: 12%;
    font-size: 8px;
  }
  .view-caption {
    font-size: 8px;
    bottom: 8px;
  }
  .orbital-word {
    top: 28%;
    font-size: 17vw;
    left: 5vw;
    letter-spacing: -5px;
  }
  .hero-bottom {
    padding-bottom: 20px;
    font-size: 6px;
  }
  .hero-bottom > span:first-child {
    display: none;
  }
  .hero-orbit {
    width: 150vw;
    height: 150vw;
    left: -65%;
    top: 30%;
    border-width: 1px;
  }
  .ticker {
    padding: 15px 0;
  }
  .ticker > div {
    font-size: 14px;
    word-spacing: 20px;
  }
  .section {
    padding: 65px 7vw;
  }
  .section-title {
    display: block;
    margin-bottom: 30px;
  }
  .section-title > p {
    margin-top: 20px;
  }
  .section-title > .button {
    margin-top: 23px;
  }
  h2 {
    font-size: 29px;
    letter-spacing: -1px;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service {
    padding: 25px;
  }
  .service-drawing,
  .rings,
  .sound-bars {
    height: 135px;
  }
  .service h3 {
    font-size: 22px;
  }
  .service p {
    font-size: 12px;
  }
  .bank-layout {
    display: flex;
    flex-direction: column;
  }
  .body-view {
    order: 0;
    min-height: 430px;
  }
  .bank-info {
    order: 1;
    padding: 30px;
  }
  .bank-layout .body-view {
    border-bottom: 1px solid var(--line);
  }
  .bank-info h3 {
    margin-top: 10px;
  }
  .bank-info .eyebrow {
    margin-bottom: 12px;
  }
  .bank-info p {
    max-width: none;
  }
  .body-badge {
    font-size: 7px;
    left: 22px;
  }
  .motion-index {
    font-size: 170px;
    left: 15px;
  }
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .plans-grid article {
    padding: 30px;
  }
  .plans-grid h3 {
    margin-top: 20px;
  }
  .plans-grid p {
    margin-bottom: 25px;
  }
  .team {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .team-mark {
    height: 280px;
  }
  .team-mark span {
    font-size: 145px;
  }
  .journal-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .journal h3 {
    margin-top: 20px;
  }
  .professional > div {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .professional {
    padding: 60px 7vw;
  }
  footer {
    padding: 40px 7vw 65px;
    flex-wrap: wrap;
  }
  footer > div {
    width: 100%;
  }
  .preview-note {
    font-size: 7px;
    bottom: 10px;
    left: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
  .ticker > div {
    transform: none;
  }
  .hero-orbit {
    box-shadow: none;
  }
}
:root[data-motion="full"] .visual-tag {
  animation: float 6s ease-in-out infinite !important;
}
:root[data-motion="full"] .tag-b {
  animation-delay: -3s !important;
}
:root[data-motion="full"] .ticker > div {
  animation: marquee 26s linear infinite !important;
}
:root[data-motion="full"] .l1 {
  animation: layer1 5s ease-in-out infinite !important;
}
:root[data-motion="full"] .l2 {
  animation: layer2 5s ease-in-out infinite !important;
}
:root[data-motion="full"] .rings i {
  animation: ring 8s linear infinite !important;
}
:root[data-motion="full"] .sound-bars i {
  animation: sound 2s ease-in-out infinite !important;
}
:root[data-motion="full"] .sound-bars i:nth-child(2n) {
  animation-delay: -0.5s !important;
}
:root[data-motion="full"] .sound-bars i:nth-child(3n) {
  animation-delay: -1s !important;
}
:root[data-motion="full"] .team-mark span {
  animation: float 7s ease-in-out infinite !important;
}

.brand-logo {
  object-fit: contain;
  flex: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
}
.hero-lines {
  background: radial-gradient(ellipse at 25% 40%, #31a1f816, transparent 60%);
  background-size: auto;
}
.hero-orbit {
  box-shadow: none;
  border-color: #63baf812;
}
header {
  transition:
    padding 0.3s,
    top 0.3s;
}
header.compact {
  top: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.path-section {
  padding-bottom: 70px;
}
.path-list {
  border-top: 1px solid var(--line);
  perspective: 1200px;
}
.path-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 32px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 42px 28px;
  position: relative;
  transform-style: preserve-3d;
  background: var(--bg);
}
.path-number {
  font: 300 64px/1 sans-serif;
  color: var(--muted);
  opacity: 0.35;
  direction: ltr;
}
.path-row h3 {
  font-size: clamp(23px, 2.3vw, 35px);
  margin: 10px 0;
}
.path-row p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}
.path-row .eyebrow {
  font-size: 9px;
}
.path-action {
  display: flex;
  gap: 25px;
  align-items: center;
  font-size: 12px;
}
.path-action b {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
}
.selected-path {
  background: var(--soft);
}
.selected-path .path-number {
  color: var(--green);
  opacity: 0.6;
}
.depth-card {
  will-change: auto;
  transition: box-shadow 0.3s;
}
.depth-card:hover {
  box-shadow: 0 18px 60px #0002;
}
.immersion {
  height: 190svh;
  position: relative;
  margin: 0 0 70px;
}
.immersion-sticky {
  height: 100svh;
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1200px;
}
.immersion-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scale(0.88);
  border-radius: 32px;
  background: #111;
}
.immersion-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  display: block;
}
.immersion-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0003, #000b),
    linear-gradient(0deg, #0009, transparent 60%);
}
.immersion-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 9vw;
  color: #fff;
}
.immersion-copy h2 {
  font-size: clamp(38px, 6.5vw, 95px);
  line-height: 1.45;
}
.immersion-copy h2 span {
  color: #54aced;
}
.immersion-copy > p {
  font-size: 14px;
  color: #d0d9e0;
}
.immersion-copy .eyebrow {
  color: #bcd7eb;
  font-size: 10px;
  letter-spacing: 2px;
}
.immersion-copy .button {
  margin-top: 22px;
  background: #54aced;
  color: #091926;
}
.scene-label {
  position: absolute;
  bottom: 30px;
  right: 9vw;
  color: #ddd;
  font-size: 9px;
}
.scene-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #fff2;
  direction: ltr;
}
.scene-progress i {
  display: block;
  height: 100%;
  background: #54aced;
  transform-origin: left;
  transform: scaleX(0);
}
.team-editorial {
  gap: 8vw;
  padding-top: 30px;
  padding-bottom: 120px;
}
.coach-art {
  min-height: 470px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 70%, #42a1e524, transparent 65%), var(--soft);
  border-radius: 180px 180px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.coach-art > img {
  position: relative;
  z-index: 2;
  width: min(100%, 450px);
  height: auto;
  object-fit: contain;
}
.coach-outline {
  font: 900 clamp(65px, 8vw, 120px)/1 sans-serif;
  position: absolute;
  top: 80px;
  color: transparent;
  -webkit-text-stroke: 1px #66a0c855;
  direction: ltr;
  letter-spacing: -6px;
}
.coach-nameplate {
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
  z-index: 3;
  background: var(--nav);
  backdrop-filter: blur(14px);
  padding: 17px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.coach-nameplate span {
  font: 8px sans-serif;
  letter-spacing: 1px;
  color: var(--muted);
}
.coach-copy h2 {
  font-size: clamp(35px, 4.5vw, 65px);
}
.coach-copy > p {
  font-size: 14px;
  max-width: 440px;
  margin: 25px 0;
}
.coach-steps {
  display: grid;
  margin-bottom: 35px;
}
.coach-steps span {
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
}
.coach-steps b {
  font: 11px sans-serif;
  color: var(--green);
  margin-left: 18px;
}
.journal-editorial {
  border-top: 1px solid var(--line);
}
.journal-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5vw;
  align-items: start;
}
.journal-cover {
  border: 1px solid var(--line) !important;
  border-radius: 24px;
  overflow: hidden;
  padding: 0 !important;
  background: var(--card);
}
.journal-cover > img {
  display: block;
  width: 100%;
  aspect-ratio: 1.65;
  object-fit: cover;
}
.journal-cover > div {
  padding: 30px;
}
.journal-cover h3 {
  font-size: 30px;
  margin: 15px 0;
}
.journal-cover a,
.journal-reading a {
  font-size: 12px;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--green);
}
.journal-reading details {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.journal-reading summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 0;
  list-style: none;
}
.journal-reading summary > span {
  color: var(--green);
  font-size: 9px;
  grid-column: 1;
}
.journal-reading summary h3 {
  margin: 0;
  font-size: clamp(19px, 2vw, 28px);
  grid-column: 1;
}
.journal-reading summary b {
  font: 24px sans-serif;
  grid-column: 2;
  grid-row: 1/3;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}
.journal-reading details[open] summary b {
  transform: rotate(45deg);
}
.journal-reading details > p {
  margin: 20px 0 0;
}
.chapter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  perspective: 1400px;
}
.chapter-card {
  padding: 35px;
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  min-height: 520px;
  transform-style: preserve-3d;
}
.chapter-index {
  font: 9px sans-serif;
  letter-spacing: 1.5px;
  color: var(--muted);
}
.chapter-card h3 {
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.5;
  margin: 20px 0;
}
.chapter-card p {
  font-size: 13px;
  color: var(--muted);
  max-width: 320px;
}
.chapter-card > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 55px;
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 15px;
  font-size: 12px;
}
.chapter-card > a b {
  font-size: 25px;
  color: var(--green);
}
.chapter-symbol {
  height: 170px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 600px;
}
.chapter-symbol i {
  position: absolute;
  width: 95px;
  height: 95px;
  border: 1px solid var(--green);
  transform: rotate(45deg) rotateY(30deg);
  border-radius: 22px;
}
.chapter-symbol i:nth-child(2) {
  width: 125px;
  height: 125px;
  opacity: 0.5;
}
.chapter-symbol i:nth-child(3) {
  width: 155px;
  height: 155px;
  opacity: 0.2;
}
.chapter-symbol b {
  font: 60px sans-serif;
  color: var(--green);
}
.space-model {
  height: 170px;
  position: relative;
  margin: auto;
  width: 230px;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-32deg);
}
.space-floor {
  position: absolute;
  inset: 20px;
  border: 1px solid var(--green);
  background: var(--soft);
}
.space-wall {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 190px;
  height: 70px;
  border: 1px solid var(--green);
  transform-origin: top;
  transform: rotateX(-90deg);
  background: var(--soft);
}
.space-bar {
  position: absolute;
  left: 65px;
  top: 70px;
  width: 100px;
  height: 8px;
  background: var(--green);
  transform: translateZ(30px);
  border-radius: 5px;
}
.space-weight {
  position: absolute;
  left: 65px;
  top: 50px;
  width: 22px;
  height: 48px;
  border: 2px solid var(--green);
  transform: translateZ(30px);
  box-shadow:
    78px 0 0 -2px var(--soft),
    78px 0 0 0 var(--green);
}
.footer-editorial {
  display: block !important;
  margin-top: 50px;
  background: var(--soft);
  padding: 65px 5vw 35px;
}
.footer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 35px;
}
.footer-head h2 {
  font-size: clamp(30px, 4vw, 55px);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--line);
  margin-top: 55px;
  padding-top: 30px;
}
.footer-bottom > a {
  font-size: 12px;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.preview-note {
  max-width: 190px;
}
.next-chapter {
  padding-bottom: 60px;
}
@media (max-width: 820px) {
  .brand-logo {
    width: 40px;
    height: 40px;
  }
  .path-row {
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding: 28px 12px;
  }
  .path-number {
    font-size: 30px;
    align-self: start;
    margin-top: 22px;
  }
  .path-action {
    grid-column: 2;
    justify-content: space-between;
  }
  .path-row h3 {
    font-size: 24px;
  }
  .path-row p {
    font-size: 12px;
  }
  .path-action b {
    width: 38px;
    height: 38px;
  }
  .immersion {
    height: 160svh;
    margin-bottom: 30px;
  }
  .immersion-copy {
    padding: 10vw 8vw;
  }
  .immersion-copy h2 {
    font-size: 43px;
  }
  .immersion-copy > p {
    font-size: 12px;
  }
  .immersion-frame {
    transform: scale(0.93);
    border-radius: 24px;
  }
  .immersion-frame > img {
    object-position: 45% center;
  }
  .team-editorial {
    padding-bottom: 65px;
    gap: 35px;
  }
  .coach-art {
    min-height: 360px;
    border-radius: 130px 130px 24px 24px;
  }
  .coach-art > img {
    width: 100%;
  }
  .coach-nameplate {
    left: 15px;
    right: 15px;
    bottom: 15px;
    padding: 14px;
  }
  .coach-copy > p {
    font-size: 13px;
  }
  .journal-layout,
  .chapter-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .journal-cover > div {
    padding: 25px;
  }
  .journal-cover h3 {
    font-size: 26px;
  }
  .journal-reading summary h3 {
    font-size: 21px;
  }
  .chapter-card {
    padding: 28px;
    min-height: 490px;
  }
  .footer-head,
  .footer-bottom {
    flex-wrap: wrap;
    gap: 25px;
  }
  .footer-head .brand {
    width: 100%;
  }
  .footer-bottom p {
    width: 100%;
  }
  .footer-head h2 {
    font-size: 35px;
  }
  .footer-editorial {
    margin-top: 0;
    padding: 50px 7vw 60px;
  }
  .scene-label {
    right: 8vw;
    font-size: 8px;
  }
  .team p {
    line-height: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .immersion {
    height: auto;
  }
  .immersion-sticky {
    position: relative;
    height: 80svh;
  }
  .immersion-frame {
    transform: none;
    border-radius: 0;
  }
}
:root[data-motion="full"] .immersion {
  height: 190svh;
}
:root[data-motion="full"] .immersion-sticky {
  position: sticky;
  height: 100svh;
}
@media (max-width: 820px) {
  :root[data-motion="full"] .immersion {
    height: 160svh;
  }
}
.phone-preview-open {
  position: fixed;
  right: 0;
  top: 45%;
  z-index: 35;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px 0 0 12px;
  padding: 12px 8px;
  writing-mode: vertical-rl;
  font-size: 10px;
  min-height: 100px;
}
.phone-preview {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: var(--card);
  color: var(--ink);
  max-width: 95vw;
  max-height: 95svh;
  overflow: auto;
}
.phone-preview::backdrop {
  background: #000b;
  backdrop-filter: blur(8px);
}
.phone-preview iframe {
  display: block;
  border: 1px solid var(--line);
  border-radius: 20px;
  width: 390px;
  max-width: 80vw;
  height: 75svh;
  background: var(--bg);
}
.phone-preview-close {
  display: block;
  min-height: 44px;
  margin-bottom: 8px;
  width: 100%;
}
.plan-features {
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 15px 0 0;
  font-size: 10px;
  color: var(--muted);
}
.plan-features li {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 10px;
}
.plan-price {
  color: var(--green) !important;
  font-weight: 750;
}
@media (max-width: 820px) {
  .phone-preview-open {
    display: none;
  }
}
.journal-cover>img{height:auto;aspect-ratio:1.65;object-fit:cover}
body{overflow-x:clip}
.owner-gallery:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.owner-gallery figure{margin:0}.owner-gallery img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;border-radius:20px}.owner-gallery figcaption{font-size:12px;color:var(--muted)}@media(max-width:820px){.owner-gallery:not([hidden]){grid-template-columns:1fr}}

/* Home restore (1405/07/22): the site's original header, the original «تیم ما»
   section, one look for the three service cards, and the movement-bank player
   that replaced the 3D figure. Colours come from the home palette (motion-home.css). */

/* ── the site's own header, exactly as the old design rendered it on the home page ──
   colours: the old design's --c values per theme (legacy release, 1405/07/21) */
:root {
  --pc0: 249,250,249; --pc1: 0,88,156; --pc3: 234,237,235; --pc4: 198,203,199; --pc5: 16,16,15; --pc6: 93,93,91;
  --pc7: 205,209,207; --pc9: 229,232,230; --pc13: 9,9,9; --pc14: 0,86,154; --pc15: 0,86,154;
  --pc54: 212,212,212; --pc159: 38,42,39; --pc194: 240,240,240;
}
:root[data-theme="dark"] {
  --pc0: 3,5,4; --pc1: 75,160,221; --pc3: 10,14,16; --pc4: 32,39,43; --pc5: 244,244,239; --pc6: 143,143,136;
  --pc7: 28,33,37; --pc9: 14,19,15; --pc13: 255,255,255; --pc14: 117,191,242; --pc15: 39,120,181;
  --pc54: 31,31,31; --pc159: 196,206,212; --pc194: 11,11,11;
}
header.ohd, header.ohd.compact {
  position: fixed; top: 0; right: 0; left: 0; z-index: 100; display: block; height: auto;
  margin: 0; padding: 0; gap: 0; border: 0; border-radius: 0; border-bottom: 1px solid transparent;
  background: rgba(var(--pc0), .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .4s ease, border-color .4s ease;
  font-family: Vazirmatn, Gym, sans-serif; line-height: normal; color: rgb(var(--pc5));
}
header.ohd.compact { border-bottom-color: rgba(var(--pc13), .06); background: rgba(var(--pc0), .72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.ohd-in { max-width: 1600px; margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 34px); height: 70px; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 22px); }
.ohd-brand { display: flex; align-items: center; gap: 10px; padding: 0; flex: 0 0 auto; font-family: Vazirmatn, Gym, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: .3px; color: rgb(var(--pc5)); }
.ohd-brand img { width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; display: block; }
.ohd-name { display: grid; gap: 1px; text-align: right; }
.ohd-t { font-size: 20px; line-height: 1.15; }
.ohd-t span { color: rgb(var(--pc1)); }
.ohd-s { font-family: Vazirmatn, Gym, sans-serif; font-size: 10.5px; font-weight: 400; color: rgb(var(--pc6)); letter-spacing: 0; line-height: 1.5; }
header.ohd nav { display: flex; align-items: center; gap: clamp(2px, 1vw, 14px); flex: 1 1 0%; justify-content: space-evenly; min-width: 0; font-size: inherit; color: inherit; }
header.ohd nav .ohd-sep, header.ohd nav .ohd-quick { display: none; }
@media (min-width: 861px) { header.ohd nav.open button.ohd-theme-row { display: none; } }
.ohd-link {
  position: relative; display: block; font-size: 14.5px; font-weight: 500; padding: 6px 13px 8px; border-radius: 999px;
  white-space: nowrap; background: transparent; color: rgb(var(--pc5));
  transition: background .5s cubic-bezier(.32, .72, 0, 1), transform .5s cubic-bezier(.32, .72, 0, 1);
}
header.ohd nav a.ohd-link:hover { color: rgb(var(--pc5)); }
.ohd-roll { display: block; height: 24px; overflow: hidden; }
.ohd-rin { display: block; transition: transform .55s cubic-bezier(.32, .72, 0, 1); }
.ohd-rin > span { display: block; height: 24px; line-height: 24px; }
.ohd-rin > span + span { color: rgb(var(--pc1)); }
.ohd-bar { position: absolute; bottom: 2px; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: linear-gradient(90deg, rgb(var(--pc15)), rgb(var(--pc14))); transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .4s; transform: scaleX(0); opacity: 0; }
.ohd-link:hover, .ohd-link:focus-visible { background: rgba(var(--pc1), .09); transform: translateY(-1px); }
.ohd-link:hover .ohd-rin, .ohd-link:focus-visible .ohd-rin { transform: translateY(-24px); }
.ohd-link:hover .ohd-bar, .ohd-link:focus-visible .ohd-bar { transform: scaleX(1); opacity: 1; }
.ohd-fill { display: none; flex: 1; }
header.ohd .header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ohd-search { display: flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 12px; background: rgba(var(--pc9), .8); border: 1px solid rgb(var(--pc7)); border-radius: 999px; flex: 0 1 150px; min-width: 110px; width: 150px; overflow: hidden; }
.ohd-lens { width: 12px; height: 12px; border: 1.5px solid rgb(var(--pc6)); border-radius: 50%; flex: 0 0 auto; }
.ohd-search input { flex: 1 1 0%; background: none; border: none; outline: none; color: rgb(var(--pc5)); font: inherit; font-size: 12.5px; min-width: 0; padding: 0; -webkit-appearance: none; appearance: none; }
.ohd-search input::placeholder { color: rgb(var(--pc6)); }
.ohd-search input::-webkit-search-cancel-button { display: none; }
.ohd-search:focus-within { border-color: rgb(var(--pc1)); }
header.ohd #theme {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; font-size: 0;
  border-radius: 999px; border: 1px solid rgb(var(--pc7)); background: rgba(var(--pc9), .8); color: rgb(var(--pc5));
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), border-color .4s cubic-bezier(.32, .72, 0, 1), color .4s cubic-bezier(.32, .72, 0, 1);
}
header.ohd #theme:hover { border-color: rgb(var(--pc1)); color: rgb(var(--pc1)); }
header.ohd #theme:active { transform: scale(.92); }
.ohd-moon { display: none; }
:root[data-theme="light"] .ohd-sun { display: none; }
:root[data-theme="light"] .ohd-moon { display: block; }
header.ohd .login {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px 0 9px; border-radius: 12px; flex: 0 0 auto;
  white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: 0;
  border: 1px solid rgb(var(--pc54)); background: rgb(var(--pc194)); color: rgb(var(--pc159));
}
header.ohd #menu { display: none; }
.ohd-grid { display: none; }

/* 861–1340px: no search box; 861–1180px: the menu folds behind ☰ (old design widths) */
@media (max-width: 1340px) { .ohd-search { display: none; } }
@media (max-width: 1180px) {
  header.ohd nav { display: none; }
  .ohd-fill { display: block; }
  header.ohd #menu {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0;
    background: rgba(var(--pc9), .8); border: 1px solid rgb(var(--pc7)); border-radius: 8px; color: rgb(var(--pc5)); font-size: 20px; line-height: 1;
  }
  header.ohd nav.open {
    position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: 6px; justify-content: stretch; grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid rgb(var(--pc7)); background: rgba(var(--pc0), .97); padding: 14px clamp(16px, 4vw, 24px) 18px;
    max-height: calc(100vh - 64px); overflow: auto; animation: pgpDrop .18s ease;
  }
  header.ohd nav.open .ohd-link {
    text-align: right; min-height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: 8px;
    background: rgb(var(--pc9)); border: 1px solid rgb(var(--pc7)); color: rgb(var(--pc5)); font-size: 15px; font-weight: 400; transform: none;
  }
  header.ohd nav.open .ohd-roll { height: auto; }
  header.ohd nav.open .ohd-rin { transform: none; }
  header.ohd nav.open .ohd-rin > span + span, header.ohd nav.open .ohd-bar { display: none; }
  header.ohd nav.open .ohd-sep { display: block; height: 1px; background: rgb(var(--pc7)); margin: 8px 0; }
  header.ohd nav.open .ohd-quick { display: flex; width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; align-items: center; text-align: right; min-height: 46px; padding: 0 14px; color: rgb(var(--pc1)); font-size: 14.5px; font-weight: 600; }
}
/* phones: the old mobile header — logo + name, and the «همه بخش‌ها» button */
@media (max-width: 860px) {
  header.ohd, header.ohd.compact { background: rgba(var(--pc0), .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--pc13), .06); padding-top: env(safe-area-inset-top); }
  .ohd-in { height: 60px; gap: 10px; padding: 0 14px; }
  .ohd-brand { gap: 9px; min-width: 0; flex: 1 1 0%; }
  .ohd-brand img { width: 36px; height: 36px; }
  .ohd-name { line-height: 1.3; min-width: 0; gap: 0; }
  .ohd-t { font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: rgb(var(--pc5)); }
  .ohd-s { white-space: nowrap; line-height: 1.3; }
  .ohd-long, .ohd-fill { display: none; }
  header.ohd #theme, header.ohd .login { display: none; }
  header.ohd #menu { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--pc3)); border: 1px solid rgb(var(--pc4)); color: rgb(var(--pc5)); font-size: 0; }
  .ohd-burger { display: none; }
  .ohd-grid { display: block; }
  header.ohd nav.open { max-height: calc(100dvh - 60px); }
}
@keyframes pgpDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── service cards: all three carry the right-hand card's look ── */
.services-grid .service {
  background: linear-gradient(140deg, var(--soft), var(--card));
  border-color: color-mix(in srgb, var(--green) 20%, var(--line));
}
.services-grid .service:hover { border-color: color-mix(in srgb, var(--green) 55%, transparent); }

/* ── movement bank player ── */
.gp-info { display: flex; flex-direction: column; padding: 40px; min-width: 0; }
.gp-info #gp-name { margin: 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.3; text-wrap: balance; }
.gp-meta { margin: 12px 0 0; font-size: 13px; font-weight: 650; color: var(--green); }
.gp-info .gp-step { margin: 18px 0 0; max-width: 38ch; min-height: 3.9em; font-size: 14px; line-height: 1.95; color: var(--muted); text-wrap: pretty; }
.gp-info .gp-muscles { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.gp-controls { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gp-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 650;
  transition: transform .45s cubic-bezier(.32, .72, 0, 1), border-color .3s, color .3s;
}
.gp-btn:hover { border-color: var(--green); color: var(--green); }
.gp-btn:active { transform: scale(.97); }
.gp-btn--fill { padding: 0 6px 0 18px; border-color: transparent; background: var(--green); color: var(--bg); }
.gp-btn--fill:hover { color: var(--bg); border-color: transparent; }
.gp-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--bg) 18%, transparent); transition: transform .45s cubic-bezier(.32, .72, 0, 1); }
.gp-btn--fill:hover .gp-ic { transform: translateX(-3px); }
.gp-resume { display: none; }
.gp.is-paused .gp-pause { display: none; }
.gp.is-paused .gp-resume { display: block; }
.gp-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--green); }
.gp-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.gp-view {
  position: relative; min-height: 540px; overflow: hidden; isolation: isolate;
  border-inline-start: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--green) 9%, transparent), transparent 66%);
}
.gp-stage { position: absolute; inset: 0 0 3px; }
.gp-frame {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(1.03); filter: blur(6px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), filter .6s cubic-bezier(.16, 1, .3, 1);
}
.gp-frame.is-on { opacity: 1; transform: none; filter: none; }
.gp-frame > img, .gp-frame > video { width: 100%; height: 100%; object-fit: contain; display: block; }
.gp-frame--still > img { position: relative; width: min(180px, 40%); height: auto; filter: drop-shadow(0 24px 36px color-mix(in srgb, var(--tone) 40%, transparent)); }
.gp-word {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: clamp(90px, 13vw, 190px); font-weight: 900; line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--tone) 55%, transparent); opacity: .55;
}
.gp-bar { position: absolute; right: 0; left: 0; bottom: 0; height: 3px; background: var(--line); }
.gp-bar i { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: right; }

@media (max-width: 820px) {
  .bank-layout.gp { grid-template-columns: 1fr; }
  .gp-view { order: -1; min-height: 300px; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .gp-info { padding: 24px; }
  .gp-info .gp-step { min-height: 0; }
  .gp-controls { padding-top: 22px; }
  .gp-link { margin-inline-start: 0; }
}

/* ── original «تیم ما» section ── */
.otm { padding: 100px 0 96px; border-top: 1px solid var(--line); background: var(--bg); }
.otm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 32px); }
.otm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 38px; }
.otm-kick { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--green); }
.otm h2 { margin: 0; max-width: 640px; font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.otm h2 span { color: var(--green); }
.otm-ghost {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 700;
  transition: border-color .25s, color .25s, transform .2s;
}
.otm-ghost:hover { border-color: var(--green); color: var(--green); }
.otm-ghost:active { transform: scale(.97); }
.otm-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; }
.otm-row { display: contents; }
.otm-lead {
  position: relative; grid-column: span 2; grid-row: span 2; overflow: hidden; border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, var(--soft) 0%, var(--card) 52%, var(--bg) 100%);
}
.otm-lead::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 60%, transparent), transparent); }
.otm-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.otm-lead .otm-glow { left: -12%; bottom: -32%; width: 78%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--green) 34%, transparent), transparent 62%); }
.otm-lead > img { position: absolute; left: 1%; bottom: 0; width: 48%; height: 90%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.otm-lead-copy { position: relative; z-index: 1; box-sizing: border-box; width: 56%; height: 100%; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.otm-badge { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--green); color: var(--bg); font-size: 12px; font-weight: 800; white-space: nowrap; }
.otm-lead h3 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.2; }
.otm-role { margin: 0; font-size: 14px; font-weight: 700; color: var(--green); }
.otm-text { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--muted); text-wrap: pretty; }
.otm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.otm-cta, .otm-line { display: inline-flex; align-items: center; height: 50px; border-radius: 999px; font-size: 14.5px; white-space: nowrap; }
.otm-cta { padding: 0 26px; background: var(--green); color: var(--bg); font-weight: 800; transition: box-shadow .25s, transform .25s cubic-bezier(.16, 1, .3, 1); }
.otm-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--green) 35%, transparent); }
.otm-line { padding: 0 24px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 40%, transparent); color: var(--ink); font-weight: 700; transition: border-color .25s, color .25s; }
.otm-line:hover { border-color: var(--green); color: var(--green); }
.otm-card {
  position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card) 0%, var(--soft) 100%);
  transition: border-color .3s, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.otm-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.otm-card .otm-glow { left: 50%; bottom: -45%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, color-mix(in srgb, var(--green) 22%, transparent), transparent 60%); }
.otm-card > img { position: absolute; right: 0; left: 0; bottom: 0; margin: 0 auto; width: 100%; height: 88%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .4)); }
.otm-card-copy { position: absolute; right: 0; left: 0; bottom: 0; padding: 48px 18px 16px; display: grid; gap: 3px; text-align: right; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--soft) 94%, transparent) 58%); }
.otm-card h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.otm-card p { margin: 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 980px) {
  .otm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
}
@media (max-width: 680px) {
  .otm { padding: 56px 0 48px; }
  .otm-wrap { padding: 0 16px; }
  .otm-head { margin-bottom: 18px; align-items: center; }
  .otm-kick { display: none; }
  .otm h2 { font-size: 22px; }
  .otm-ghost { height: 40px; padding: 0 14px; font-size: 12.5px; }
  .otm-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  .otm-lead { grid-column: auto; grid-row: auto; min-height: 260px; }
  .otm-lead > img { width: 44%; height: 88%; left: 0; }
  .otm-lead-copy { width: 60%; padding: 18px; gap: 8px; }
  .otm-lead h3 { font-size: 22px; }
  .otm-role { font-size: 12px; line-height: 1.7; }
  .otm-text, .otm-line { display: none; }
  .otm-cta { height: 44px; padding: 0 18px; font-size: 13px; }
  .otm-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .otm-row::-webkit-scrollbar { display: none; }
  .otm-card { flex: 0 0 148px; height: 196px; scroll-snap-align: start; }
  .otm-card-copy { padding: 36px 12px 12px; }
  .otm-card h3 { font-size: 14px; font-weight: 800; }
  .otm-card p { font-size: 11px; }
}

/* the hero dumbbell can be grabbed and spun */
.hero-visual canvas { touch-action: pan-y; }
.hero-visual.is-near canvas { cursor: grab; }
.hero-visual.is-grabbing canvas { cursor: grabbing; }

/* ── page order (1405/07/22): restored plans, coach path and gym design, our own versions ── */
#services, #movement-bank, #membership, #trainers, #coach-path, #gym-design { scroll-margin-top: 72px; }

.opl { padding: clamp(90px, 10vw, 140px) 0 clamp(70px, 8vw, 110px); border-top: 1px solid var(--line); background: var(--bg); }
.opl-wrap, .ocp-wrap, .ogd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 32px); }
.opl-head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 60px); }
.opl-kick, .ocp-kick, .ogd-kick { margin: 0; font-size: 13px; font-weight: 700; color: var(--green); }
.opl h2 { margin: 0; font-size: clamp(32px, 4.6vw, 62px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.opl h2 span, .ocp h2 span, .ogd h2 span { color: var(--green); }
.opl-lead { margin: 0; max-width: 36em; font-size: clamp(15px, 1.2vw, 17px); line-height: 2; color: var(--muted); text-wrap: pretty; }
.opl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.opl-card { position: relative; border-radius: 22px; padding: 1px; background: var(--line); isolation: isolate; }
.opl-in { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 24px; border-radius: 21px; background: var(--bg); overflow: hidden; }
.opl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opl-top h3 { margin: 0; font-size: 23px; font-weight: 800; }
.opl-badge { padding: 5px 11px; border-radius: 999px; background: var(--green); color: var(--bg); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.opl-tag { margin: -6px 0 0; min-height: 1.6em; font-size: 13.5px; color: var(--muted); }
.opl-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.opl-price b { font-size: clamp(38px, 3.6vw, 54px); font-weight: 800; line-height: 1; }
.opl-price small { font-size: 13px; color: var(--muted); }
.opl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; flex: 1; align-content: start; }
.opl-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.7; }
.opl-list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.opl-btn { margin-top: 10px; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); color: inherit; font-size: 15px; font-weight: 800; transition: background-color .3s, color .3s, border-color .3s; }
.opl-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.opl-arrow { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.opl-btn:hover .opl-arrow { transform: translateX(-5px); }
.opl-card.is-hot { background: linear-gradient(160deg, var(--green), color-mix(in srgb, var(--green) 20%, transparent)); }
.opl-card.is-hot .opl-in { background: #0b0d0c; color: #f4f4ef; }
.opl-card.is-hot .opl-in::after { content: ""; position: absolute; top: -130px; left: -80px; width: 260px; height: 260px; border-radius: 50%; background: color-mix(in srgb, var(--green) 35%, transparent); filter: blur(70px); pointer-events: none; }
.opl-card.is-hot .opl-tag, .opl-card.is-hot .opl-price small { color: rgba(244, 244, 239, .66); }
.opl-card.is-hot .opl-price { border-color: rgba(255, 255, 255, .16); }
.opl-card.is-hot .opl-list svg { stroke: #5eafe8; }
.opl-card.is-hot .opl-btn { position: relative; z-index: 1; border-color: transparent; background: #3f9ce0; color: #060e14; }
.opl-card.is-hot .opl-btn:hover { background: #fff; color: #060e14; }
.opl-card.is-hot .opl-badge { background: #3f9ce0; color: #060e14; }

.ocp { padding: clamp(78px, 9vw, 120px) 0; border-top: 1px solid var(--line); background: var(--soft); }
.ocp-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.ocp-kick { margin-bottom: 10px; }
.ocp h2 { margin: 0; font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; line-height: 1.45; text-wrap: balance; }
.ocp-head > p:last-child { margin: 12px auto 0; max-width: 480px; font-size: 15px; line-height: 1.85; color: var(--muted); }
.ocp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ocp-card { display: flex; flex-direction: column; align-items: center; padding: 38px 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); text-align: center; transition: border-color .3s; }
.ocp-card:hover, .ocp-card.is-hot { border-color: var(--green); }
.ocp-level { margin-bottom: 12px; font-size: 12px; font-weight: 700; color: var(--green); }
.ocp-card h3 { margin: 0 0 20px; font-size: 24px; font-weight: 700; }
.ocp-card.is-hot h3 { font-weight: 800; }
.ocp-card ul { list-style: none; width: 100%; margin: 0; padding: 0; flex: 1; }
.ocp-card li { padding: 11px 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
.ocp-card li + li { border-top: 1px solid var(--line); }
.ocp-card.is-hot li { color: var(--ink); font-weight: 600; }
.ocp-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 52px; margin-top: 24px; padding: 0 24px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 15px; font-weight: 700; transition: border-color .3s, color .3s, background-color .3s; }
.ocp-btn:hover { border-color: var(--green); color: var(--green); }
.ocp-card.is-hot .ocp-btn { border-color: var(--green); background: var(--green); color: var(--bg); }
.ocp-card.is-hot .ocp-btn:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.ogd { position: relative; overflow: hidden; padding: clamp(70px, 8vw, 110px) 0; border-top: 1px solid var(--line); background: var(--bg); text-align: center; }
.ogd::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 100% at 50% 100%, color-mix(in srgb, var(--green) 10%, transparent), transparent 70%); pointer-events: none; }
.ogd-wrap { position: relative; }
.ogd-kick { margin-bottom: 14px; }
.ogd h2 { max-width: 680px; margin: 0 auto 22px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; line-height: 1.4; }
.ogd-wrap > p:not(.ogd-kick) { max-width: 560px; margin: 0 auto 30px; font-size: 16px; line-height: 1.9; color: var(--muted); }
.ogd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; border-radius: 10px; background: var(--green); color: var(--bg); font-size: 15px; font-weight: 800; transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.ogd-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--green) 35%, transparent); }
.opl-btn:focus-visible, .ocp-btn:focus-visible, .ogd-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

@media (max-width: 1100px) {
  .opl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ocp-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }
  .ocp-card { padding: 30px 22px; }
}
@media (max-width: 640px) {
  .opl { padding: 64px 0 56px; }
  .opl-wrap, .ocp-wrap, .ogd-wrap { padding: 0 16px; }
  .opl-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 12px; scrollbar-width: none; }
  .opl-cards::-webkit-scrollbar { display: none; }
  .opl-card { scroll-snap-align: center; }
  .ocp, .ogd { padding: 56px 0; }
}

/* ── «حرکت را ببین»: the GIF fills the whole frame, nothing behind it ── */
.gp-view { background: none; }
.gp-frame > img, .gp-frame > video, .gp-frame--still > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.gp-word { display: none; }

/* Physique Gym Pro — site shell: one header and one footer on every page.
   The header is the home page's `header.ohd` (its rules are copied from
   assets/motion-home/restore.css so pages without that file look the same).
   The footer follows the home page's «immersion» panel: a dark rounded frame
   that opens up as it scrolls in. */

/* One font for header, footer and notices on every page: the home page's own font
   files. (Pages load different fonts — home «Gym», runtime pages «Gym Sans», app
   pages «Vazirmatn» — so the header changed size from page to page.) */
@font-face { font-family: 'PGP Shell'; src: url(/assets/motion-home/font-fa.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'PGP Shell'; src: url(/assets/motion-home/font-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF; }

/* ── header (same rules as restore.css; on the home page they are already loaded) ── */
:root {
  --pc0: 249,250,249; --pc1: 0,88,156; --pc3: 234,237,235; --pc4: 198,203,199; --pc5: 16,16,15; --pc6: 93,93,91;
  --pc7: 205,209,207; --pc9: 229,232,230; --pc13: 9,9,9; --pc14: 0,86,154; --pc15: 0,86,154;
  --pc54: 212,212,212; --pc159: 38,42,39; --pc194: 240,240,240;
}
:root[data-theme="dark"] {
  --pc0: 3,5,4; --pc1: 75,160,221; --pc3: 10,14,16; --pc4: 32,39,43; --pc5: 244,244,239; --pc6: 143,143,136;
  --pc7: 28,33,37; --pc9: 14,19,15; --pc13: 255,255,255; --pc14: 117,191,242; --pc15: 39,120,181;
  --pc54: 31,31,31; --pc159: 196,206,212; --pc194: 11,11,11;
}
header.ohd, header.ohd * { box-sizing: border-box; }
header.ohd a { text-decoration: none; color: inherit; }
header.ohd button { font-family: inherit; cursor: pointer; }
header.ohd, header.ohd.compact {
  position: fixed; top: 0; right: 0; left: 0; z-index: 100; display: block; height: auto; direction: rtl;
  margin: 0; padding: 0; gap: 0; border: 0; border-radius: 0; border-bottom: 1px solid transparent;
  background: rgba(var(--pc0), .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .4s ease, border-color .4s ease;
  font-family: 'PGP Shell', Gym, sans-serif; line-height: normal; color: rgb(var(--pc5));
}
header.ohd.compact { border-bottom-color: rgba(var(--pc13), .06); background: rgba(var(--pc0), .72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.ohd-in { max-width: 1600px; margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 34px); height: 70px; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 22px); }
.ohd-brand { display: flex; align-items: center; gap: 10px; padding: 0; flex: 0 0 auto; font-family: 'PGP Shell', Gym, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: .3px; color: rgb(var(--pc5)); }
.ohd-brand img { width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; display: block; }
.ohd-name { display: grid; gap: 1px; text-align: right; }
.ohd-t { font-size: 20px; line-height: 1.15; }
.ohd-t span { color: rgb(var(--pc1)); }
.ohd-s { font-family: 'PGP Shell', Gym, sans-serif; font-size: 10.5px; font-weight: 400; color: rgb(var(--pc6)); letter-spacing: 0; line-height: 1.5; }
header.ohd nav { display: flex; align-items: center; gap: clamp(2px, 1vw, 14px); flex: 1 1 0%; justify-content: space-evenly; min-width: 0; font-size: inherit; color: inherit; }
header.ohd nav .ohd-sep, header.ohd nav .ohd-quick { display: none; }
@media (min-width: 861px) { header.ohd nav.open button.ohd-theme-row { display: none; } }
.ohd-link { position: relative; display: block; font-size: 14.5px; font-weight: 500; padding: 6px 13px 8px; border-radius: 999px; white-space: nowrap; background: transparent; color: rgb(var(--pc5)); transition: background .5s cubic-bezier(.32, .72, 0, 1), transform .5s cubic-bezier(.32, .72, 0, 1); }
header.ohd nav a.ohd-link:hover { color: rgb(var(--pc5)); }
.ohd-roll { display: block; height: 24px; overflow: hidden; }
.ohd-rin { display: block; transition: transform .55s cubic-bezier(.32, .72, 0, 1); }
.ohd-rin > span { display: block; height: 24px; line-height: 24px; }
.ohd-rin > span + span { color: rgb(var(--pc1)); }
.ohd-bar { position: absolute; bottom: 2px; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: linear-gradient(90deg, rgb(var(--pc15)), rgb(var(--pc14))); transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .4s; transform: scaleX(0); opacity: 0; }
.ohd-link:hover, .ohd-link:focus-visible { background: rgba(var(--pc1), .09); transform: translateY(-1px); }
.ohd-link:hover .ohd-rin, .ohd-link:focus-visible .ohd-rin { transform: translateY(-24px); }
.ohd-link:hover .ohd-bar, .ohd-link:focus-visible .ohd-bar { transform: scaleX(1); opacity: 1; }
.ohd-fill { display: none; flex: 1; }
header.ohd .header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ohd-search { display: flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 12px; background: rgba(var(--pc9), .8); border: 1px solid rgb(var(--pc7)); border-radius: 999px; flex: 0 1 150px; min-width: 110px; width: 150px; overflow: hidden; }
.ohd-lens { width: 12px; height: 12px; border: 1.5px solid rgb(var(--pc6)); border-radius: 50%; flex: 0 0 auto; }
.ohd-search input { flex: 1 1 0%; background: none; border: none; outline: none; color: rgb(var(--pc5)); font: inherit; font-size: 12.5px; min-width: 0; padding: 0; height: auto; box-shadow: none; -webkit-appearance: none; appearance: none; }
.ohd-search input::placeholder { color: rgb(var(--pc6)); }
.ohd-search input::-webkit-search-cancel-button { display: none; }
.ohd-search:focus-within { border-color: rgb(var(--pc1)); }
header.ohd #theme { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; font-size: 0; border-radius: 999px; border: 1px solid rgb(var(--pc7)); background: rgba(var(--pc9), .8); color: rgb(var(--pc5)); transition: transform .5s cubic-bezier(.32, .72, 0, 1), border-color .4s cubic-bezier(.32, .72, 0, 1), color .4s cubic-bezier(.32, .72, 0, 1); }
header.ohd #theme:hover { border-color: rgb(var(--pc1)); color: rgb(var(--pc1)); }
header.ohd #theme:active { transform: scale(.92); }
.ohd-moon { display: none; }
:root[data-theme="light"] .ohd-sun { display: none; }
:root[data-theme="light"] .ohd-moon { display: block; }
header.ohd .login { display: flex; align-items: center; justify-content: center; gap: 7px; width: 118px; height: 40px; padding: 0 10px; cursor: pointer; border-radius: 12px; flex: 0 0 auto; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: 0; border: 1px solid rgb(var(--pc54)); background: rgb(var(--pc194)); color: rgb(var(--pc159)); }
header.ohd #menu { display: none; }
/* «ورود» / «حساب من»: one fixed width for both, so the header never moves */
.ohd-acct { position: relative; flex: 0 0 auto; display: flex; }
header.ohd .login .ohd-caret { display: none; width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
header.ohd .login.is-me .ohd-caret { display: block; }
header.ohd .login:hover, .ohd-acct.is-open .login { border-color: rgb(var(--pc1)); }
.ohd-acct.is-open .ohd-caret { transform: rotate(180deg); }
.ohd-drop { position: absolute; top: calc(100% + 9px); left: 0; z-index: 130; min-width: 236px; display: grid; gap: 2px; padding: 8px; direction: rtl; text-align: right;
  background: rgb(var(--pc0)); border: 1px solid rgb(var(--pc7)); border-radius: 14px; box-shadow: 0 20px 44px -12px rgba(0,0,0,.35); animation: pgpDrop .16s ease; }
.ohd-drop[hidden] { display: none; }
.ohd-drop-h { display: grid; gap: 4px; padding: 8px 10px 11px; margin-bottom: 4px; border-bottom: 1px solid rgb(var(--pc7)); }
.ohd-drop-h b { font-size: 13.5px; font-weight: 700; color: rgb(var(--pc5)); }
.ohd-drop-h span { font-size: 11.5px; color: rgb(var(--pc6)); text-align: right; }
header.ohd .ohd-drop a, header.ohd .ohd-drop button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: rgb(var(--pc5)); text-align: right; cursor: pointer; }
header.ohd .ohd-drop a:hover, header.ohd .ohd-drop button:hover, header.ohd .ohd-drop a:focus-visible, header.ohd .ohd-drop button:focus-visible { background: rgb(var(--pc9)); outline: none; }
.ohd-drop i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 3px; background: rgb(var(--pc1)); }
header.ohd .ohd-drop .is-admin { color: #a86b00; }
.ohd-drop .is-admin i { background: #d18a00; }
header.ohd .ohd-drop .is-out { color: #c93636; }
.ohd-drop .is-out i { background: #d84a4a; }
:root[data-theme="dark"] header.ohd .ohd-drop .is-admin { color: #f2b84b; }
:root[data-theme="dark"] header.ohd .ohd-drop .is-out { color: #ff8080; }
.ohd-grid { display: none; }
@media (max-width: 1340px) { .ohd-search { display: none; } }
@media (max-width: 1180px) {
  header.ohd nav { display: none; }
  .ohd-fill { display: block; }
  header.ohd #menu { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(var(--pc9), .8); border: 1px solid rgb(var(--pc7)); border-radius: 8px; color: rgb(var(--pc5)); font-size: 20px; line-height: 1; }
  header.ohd nav.open { position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: 6px; justify-content: stretch; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgb(var(--pc7)); background: rgba(var(--pc0), .97); padding: 14px clamp(16px, 4vw, 24px) 18px; max-height: calc(100vh - 64px); overflow: auto; animation: pgpDrop .18s ease; }
  header.ohd nav.open .ohd-link { text-align: right; min-height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: 8px; background: rgb(var(--pc9)); border: 1px solid rgb(var(--pc7)); color: rgb(var(--pc5)); font-size: 15px; font-weight: 400; transform: none; }
  header.ohd nav.open .ohd-roll { height: auto; }
  header.ohd nav.open .ohd-rin { transform: none; }
  header.ohd nav.open .ohd-rin > span + span, header.ohd nav.open .ohd-bar { display: none; }
  header.ohd nav.open .ohd-sep { display: block; height: 1px; background: rgb(var(--pc7)); margin: 8px 0; }
  header.ohd nav.open .ohd-quick { display: flex; width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; align-items: center; text-align: right; min-height: 46px; padding: 0 14px; color: rgb(var(--pc1)); font-size: 14.5px; font-weight: 600; }
}
@media (max-width: 860px) {
  header.ohd, header.ohd.compact { background: rgba(var(--pc0), .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--pc13), .06); padding-top: env(safe-area-inset-top); }
  .ohd-in { height: 60px; gap: 10px; padding: 0 14px; }
  .ohd-brand { gap: 9px; min-width: 0; flex: 1 1 0%; }
  .ohd-brand img { width: 36px; height: 36px; }
  .ohd-name { line-height: 1.3; min-width: 0; gap: 0; }
  .ohd-t { font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; color: rgb(var(--pc5)); }
  .ohd-s { white-space: nowrap; line-height: 1.3; }
  .ohd-long, .ohd-fill { display: none; }
  header.ohd #theme, header.ohd .login { display: none; }
  header.ohd #menu { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--pc3)); border: 1px solid rgb(var(--pc4)); color: rgb(var(--pc5)); font-size: 0; }
  .ohd-burger { display: none; }
  .ohd-grid { display: block; }
  header.ohd nav.open { max-height: calc(100dvh - 60px); }
}
@keyframes pgpDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* the pages' own (older) header and footer give way to the shared ones */
.pgp-oldhdr, .pgp-oldftr { display: none !important; }
/* the page runtime pins its root to the screen height (content overflows it): let it
   wrap the page, so the footer comes after the content instead of over it */
html body #dc-root, html body #dc-root > .sc-host { height: auto; }
/* account/admin: nothing shows until the app knows who is signed in */
html.pgp-shell-wait body > :not(header):not(.sft) { visibility: hidden; }

/* ── footer: inside the «immersion» photo ───────────────────────────────────
   Desktop: a tall section with a sticky frame. --e opens the frame (scale/tilt/radius
   like the home page's immersion), --h fades its line of copy out, --c brings the
   footer content in over the photo. Phones / short screens / reduced motion: one
   static photo panel with the copy and the footer stacked. */
html { overflow-x: clip; }
/* the home page styles every <footer>; this one sets its own box */
footer.sft { padding: 0; border: 0; background: none; }
.sft { display: block; width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); align-self: center; position: relative; z-index: 3; direction: rtl; height: 290vh; height: 290svh; margin-top: 40px; font-family: 'PGP Shell', Gym, sans-serif; --e: 0; --h: 0; --c: 0; --p: 0; }
.sft *, .sft *::before, .sft *::after { box-sizing: border-box; }
.sft a { color: inherit; text-decoration: none; }
.sft-sticky { width: 100%; position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; perspective: 1200px; }
.sft-frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0b0f0d; color: #fff;
  border-radius: calc(32px * (1 - var(--e)));
  transform: scale(calc(.88 + var(--e) * .12)) rotateX(calc((1 - var(--e)) * 5deg));
  box-shadow: 0 50px 90px -40px rgba(0,0,0, calc(.45 * (1 - var(--e)) + .12)); }
.sft-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(calc(1.03 + var(--p) * .21)) translateY(calc(var(--p) * -2%)); }
.sft-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.72)), linear-gradient(0deg, rgba(0,0,0,.6), transparent 60%);
  opacity: calc(.85 + var(--c) * .15); }
.sft-shade::after { content: ''; position: absolute; inset: 0; background: rgba(4,8,6,.5); opacity: var(--c); }
.sft-hero { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 9vw;
  opacity: calc(1 - var(--h)); transform: translateY(calc(var(--h) * -40px)); pointer-events: none; }
.sft-hero > * { pointer-events: auto; }
.sft-eye { margin: 0; font-size: 10px; letter-spacing: 2px; color: #bcd7eb; }
.sft-hero h2 { margin: 6px 0 0; font-size: clamp(38px, 6.5vw, 95px); line-height: 1.45; font-weight: 800; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.sft-hero h2 span, .sft-content h2 span, .sft-brand b { color: #54aced; }
.sft-hero > p:not(.sft-eye) { margin: 8px 0 0; font-size: 14px; line-height: 2; color: #d0d9e0; }
.sft-cta { display: inline-flex; margin-top: 22px; padding: 12px 22px; border-radius: 999px; background: #54aced; color: #091926 !important; font-weight: 800; font-size: 14px; }
.sft-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(80px, 9vh, 120px) clamp(24px, 6vw, 96px) clamp(28px, 5vh, 56px);
  color: #f3f7f3; text-shadow: 0 2px 16px rgba(0,0,0,.4); pointer-events: none; }
.sft-content [data-sft-i] { --o: clamp(0, calc(var(--c) * 1.8 - var(--i) * .1), 1); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 28px)); }
.sft.is-live .sft-content { pointer-events: auto; }
.sft.is-live .sft-hero > * { pointer-events: none; }
.sft-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 72px); }
.sft-intro { max-width: 440px; }
.sft-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.sft-brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.sft-content h2 { margin: 22px 0 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.3; font-weight: 800; color: #fff; }
.sft-intro > p { margin: 10px 0 0; font-size: 14.5px; line-height: 2; color: #d6dee3; }
.sft-form { display: flex; gap: 8px; margin-top: 20px; text-shadow: none; }
.sft-form input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 14px; outline: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-appearance: none; appearance: none; }
.sft-form input::placeholder { color: rgba(255,255,255,.65); }
.sft-form input:focus { border-color: #54aced; }
.sft-form input::-webkit-search-cancel-button { display: none; }
.sft-form button { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #54aced; color: #091926; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .3s ease; }
.sft-form button:hover { background: #fff; }
.sft-form svg, .sft-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sft-cols h3 { margin: 0; font-size: 15px; font-weight: 800; color: #fff; }
.sft-cols ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.sft-cols li { font-size: 14px; line-height: 1.8; color: #d0d8dd; }
.sft-cols a { color: #d0d8dd; transition: color .25s ease; }
.sft-cols a:hover, .sft-cols a:focus-visible { color: #54aced; }
.sft-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(28px, 5vh, 52px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); }
.sft-bottom p { margin: 0; font-size: 13.5px; color: #c6ced4; }
.sft-social { display: flex; gap: 8px; text-shadow: none; }
.sft-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #e6ebee; transition: color .25s ease, border-color .25s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sft-social a:hover, .sft-social a:focus-visible { color: #54aced; border-color: rgba(84,172,237,.6); }
.sft-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.14); direction: ltr; }
.sft-progress i { display: block; height: 100%; background: #54aced; transform-origin: left; transform: scaleX(var(--p)); }
.sft :focus-visible { outline: 2px solid #54aced; outline-offset: 3px; }
.sft-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* phones, short screens, reduced motion: one static photo panel */
@media (max-width: 860px), (max-height: 640px), (prefers-reduced-motion: reduce) {
  footer.sft { height: auto; margin-top: 24px; padding: 0 8px 8px; }
  .sft-frame { width: 100%; }
  .sft-sticky { position: relative; height: auto; display: block; overflow: visible; perspective: none; }
  .sft-frame { height: auto; border-radius: 24px; transform: none; }
  .sft-img { transform: none; }
  .sft-shade::after { opacity: .55; }
  .sft-hero { position: relative; inset: auto; padding: 56px 24px 8px; opacity: 1; transform: none; }
  .sft-hero h2 { font-size: 40px; }
  .sft-content { position: relative; inset: auto; padding: 24px 24px 28px; pointer-events: auto; }
  .sft-content [data-sft-i] { --o: 1; }
  .sft-progress { display: none; }
  .sft-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sft-cols > div:last-child { grid-column: 1 / -1; }
  .sft-form { flex-direction: column; }
  .sft-form button { justify-content: center; }
  .sft-bottom { flex-direction: column; align-items: flex-start; }
}
/* phones: room for the app's bottom tab bar */
@media (max-width: 860px) { html.pgp-shell .sft { padding-bottom: 96px; } }
/* ── plain footer (every page but home): transparent, no photo, theme colours ──
   Same content and type as the home footer; on a short page it sits at the bottom
   of the screen (--push, set by shell.js). Fades up when it comes into view. */
footer.sft.sft--plain { height: auto; margin-top: calc(56px + var(--push, 0px)); padding: 0; background: transparent; border: 0; border-top: 1px solid rgb(var(--pc7)); color: rgb(var(--pc5)); }
footer.sft.sft--plain .sft-content { position: static; inset: auto; display: block; max-width: 1600px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) 28px; color: rgb(var(--pc5)); text-shadow: none; pointer-events: auto; }
.sft--plain .sft-content [data-sft-i] { --o: 1; opacity: 1; transform: none; }
html.sft-anim .sft--plain .sft-content [data-sft-i] { transition: opacity .7s ease calc(var(--i) * 60ms), transform .9s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 60ms); }
html.sft-anim .sft--plain:not(.is-in) .sft-content [data-sft-i] { opacity: 0; transform: translateY(18px); }
.sft--plain .sft-content h2, .sft--plain .sft-cols h3 { color: rgb(var(--pc5)); }
.sft--plain .sft-content h2 span, .sft--plain .sft-brand b { color: rgb(var(--pc1)); }
.sft--plain .sft-brand img { filter: none; }
.sft--plain .sft-intro > p, .sft--plain .sft-cols li, .sft--plain .sft-cols a, .sft--plain .sft-bottom p { color: rgb(var(--pc6)); }
.sft--plain .sft-cols a:hover, .sft--plain .sft-cols a:focus-visible { color: rgb(var(--pc1)); }
.sft--plain .sft-form input { border-color: rgb(var(--pc7)); background: rgba(var(--pc9), .7); color: rgb(var(--pc5)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sft--plain .sft-form input::placeholder { color: rgb(var(--pc6)); }
.sft--plain .sft-form input:focus { border-color: rgb(var(--pc1)); }
.sft--plain .sft-form button { background: rgb(var(--pc1)); color: rgb(var(--pc0)); }
.sft--plain .sft-form button:hover { background: rgb(var(--pc5)); color: rgb(var(--pc0)); }
.sft--plain .sft-bottom { border-top-color: rgb(var(--pc7)); }
.sft--plain .sft-social a { border-color: rgb(var(--pc7)); background: transparent; color: rgb(var(--pc6)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sft--plain .sft-social a:hover, .sft--plain .sft-social a:focus-visible { color: rgb(var(--pc1)); border-color: rgb(var(--pc1)); }
.sft--plain :focus-visible { outline-color: rgb(var(--pc1)); }
@media (max-width: 860px) { footer.sft.sft--plain .sft-content { padding: 36px 16px 24px; } }
@media (prefers-reduced-motion: reduce) { html.sft-anim .sft--plain:not(.is-in) .sft-content [data-sft-i] { opacity: 1; transform: none; } }

/* ── new-version notice (like Hariel Store's): a bar sliding in at the top ──── */
.pgp-upd { position: fixed; z-index: 2147483000; top: 12px; left: 50%; transform: translate(-50%, -140%); transition: transform .45s cubic-bezier(.2, .9, .25, 1); direction: rtl;
  display: flex; align-items: center; gap: 14px; width: min(560px, calc(100vw - 24px)); padding: 12px 14px 12px 12px; border-radius: 14px;
  background: #fff; color: #1f2937; border: 1px solid rgba(15,23,42,.12); box-shadow: 0 18px 44px -12px rgba(15,23,42,.35), 0 2px 6px rgba(15,23,42,.08);
  font-family: 'PGP Shell', Gym, sans-serif; line-height: normal; text-align: right; }
.pgp-upd.is-on { transform: translate(-50%, 0); }
.pgp-upd__ic { width: 42px; height: 42px; flex: none; align-self: flex-start; border-radius: 11px; display: grid; place-items: center; background: #0b0f0d; }
.pgp-upd__ic img { width: 30px; height: 30px; object-fit: contain; display: block; }
.pgp-upd__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pgp-upd__t b { font-size: 13.5px; font-weight: 900; }
.pgp-upd__t > span { font-size: 11.5px; font-weight: 600; color: #5f6368; line-height: 1.7; }
.pgp-upd__t ul { margin: 4px 0 0; padding: 0 16px 0 0; font-size: 11.5px; font-weight: 700; color: #3c4043; line-height: 1.8; max-height: 7.4em; overflow: auto; }
.pgp-upd__t li::marker { color: #00589c; }
.pgp-upd__b { display: flex; gap: 8px; flex: none; }
.pgp-upd button { font-family: inherit; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; }
.pgp-upd__go { background: #00589c; color: #fff; border: 1px solid #00589c; }
.pgp-upd__go:hover { background: #004d86; }
.pgp-upd__go:disabled { opacity: .75; cursor: wait; }
.pgp-upd__no { background: transparent; color: #00589c; border: 1px solid rgba(0,88,156,.35); }
.pgp-upd__no:hover { background: #eff5fa; }
.pgp-upd :focus-visible { outline: 2px solid #00589c; outline-offset: 2px; }
:root[data-theme="dark"] .pgp-upd { background: #111417; color: #eef3ef; border-color: rgba(255,255,255,.12); box-shadow: 0 18px 44px -12px rgba(0,0,0,.7); }
:root[data-theme="dark"] .pgp-upd__t > span { color: #9aa1a5; }
:root[data-theme="dark"] .pgp-upd__t ul { color: #c4cace; }
:root[data-theme="dark"] .pgp-upd__t li::marker { color: #54aced; }
:root[data-theme="dark"] .pgp-upd__go { background: #54aced; border-color: #54aced; color: #091926; }
:root[data-theme="dark"] .pgp-upd__go:hover { background: #7fc2f3; }
:root[data-theme="dark"] .pgp-upd__no { color: #54aced; border-color: rgba(84,172,237,.35); }
:root[data-theme="dark"] .pgp-upd__no:hover { background: rgba(84,172,237,.08); }
@media (max-width: 520px) { .pgp-upd { flex-wrap: wrap; } .pgp-upd__t { flex-basis: calc(100% - 56px); } .pgp-upd__b { width: 100%; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .pgp-upd { transition: none; } }

/* ── plans: spotlight cards (the landing's original pricing cards) ─────────── */
.opl-card { --x: 50%; --y: 50%; }
.opl-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(360px circle at var(--x) var(--y), rgba(84,172,237,.9), transparent 45%); }
.opl-cards:hover .opl-card::before { opacity: 1; }
.opl-card .opl-in::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--x) var(--y), rgba(84,172,237,.08), transparent 50%); }
.opl-card:hover .opl-in::before { opacity: 1; }
html.sft-anim .opl-card:not(.is-in) { opacity: 0; transform: translateY(40px); }
html.sft-anim .opl-card { transition: opacity .8s ease var(--d, 0s), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { html.sft-anim .opl-card:not(.is-in) { opacity: 1; transform: none; } }