.page-home *,
.page-home *::before,
.page-home *::after {
  box-sizing: border-box;
}

.page-home {
  --ph-gold: #FFD700;
  --ph-title-xxl: clamp(3.4rem, 13vw, 8.6rem);
  --ph-title-xl: clamp(1.8rem, 5vw, 3rem);
  position: relative;
  background: var(--color-night);
  color: var(--color-paper);
  overflow-x: hidden;
}

.ph-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.page-home .ph-section {
  padding: 4rem 0;
}

.ph-section-head {
  max-width: 48em;
  margin-bottom: 2.25rem;
}

.page-home .ph-section-head .kicker {
  color: var(--color-gold);
  font-size: .72rem;
  letter-spacing: .2em;
  margin-bottom: .6rem;
}

.ph-title {
  font-family: var(--font-heading);
  font-size: var(--ph-title-xl);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .02em;
  margin: 0 0 .8rem;
  color: var(--color-paper);
}

.ph-lead {
  font-size: .96rem;
  line-height: 1.78;
  color: var(--color-muted);
  margin: 0;
}

.ph-media-caption {
  display: block;
  padding: .65rem .9rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--color-cyan);
  background: rgba(10, 11, 18, .88);
}

.ph-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-night);
}

.ph-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ph-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  display: block;
}

.ph-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 11, 18, .74) 0%, rgba(10, 11, 18, .82) 42%, var(--color-night) 100%),
    linear-gradient(90deg, rgba(10, 11, 18, .66) 0%, rgba(10, 11, 18, .22) 100%);
}

.ph-hero__shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.ph-hero__shape--a {
  width: 44vw;
  height: 44vw;
  min-width: 260px;
  min-height: 260px;
  top: -8%;
  right: -6%;
  background: linear-gradient(135deg, rgba(168, 85, 247, .5), rgba(168, 85, 247, .06));
  clip-path: polygon(38% 0, 100% 0, 92% 78%, 0 100%);
}

.ph-hero__shape--b {
  width: 32vw;
  height: 32vw;
  min-width: 170px;
  min-height: 170px;
  bottom: 4%;
  left: -5%;
  background: linear-gradient(45deg, rgba(0, 229, 255, .26), rgba(0, 229, 255, .03));
  clip-path: polygon(0 24%, 100% 0, 86% 100%, 12% 82%);
}

.ph-hero__scanline {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, .05) 0,
    rgba(0, 0, 0, .05) 1px,
    transparent 1px,
    transparent 4px
  );
}

.ph-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: calc(var(--header-h) + 1.6rem);
  padding-bottom: 4rem;
}

.page-home .ph-hero .kicker {
  color: var(--color-cyan);
  font-size: .78rem;
  letter-spacing: .2em;
  margin-bottom: 1rem;
}

.ph-hero__title {
  font-family: var(--font-heading);
  font-size: var(--ph-title-xxl);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  color: var(--color-paper);
  text-shadow:
    -1px -1px 0 rgba(0, 229, 255, .32),
    1px 1px 0 rgba(168, 85, 247, .3),
    0 0 32px rgba(168, 85, 247, .36),
    0 0 80px rgba(0, 229, 255, .16);
}

.ph-hero__title-sub {
  display: block;
  margin-top: .42em;
  font-size: clamp(1rem, 3.5vw, 2rem);
  letter-spacing: .16em;
  color: var(--color-gold);
  font-family: var(--font-heading);
  text-shadow: 0 0 18px rgba(255, 215, 0, .3);
  text-transform: none;
}

.ph-hero__lead {
  max-width: 36em;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  line-height: 1.82;
  color: var(--color-muted);
  margin: 0 0 2.2rem;
}

.ph-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 3rem;
}

.ph-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--color-gold);
  text-decoration: none;
}

.ph-hero__scroll::after {
  content: "";
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), rgba(255, 215, 0, 0));
  transition: width .3s;
}

.ph-hero__scroll:hover::after {
  width: 64px;
}

.ph-guide {
  position: relative;
  background: var(--color-deep);
}

.ph-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(168, 85, 247, .03) 0,
    rgba(168, 85, 247, .03) 1px,
    transparent 1px,
    transparent 12px
  );
  pointer-events: none;
}

.ph-guide .ph-container {
  position: relative;
  z-index: 1;
}

.ph-guide__grid {
  display: grid;
  gap: 1rem;
}

.ph-guide__card {
  position: relative;
  display: block;
  background: var(--color-night);
  border: 1px solid rgba(168, 85, 247, .16);
  border-radius: var(--radius);
  padding: 1.65rem 1.5rem 1.4rem;
  text-decoration: none;
  color: var(--color-paper);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}

.ph-guide__card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-purple), var(--color-cyan));
  opacity: .65;
}

.ph-guide__card:hover {
  border-color: var(--color-purple);
  box-shadow: var(--glow-purple);
  transform: translateY(-2px);
}

.ph-guide__card:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
}

.ph-guide__index {
  display: block;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--color-gold);
  letter-spacing: .14em;
  margin-bottom: .7rem;
}

.ph-guide__title {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: .02em;
  margin: 0 0 .5rem;
}

.ph-guide__desc {
  font-size: .9rem;
  line-height: 1.68;
  color: var(--color-muted);
  margin: 0;
  padding-right: 1rem;
}

.ph-guide__arrow {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  font-size: 1.1rem;
  color: var(--color-cyan);
  opacity: .55;
  transition: opacity .25s, transform .25s;
}

.ph-guide__card:hover .ph-guide__arrow {
  opacity: 1;
  transform: translateX(4px);
}

.ph-versions {
  position: relative;
  background: var(--color-night);
}

.ph-versions__ghost {
  position: absolute;
  top: 1.6rem;
  right: -0.4rem;
  font-family: var(--font-heading);
  font-size: clamp(9rem, 30vw, 20rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(168, 85, 247, .16);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.ph-versions .ph-container {
  position: relative;
  z-index: 1;
}

.ph-versions__grid {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.ph-versions__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, .14);
  box-shadow: var(--shadow);
}

.ph-versions__media img {
  width: 100%;
  height: auto;
  display: block;
}

.ph-versions__cards {
  display: grid;
  gap: .9rem;
}

.ph-version-card {
  position: relative;
  background: linear-gradient(155deg, var(--color-deep) 0%, var(--color-night) 100%);
  border: 1px solid rgba(168, 85, 247, .16);
  border-left: 3px solid var(--color-purple);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.2rem 1.1rem;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}

.ph-version-card:hover {
  border-color: var(--color-purple);
  box-shadow: var(--glow-purple);
  transform: translateY(-2px);
}

.ph-version-card__tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--color-gold);
  text-transform: uppercase;
}

.ph-version-card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.7rem;
  color: var(--color-cyan);
  margin: .3rem 0 .6rem;
  line-height: 1.1;
}

.ph-version-card p {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0 0 .7rem;
}

.ph-version-card__diff {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--color-purple);
}

.ph-versions__cta,
.ph-steps__cta,
.ph-rooms__cta,
.ph-updates__cta {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.ph-steps {
  background: var(--color-deep);
}

.ph-steps__layout {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.ph-steps__visual {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, .12);
  box-shadow: var(--shadow);
}

.ph-steps__visual img {
  width: 100%;
  height: auto;
  display: block;
}

.ph-steps__list {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.ph-step {
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ph-step__summary {
  display: flex;
  align-items: center;
  gap: .9rem;
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 0;
}

.ph-step__summary::-webkit-details-marker {
  display: none;
}

.ph-step__summary:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.ph-step__index {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--color-gold);
}

.ph-step__title {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--color-paper);
}

.ph-step__mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 229, 255, .35);
  border-radius: 50%;
  color: var(--color-cyan);
  font-size: .95rem;
  transition: transform .25s;
}

.ph-step[open] .ph-step__mark {
  transform: rotate(45deg);
}

.ph-step__desc {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--color-muted);
  margin: 0 0 1.05rem;
  padding-left: 2.1rem;
}

.ph-steps__note {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--color-muted);
  letter-spacing: .04em;
}

.ph-rooms {
  position: relative;
  overflow: hidden;
  background: var(--color-night);
}

.ph-rooms__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .2;
}

.ph-rooms__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ph-rooms__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-night) 0%, rgba(10, 11, 18, .82) 55%, var(--color-night) 100%);
}

.ph-rooms .ph-container {
  position: relative;
  z-index: 1;
}

.ph-rooms__grid {
  display: grid;
  gap: 1rem;
}

.ph-room-card {
  background: rgba(17, 22, 41, .9);
  border: 1px solid rgba(0, 229, 255, .14);
  border-radius: var(--radius);
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}

.ph-room-card:hover {
  background: var(--color-panel);
  border-color: var(--color-cyan);
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

.ph-room-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .02em;
  margin: 0 0 .4rem;
  color: var(--color-paper);
}

.ph-room-card__desc {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--color-muted);
  margin: 0 0 1.1rem;
}

.ph-room-card__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
}

.ph-room-card__meta div {
  display: flex;
  gap: .5rem;
  align-items: baseline;
}

.ph-room-card__meta dt {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--color-muted);
}

.ph-room-card__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--color-cyan);
}

.ph-updates {
  background: var(--color-deep);
}

.ph-updates__list {
  display: grid;
  gap: 1rem;
}

.ph-update-item {
  background: var(--color-night);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: border-color .25s;
}

.ph-update-item:hover {
  border-color: rgba(168, 85, 247, .35);
}

.ph-update-item h3 {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.5;
}

.ph-update-item h3 a {
  color: var(--color-paper);
  text-decoration: none;
  transition: color .2s;
}

.ph-update-item h3 a:hover {
  color: var(--color-cyan);
}

.ph-update-item h3 a:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.ph-update-item__excerpt {
  font-size: .88rem;
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
}

.ph-update-item__time {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--color-gold);
}

.ph-trust {
  position: relative;
  background:
    radial-gradient(circle at 18% 82%, rgba(168, 85, 247, .16), transparent 52%),
    radial-gradient(circle at 84% 18%, rgba(0, 229, 255, .12), transparent 42%),
    var(--color-night);
}

.ph-trust__panel {
  background: var(--color-deep);
  border: 1px solid rgba(255, 215, 0, .14);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
}

.page-home .ph-trust .kicker {
  color: var(--color-cyan);
  margin-bottom: .6rem;
}

.ph-trust__panel > p {
  color: var(--color-muted);
  line-height: 1.8;
  font-size: .95rem;
  margin: 0 0 1.5rem;
  max-width: 42em;
}

.ph-trust__contact {
  display: grid;
  gap: .75rem;
  margin: 0 0 1.5rem;
}

.ph-trust__contact div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.ph-trust__contact dt {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.ph-trust__contact dd {
  margin: 0;
  font-size: .95rem;
  color: var(--color-paper);
  font-family: var(--font-mono);
}

.ph-trust__icp {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--color-gold);
  margin: 0 0 1.2rem;
}

@media (min-width: 768px) {
  .page-home .ph-section {
    padding: 5rem 0;
  }

  .ph-hero__inner {
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 5rem;
  }

  .ph-guide__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.15rem;
  }

  .ph-rooms__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
  }

  .ph-updates__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
  }

  .ph-trust__panel {
    padding: 2.5rem;
  }

  .ph-trust__contact {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .ph-versions__grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 2.5rem;
  }

  .ph-versions__media {
    margin: 0;
  }

  .ph-steps__layout {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 2.5rem;
  }

  .ph-hero__actions .btn {
    padding: .85rem 1.7rem;
  }
}

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