/* =====================================================
   HALLOWEEN FAMILY FEUD LANDING PAGE
   Familio Games
   ===================================================== */

.hphf-page {
  --hphf-orange: #ff8a1f;
  --hphf-orange-bright: #ffa52f;
  --hphf-yellow: #ffc107;

  --hphf-purple: #7c4dff;
  --hphf-purple-deep: #29134d;

  --hphf-bg: #080810;
  --hphf-bg-soft: #0d0d18;

  --hphf-text: #ffffff;
  --hphf-muted: rgba(255, 255, 255, 0.67);

  --hphf-border: rgba(255, 255, 255, 0.09);

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(109, 57, 181, 0.10),
      transparent 31%
    ),
    #080810;

  color: var(--hphf-text);
}


.hphf-wrap {
  position: relative;

  width: min(1320px, calc(100% - 40px));

  margin: 0 auto;
}


/* =====================================================
   HERO
   ===================================================== */

.hphf-hero {
  position: relative;

  min-height: 760px;

  display: flex;
  align-items: center;

  padding: 82px 0 135px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 73% 46%,
      rgba(117, 56, 191, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 17% 20%,
      rgba(255, 127, 31, 0.055),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #090910 0%,
      #0a0911 68%,
      #0d0d16 100%
    );
}


.hphf-hero::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 170px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(13, 13, 22, 0.96)
    );

  pointer-events: none;
}


.hphf-hero-grid {
  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    minmax(0, 0.88fr)
    minmax(520px, 1.12fr);

  align-items: center;

  gap: clamp(54px, 7vw, 105px);
}


/* =====================================================
   HERO COPY
   ===================================================== */

.hphf-season-badge {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 22px;
  padding: 8px 13px;

  border: 1px solid rgba(255, 138, 31, 0.28);
  border-radius: 999px;

  background: rgba(255, 138, 31, 0.07);

  color: #ffb066;

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}


.hphf-season-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--hphf-orange);

  box-shadow:
    0 0 10px rgba(255, 138, 31, 0.78);
}


.hphf-hero-copy h1 {
  max-width: 720px;

  margin: 0;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: clamp(3.1rem, 5.5vw, 5.8rem);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.06em;
}


.hphf-hero-copy h1 span {
  color: var(--hphf-orange-bright);
}


.hphf-hero-lead {
  max-width: 660px;

  margin: 26px 0 0;

  color: rgba(255, 255, 255, 0.71);

  font-size: clamp(1.02rem, 1.35vw, 1.17rem);
  line-height: 1.78;
}


.hphf-hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 11px;

  margin-top: 31px;
}


.hphf-page .hphf-btn-primary,
.hphf-page .hphf-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 11px 20px;

  border-radius: 999px;

  font-size: 0.91rem;
  font-weight: 700;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.hphf-page .hphf-btn-primary {
  border: 1px solid var(--hphf-orange);

  background:
    linear-gradient(
      135deg,
      #ff9c34,
      #ff7a17
    );

  color: #15100a;

  box-shadow:
    0 10px 30px rgba(255, 122, 23, 0.18);
}


.hphf-page .hphf-btn-primary:hover {
  transform: translateY(-2px);

  color: #15100a;

  box-shadow:
    0 14px 34px rgba(255, 122, 23, 0.27);
}


.hphf-page .hphf-btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.16);

  background: rgba(255, 255, 255, 0.035);

  color: rgba(255, 255, 255, 0.91);
}


.hphf-page .hphf-btn-secondary:hover {
  transform: translateY(-2px);

  border-color: rgba(255, 255, 255, 0.28);

  background: rgba(255, 255, 255, 0.07);

  color: #ffffff;
}


/* =====================================================
   PROOF LINE
   ===================================================== */

.hphf-hero-proof {
  display: flex;
  flex-wrap: wrap;

  gap: 9px 19px;

  margin-top: 24px;
}


.hphf-hero-proof span {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 0.78rem;
  font-weight: 600;
}


.hphf-hero-proof span::before {
  content: "";

  width: 5px;
  height: 5px;

  flex: 0 0 5px;

  border-radius: 50%;

  background: var(--hphf-orange);

  box-shadow:
    0 0 8px rgba(255, 138, 31, 0.6);
}


/* =====================================================
   PRODUCT VISUAL
   ===================================================== */

.hphf-hero-product {
  position: relative;

  min-width: 0;

  padding: 44px 0 52px;
}


.hphf-product-glow {
  position: absolute;

  width: 80%;
  height: 70%;

  left: 10%;
  top: 17%;

  border-radius: 50%;

  background:
    rgba(111, 52, 183, 0.22);

  filter: blur(80px);

  pointer-events: none;
}


.hphf-screen {
  position: relative;

  z-index: 3;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.14);

  border-radius: 24px;

  background: #0c0c13;

  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 138, 31, 0.03),
    0 0 60px rgba(90, 40, 150, 0.13);

  transform:
    perspective(1300px)
    rotateY(-3deg)
    rotateX(1deg);
}


.hphf-screen-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 43px;

  padding: 0 16px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.07);

  background:
    rgba(13, 13, 20, 0.98);
}


.hphf-screen-dots {
  display: flex;

  gap: 6px;
}


.hphf-screen-dots span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.18);
}


.hphf-screen-dots span:first-child {
  background: rgba(255, 124, 36, 0.73);
}


.hphf-screen-label {
  color: rgba(255, 255, 255, 0.36);

  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}


.hphf-screen-image {
  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #08080d;
}


.hphf-screen-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =====================================================
   FLOATING FEATURE CHIPS
   ===================================================== */

.hphf-feature-chip {
  position: absolute;

  z-index: 6;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 11px 14px;

  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 15px;

  background:
    rgba(17, 16, 25, 0.93);

  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.4);

  backdrop-filter: blur(12px);
}


.hphf-feature-chip-strike {
  left: -34px;
  bottom: 12px;
}


.hphf-feature-chip-sound {
  right: -26px;
  top: 12px;
}


.hphf-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 10px;

  background:
    rgba(255, 138, 31, 0.09);

  font-size: 1.06rem;
}


.hphf-feature-chip strong,
.hphf-feature-chip small {
  display: block;
}


.hphf-feature-chip strong {
  color: rgba(255, 255, 255, 0.93);

  font-size: 0.76rem;
  line-height: 1.25;
}


.hphf-feature-chip small {
  margin-top: 2px;

  color: rgba(255, 255, 255, 0.43);

  font-size: 0.65rem;
}


/* =====================================================
   PRODUCT PUMPKINS
   ===================================================== */

.hphf-product-pumpkin {
  position: absolute;

  z-index: 5;

  height: auto;

  filter:
    drop-shadow(0 15px 18px rgba(0, 0, 0, 0.62));
}


.hphf-product-pumpkin-one {
  width: 92px;

  right: -30px;
  bottom: 18px;

  transform: rotate(8deg);
}


.hphf-product-pumpkin-two {
  width: 62px;

  right: 48px;
  bottom: 4px;

  opacity: 0.72;

  transform: rotate(-7deg);
}


/* =====================================================
   HERO DECORATION
   ===================================================== */

.hphf-hero-web {
  position: absolute;

  z-index: 1;

  width: clamp(170px, 17vw, 300px);

  height: auto;

  opacity: 0.16;

  pointer-events: none;
}


.hphf-hero-web-left {
  left: -72px;
  top: -57px;
}


.hphf-hero-web-right {
  right: -70px;
  top: -58px;

  transform: scaleX(-1);
}


.hphf-hero-spider {
  position: absolute;

  z-index: 2;

  width: clamp(31px, 2.6vw, 44px);

  right: 6.5%;
  top: 116px;

  opacity: 0.63;

  filter:
    drop-shadow(0 9px 10px rgba(0, 0, 0, 0.55));

  animation:
    hphfSpiderFloat 4.6s ease-in-out infinite;

  pointer-events: none;
}


@keyframes hphfSpiderFloat {

  0%,
  100% {
    transform:
      translateY(-4px)
      rotate(-3deg);
  }

  50% {
    transform:
      translateY(8px)
      rotate(3deg);
  }

}


.hphf-hero-bats {
  position: absolute;

  z-index: 1;

  width: clamp(90px, 9vw, 150px);

  left: 45%;
  top: 74px;

  opacity: 0.16;

  pointer-events: none;
}


/* =====================================================
   FIRST CONTENT SECTION
   ===================================================== */

.hphf-intro-section {
  position: relative;

  padding: 115px 0 125px;

  text-align: center;

  border-top: 1px solid rgba(255, 255, 255, 0.045);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);

  background:
    linear-gradient(
      180deg,
      #0d0d16,
      #090910
    );
}


.hphf-kicker {
  margin: 0 0 12px;

  color: var(--hphf-orange);

  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


.hphf-intro-section h2 {
  max-width: 800px;

  margin: 0 auto;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
}


.hphf-intro-section h2 span {
  color: var(--hphf-orange-bright);
}


.hphf-section-lead {
  max-width: 720px;

  margin: 20px auto 0;

  color: var(--hphf-muted);

  font-size: 1rem;
  line-height: 1.78;
}

/* =====================================================
   HALLOWEEN EDITION FEATURES
   ===================================================== */

.hphf-features-section {
  position: relative;

  padding: 110px 0 125px;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(113, 58, 180, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 8% 75%,
      rgba(255, 133, 31, 0.05),
      transparent 28%
    ),
    #090910;
}


/* ---------- SECTION HEADING ---------- */

.hphf-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;

  margin-bottom: 52px;
}


.hphf-section-heading > div {
  max-width: 650px;
}


.hphf-section-heading h2 {
  margin: 0;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.35rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
}


.hphf-section-heading > p {
  max-width: 500px;

  margin: 0;

  color: var(--hphf-muted);

  font-size: 0.96rem;
  line-height: 1.75;
}


/* =====================================================
   FEATURE GRID
   ===================================================== */

.hphf-feature-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
}


/* =====================================================
   FEATURE CARD
   ===================================================== */

.hphf-feature-card {
  position: relative;

  min-height: 285px;

  overflow: hidden;

  padding: 27px;

  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(22, 21, 32, 0.97),
      rgba(13, 13, 21, 0.98)
    );

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.16);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}


.hphf-feature-card:hover {
  transform: translateY(-4px);

  border-color:
    rgba(255, 142, 44, 0.22);

  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.26);
}


/* subtle seasonal glows */

.hphf-feature-card-orange {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 133, 31, 0.11),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      rgba(24, 21, 29, 0.98),
      rgba(13, 13, 21, 0.98)
    );
}


.hphf-feature-card-purple {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(124, 77, 255, 0.12),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      rgba(22, 21, 32, 0.98),
      rgba(13, 13, 21, 0.98)
    );
}


/* =====================================================
   CARD ICON
   ===================================================== */

.hphf-feature-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;

  margin-bottom: 24px;

  border: 1px solid rgba(255, 138, 31, 0.14);
  border-radius: 15px;

  background:
    rgba(255, 138, 31, 0.055);
}


.hphf-feature-card-icon img {
  display: block;

  width: 37px;
  height: 37px;

  object-fit: contain;
}


.hphf-feature-card-icon-text {
  font-size: 1.45rem;
}


/* =====================================================
   CARD NUMBER
   ===================================================== */

.hphf-feature-number {
  position: absolute;

  right: 23px;
  top: 22px;

  color: rgba(255, 255, 255, 0.12);

  font-family: Sora, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}


/* =====================================================
   CARD COPY
   ===================================================== */

.hphf-feature-card h3 {
  margin: 0;

  color: rgba(255, 255, 255, 0.96);

  font-family: Sora, system-ui, sans-serif;
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.025em;
}


.hphf-feature-card p {
  margin: 13px 0 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.88rem;
  line-height: 1.72;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1080px) {

  .hphf-hero {
    min-height: 0;
  }

  .hphf-hero-grid {
    grid-template-columns: 1fr;

    gap: 26px;
  }

  .hphf-hero-copy {
    max-width: 800px;
  }

  .hphf-hero-product {
    max-width: 820px;

    margin: 0 auto;

    width: 100%;
  }

  .hphf-section-heading {
    align-items: flex-start;
    flex-direction: column;

    gap: 18px;
  }

  .hphf-feature-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 700px) {

  .hphf-wrap {
    width: calc(100% - 28px);
  }

  .hphf-hero {
    padding: 52px 0 65px;
  }

  .hphf-hero-copy h1 {
    font-size: clamp(2.65rem, 13vw, 4rem);
  }

  .hphf-hero-actions {
    flex-direction: column;
  }

  .hphf-page .hphf-btn-primary,
  .hphf-page .hphf-btn-secondary {
    width: 100%;
  }

  .hphf-hero-proof {
    gap: 8px 15px;
  }

  .hphf-hero-product {
    padding-top: 28px;
  }

  .hphf-screen {
    border-radius: 18px;

    transform: none;
  }

  .hphf-feature-chip-sound {
    right: -5px;
    top: 0;
  }

  .hphf-feature-chip-strike {
    left: -5px;
    bottom: 17px;
  }

  .hphf-feature-chip {
    padding: 8px 10px;
  }

  .hphf-feature-icon {
    width: 29px;
    height: 29px;

    font-size: 0.9rem;
  }

  .hphf-feature-chip small {
    display: none;
  }

  .hphf-product-pumpkin-one {
    width: 65px;

    right: -12px;
  }

  .hphf-product-pumpkin-two {
    width: 44px;

    right: 39px;
  }

  .hphf-hero-web {
    width: 150px;
  }

  .hphf-hero-bats,
  .hphf-hero-spider {
    opacity: 0.10;
  }

  .hphf-intro-section {
    padding: 68px 0 72px;
  }

  .hphf-features-section {
    padding: 20px 0 72px;
  }

  .hphf-feature-grid {
    grid-template-columns: 1fr;
  }

  .hphf-feature-card {
    min-height: 0;

    padding: 24px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .hphf-hero-spider {
    animation: none;
  }

}

/* =====================================================
   INTERACTIVE HALLOWEEN DEMO
   ===================================================== */

.hphf-live-demo {
  padding: 110px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(113, 58, 180, 0.12),
      transparent 30%
    ),
    #0c0b14;
}


.hphf-live-demo-header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(320px, 0.9fr);

  align-items: end;

  gap: 70px;
}


.hphf-live-demo-header h2,
.hphf-questions-copy h2,
.hphf-center-heading h2,
.hphf-custom-copy h2,
.hphf-access-copy h2,
.hphf-faq-intro h2 {
  margin: 0;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: clamp(2.1rem, 3.8vw, 3.7rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
}


.hphf-live-demo-header > p {
  margin: 0;

  color: var(--hphf-muted);

  line-height: 1.75;
}


.hphf-demo-launch {
  display: flex;
  align-items: center;

  gap: 15px;

  margin-top: 38px;
}


.hphf-demo-launch-button {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  padding: 13px 21px;

  border: 1px solid var(--hphf-orange);
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #ffa13b,
      #ff7817
    );

  color: #171008;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 12px 30px rgba(255, 125, 28, 0.18);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.hphf-demo-launch-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 16px 36px rgba(255, 125, 28, 0.26);
}


.hphf-demo-launch-note {
  color: rgba(255, 255, 255, 0.38);

  font-size: 0.75rem;
}


/* ---------- EXPANDING DEMO ---------- */

.hphf-demo-area {
  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    max-height 0.7s ease,
    opacity 0.4s ease,
    margin-top 0.5s ease;

  margin-top: 0;
}


.hphf-demo-area.is-open {
  max-height: 1100px;

  margin-top: 42px;

  opacity: 1;
}


.hphf-demo-columns {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;
}


.hphf-demo-window {
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;

  background: #11111a;

  box-shadow:
    0 24px 55px rgba(0, 0, 0, 0.28);
}


.hphf-demo-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  min-height: 72px;

  padding: 16px 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}


.hphf-demo-window-header strong,
.hphf-demo-window-header span {
  display: block;
}


.hphf-demo-window-kicker {
  margin-bottom: 3px;

  color: rgba(255, 255, 255, 0.35);

  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}


.hphf-demo-window-header strong {
  color: rgba(255, 255, 255, 0.92);

  font-size: 0.87rem;
}


.hphf-demo-status {
  padding: 5px 8px;

  border-radius: 999px;

  background: rgba(124, 77, 255, 0.11);

  color: #a98aff;

  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}


.hphf-demo-status-orange {
  background: rgba(255, 138, 31, 0.10);

  color: var(--hphf-orange);
}


.hphf-demo-frame {
  position: relative;

  height: 470px;

  overflow: hidden;

  background: #08080e;
}


.hphf-demo-frame iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/* scale large game display into preview window */

.hphf-demo-frame-display iframe {
  width: 250%;
  height: 250%;

  transform: scale(0.4);
  transform-origin: top left;
}


.hphf-demo-placeholder {
  position: absolute;

  inset: 0;

  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  color: rgba(255, 255, 255, 0.40);

  font-size: 0.84rem;
  line-height: 1.6;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(117, 63, 184, 0.10),
      transparent 40%
    ),
    #0b0b12;
}


.hphf-demo-disclaimer {
  margin: 16px 0 0;

  color: rgba(255, 255, 255, 0.34);

  font-size: 0.73rem;

  text-align: center;
}



/* =====================================================
   HALLOWEEN QUESTIONS
   ===================================================== */

.hphf-questions-section {
  padding: 120px 0;

  background:
    radial-gradient(
      circle at 87% 42%,
      rgba(255, 126, 27, 0.07),
      transparent 29%
    ),
    #090910;
}


.hphf-questions-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(480px, 1.1fr);

  gap: clamp(60px, 8vw, 115px);

  align-items: center;
}


.hphf-questions-copy h2 span,
.hphf-custom-copy h2 span {
  color: var(--hphf-orange-bright);
}


.hphf-questions-copy > p:not(.hphf-kicker),
.hphf-custom-copy > p:not(.hphf-kicker),
.hphf-faq-intro > p:not(.hphf-kicker) {
  margin: 21px 0 0;

  color: var(--hphf-muted);

  line-height: 1.78;
}


.hphf-question-categories {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 27px;
}


.hphf-question-categories span {
  padding: 9px 12px;

  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.035);

  color: rgba(255, 255, 255, 0.69);

  font-size: 0.76rem;
  font-weight: 600;
}


.hphf-questions-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 18px;

  margin-top: 30px;
}


.hphf-text-link {
  color: rgba(255, 255, 255, 0.65);

  font-size: 0.84rem;
  font-weight: 600;

  text-decoration: none;
}


.hphf-text-link:hover {
  color: var(--hphf-orange);
}


/* ---------- QUESTION CARD ---------- */

.hphf-question-preview {
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 25px;

  background:
    linear-gradient(
      145deg,
      rgba(27, 22, 34, 0.98),
      rgba(13, 13, 21, 0.99)
    );

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.34);
}


.hphf-question-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 20px 23px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}


.hphf-question-preview-top span,
.hphf-question-preview-top strong {
  display: block;
}


.hphf-question-preview-top span {
  color: var(--hphf-orange);

  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}


.hphf-question-preview-top strong {
  margin-top: 3px;

  color: rgba(255, 255, 255, 0.91);

  font-size: 0.87rem;
}


.hphf-question-preview-badge {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(255, 138, 31, 0.15);
  border-radius: 12px;

  background: rgba(255, 138, 31, 0.06);

  font-size: 1.25rem;
}


.hphf-question-example {
  padding: 25px 25px 18px;
}


.hphf-question-example-number {
  color: rgba(255, 255, 255, 0.32);

  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


.hphf-question-example h3 {
  margin: 8px 0 21px;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 700;
}


.hphf-answer-list {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;
}


.hphf-answer-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  min-height: 46px;

  padding: 10px 13px;

  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.027);

  color: rgba(255, 255, 255, 0.75);

  font-size: 0.78rem;
}


.hphf-answer-list strong {
  color: var(--hphf-orange);
}


.hphf-question-preview-note {
  margin: 0;

  padding: 13px 24px 17px;

  color: rgba(255, 255, 255, 0.30);

  font-size: 0.68rem;
}



/* =====================================================
   SHARED CENTER HEADING
   ===================================================== */

.hphf-center-heading {
  max-width: 820px;

  margin: 0 auto 52px;

  text-align: center;
}


.hphf-center-heading > p:not(.hphf-kicker) {
  max-width: 650px;

  margin: 17px auto 0;

  color: var(--hphf-muted);

  line-height: 1.7;
}



/* =====================================================
   HOW IT WORKS
   ===================================================== */

.hphf-how-section {
  padding: 115px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  background: #0c0b14;
}


.hphf-how-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}


.hphf-how-card {
  position: relative;

  min-height: 230px;

  padding: 28px 24px;

  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(23, 22, 33, 0.96),
      rgba(14, 14, 22, 0.98)
    );
}


.hphf-how-number {
  display: block;

  margin-bottom: 42px;

  color: var(--hphf-orange);

  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


.hphf-how-card h3,
.hphf-use-card h3 {
  margin: 0;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 700;
}


.hphf-how-card p,
.hphf-use-card p {
  margin: 12px 0 0;

  color: rgba(255, 255, 255, 0.54);

  font-size: 0.83rem;
  line-height: 1.68;
}



/* =====================================================
   USE CASES
   ===================================================== */

.hphf-use-section {
  padding: 115px 0;

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(115, 61, 185, 0.08),
      transparent 34%
    ),
    #090910;
}


.hphf-use-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}


.hphf-use-card {
  padding: 28px;

  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.025);
}


.hphf-use-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin-bottom: 24px;

  border: 1px solid rgba(255, 138, 31, 0.12);
  border-radius: 13px;

  background: rgba(255, 138, 31, 0.055);

  font-size: 1.2rem;
}



/* =====================================================
   CUSTOM / TWO SCREEN
   ===================================================== */

.hphf-custom-section {
  padding: 120px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  background: #0c0b14;
}


.hphf-custom-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(500px, 1.1fr);

  gap: clamp(60px, 8vw, 110px);

  align-items: center;
}


.hphf-custom-list {
  display: grid;

  gap: 10px;

  margin: 28px 0 31px;

  padding: 0;

  list-style: none;
}


.hphf-custom-list li {
  position: relative;

  padding-left: 23px;

  color: rgba(255, 255, 255, 0.70);

  font-size: 0.85rem;
}


.hphf-custom-list li::before {
  content: "✓";

  position: absolute;

  left: 0;

  color: var(--hphf-orange);

  font-weight: 700;
}


/* ---------- TWO SCREEN DIAGRAM ---------- */

.hphf-two-screen-visual {
  position: relative;

  display: grid;

  gap: 16px;
}


.hphf-screen-card {
  position: relative;

  padding: 22px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(25, 24, 36, 0.98),
      rgba(13, 13, 21, 0.98)
    );
}


.hphf-screen-card-label {
  display: block;

  color: rgba(255, 255, 255, 0.31);

  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}


.hphf-screen-card > strong {
  display: block;

  margin: 5px 0 18px;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: 1.05rem;
}


.hphf-controller-ui {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;
}


.hphf-controller-ui div {
  padding: 12px;

  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;

  background: rgba(255, 255, 255, 0.03);

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.72rem;
}


.hphf-screen-card-display img {
  display: block;

  width: 100%;

  border-radius: 12px;
}


.hphf-screen-connector {
  display: flex;
  justify-content: center;

  gap: 5px;
}


.hphf-screen-connector span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: rgba(255, 138, 31, 0.58);
}



/* =====================================================
   ACCESS / PRICING
   ===================================================== */

.hphf-access-section {
  padding: 115px 0;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(255, 126, 26, 0.08),
      transparent 30%
    ),
    #090910;
}


.hphf-access-panel {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    310px;

  gap: 60px;

  align-items: center;

  padding: clamp(38px, 6vw, 68px);

  border: 1px solid rgba(255, 138, 31, 0.14);
  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(31, 24, 25, 0.98),
      rgba(16, 14, 22, 0.99)
    );

  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.30);
}


.hphf-access-copy > p:not(.hphf-kicker) {
  max-width: 720px;

  margin: 18px 0 0;

  color: var(--hphf-muted);

  line-height: 1.75;
}


.hphf-access-proof {
  display: flex;
  flex-wrap: wrap;

  gap: 9px 18px;

  margin-top: 25px;
}


.hphf-access-proof span {
  color: rgba(255, 255, 255, 0.62);

  font-size: 0.78rem;
}


.hphf-price-card {
  padding: 28px;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;

  background: rgba(8, 8, 13, 0.58);

  text-align: center;
}


.hphf-price-label {
  color: var(--hphf-orange);

  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}


.hphf-price {
  margin-top: 7px;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.055em;
}


.hphf-price-sub {
  display: block;

  margin-top: 8px;

  color: rgba(255, 255, 255, 0.43);

  font-size: 0.75rem;
}


.hphf-price-button {
  width: 100%;

  margin-top: 23px;
}


.hphf-price-link {
  display: inline-block;

  margin-top: 13px;

  color: rgba(255, 255, 255, 0.52);

  font-size: 0.75rem;

  text-decoration: none;
}


.hphf-price-link:hover {
  color: var(--hphf-orange);
}



/* =====================================================
   FAQ
   ===================================================== */

.hphf-faq-section {
  padding: 120px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  background: #0c0b14;
}


.hphf-faq-grid {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.72fr)
    minmax(500px, 1.28fr);

  gap: clamp(60px, 8vw, 110px);

  align-items: start;
}


.hphf-faq-intro {
  position: sticky;

  top: 110px;
}


.hphf-faq-list {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.hphf-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.hphf-faq-item summary {
  position: relative;

  padding: 22px 40px 22px 0;

  color: rgba(255, 255, 255, 0.90);

  font-family: Sora, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 650;

  cursor: pointer;

  list-style: none;
}


.hphf-faq-item summary::-webkit-details-marker {
  display: none;
}


.hphf-faq-item summary::after {
  content: "+";

  position: absolute;

  right: 4px;
  top: 19px;

  color: var(--hphf-orange);

  font-size: 1.3rem;
  font-weight: 400;
}


.hphf-faq-item[open] summary::after {
  content: "−";
}


.hphf-faq-item div {
  padding: 0 45px 21px 0;
}


.hphf-faq-item p {
  margin: 0;

  color: rgba(255, 255, 255, 0.56);

  font-size: 0.86rem;
  line-height: 1.72;
}



/* =====================================================
   RELATED RESOURCES
   ===================================================== */

.hphf-resources-section {
  padding: 110px 0;

  background: #090910;
}


.hphf-resource-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}


.hphf-resource-card {
  display: block;

  padding: 25px;

  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 19px;

  background: rgba(255, 255, 255, 0.025);

  text-decoration: none;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}


.hphf-resource-card:hover {
  transform: translateY(-4px);

  border-color: rgba(255, 138, 31, 0.20);

  background: rgba(255, 138, 31, 0.035);
}


.hphf-resource-card > span {
  color: var(--hphf-orange);

  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}


.hphf-resource-card strong {
  display: block;

  margin-top: 12px;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}


.hphf-resource-card p {
  margin: 12px 0 23px;

  color: rgba(255, 255, 255, 0.51);

  font-size: 0.78rem;
  line-height: 1.65;
}


.hphf-resource-card b {
  color: rgba(255, 255, 255, 0.66);

  font-size: 0.74rem;
}



/* =====================================================
   FINAL CTA
   ===================================================== */

.hphf-final-section {
  position: relative;

  overflow: hidden;

  padding: 125px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(255, 129, 28, 0.12),
      transparent 36%
    ),
    radial-gradient(
      circle at 22% 40%,
      rgba(106, 52, 173, 0.10),
      transparent 30%
    ),
    #0b0a12;
}


.hphf-final-content {
  position: relative;

  z-index: 3;

  max-width: 830px;

  margin: 0 auto;

  text-align: center;
}


.hphf-final-content h2 {
  margin: 0;

  color: #ffffff;

  font-family: Sora, system-ui, sans-serif;
  font-size: clamp(2.3rem, 4.5vw, 4.5rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.05em;
}


.hphf-final-content > p:not(.hphf-kicker) {
  max-width: 660px;

  margin: 21px auto 0;

  color: var(--hphf-muted);

  line-height: 1.75;
}


.hphf-final-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 11px;

  margin-top: 31px;
}


.hphf-final-web {
  position: absolute;

  width: 270px;

  left: -50px;
  top: -45px;

  opacity: 0.13;
}


.hphf-final-pumpkin {
  position: absolute;

  width: 110px;

  right: 5%;
  bottom: 3px;

  opacity: 0.76;

  transform: rotate(7deg);

  filter:
    drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55));
}



/* =====================================================
   NEW SECTIONS RESPONSIVE
   ===================================================== */

@media (max-width: 1080px) {

  .hphf-live-demo-header,
  .hphf-questions-grid,
  .hphf-custom-grid,
  .hphf-faq-grid {
    grid-template-columns: 1fr;
  }


  .hphf-live-demo-header {
    gap: 20px;
  }


  .hphf-demo-columns {
    grid-template-columns: 1fr;
  }


  .hphf-questions-copy,
  .hphf-custom-copy {
    max-width: 760px;
  }


  .hphf-how-grid,
  .hphf-use-grid,
  .hphf-resource-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .hphf-faq-intro {
    position: static;

    max-width: 720px;
  }

}


@media (max-width: 700px) {

  .hphf-live-demo,
  .hphf-questions-section,
  .hphf-how-section,
  .hphf-use-section,
  .hphf-custom-section,
  .hphf-access-section,
  .hphf-faq-section,
  .hphf-resources-section,
  .hphf-final-section {
    padding-top: 76px;
    padding-bottom: 76px;
  }


  .hphf-demo-launch {
    align-items: flex-start;
    flex-direction: column;
  }


  .hphf-demo-frame {
    height: 390px;
  }


  .hphf-answer-list,
  .hphf-how-grid,
  .hphf-use-grid,
  .hphf-resource-grid,
  .hphf-controller-ui {
    grid-template-columns: 1fr;
  }


  .hphf-center-heading {
    margin-bottom: 34px;
  }


  .hphf-access-panel {
    grid-template-columns: 1fr;

    gap: 34px;

    padding: 28px 22px;
  }


  .hphf-price-card {
    max-width: none;
  }


  .hphf-final-web {
    width: 170px;
  }


  .hphf-final-pumpkin {
    width: 72px;

    right: -8px;
  }

}

/* =====================================================
   FINAL SECTION SPACING OVERRIDE
   ===================================================== */

.hphf-page .hphf-intro-section {
  padding-top: 78px !important;
  padding-bottom: 68px !important;
}

.hphf-page .hphf-features-section {
  padding-top: 58px !important;
  padding-bottom: 110px !important;
}


/* Mobile */

@media (max-width: 700px) {

  .hphf-page .hphf-intro-section {
    padding-top: 58px !important;
    padding-bottom: 54px !important;
  }

  .hphf-page .hphf-features-section {
    padding-top: 48px !important;
    padding-bottom: 76px !important;
  }

}

/* =====================================================
   FINAL LANDING PAGE SECTION RHYTHM
   ===================================================== */

.hphf-page .hphf-live-demo,
.hphf-page .hphf-questions-section,
.hphf-page .hphf-how-section,
.hphf-page .hphf-use-section,
.hphf-page .hphf-custom-section,
.hphf-page .hphf-access-section,
.hphf-page .hphf-faq-section,
.hphf-page .hphf-resources-section,
.hphf-page .hphf-final-section {
  padding-top: 92px !important;
  padding-bottom: 92px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.055);
}


/* More room between headings and their content */

.hphf-page .hphf-live-demo-header {
  margin-bottom: 38px;
}

.hphf-page .hphf-center-heading {
  margin-bottom: 48px;
}


/* Mobile */

@media (max-width: 700px) {

  .hphf-page .hphf-live-demo,
  .hphf-page .hphf-questions-section,
  .hphf-page .hphf-how-section,
  .hphf-page .hphf-use-section,
  .hphf-page .hphf-custom-section,
  .hphf-page .hphf-access-section,
  .hphf-page .hphf-faq-section,
  .hphf-page .hphf-resources-section,
  .hphf-page .hphf-final-section {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }

  .hphf-page .hphf-live-demo-header {
    margin-bottom: 30px;
  }

  .hphf-page .hphf-center-heading {
    margin-bottom: 34px;
  }

}

/* =====================================================
   HALLOWEEN CLUSTER LINKS
   ===================================================== */

.hphf-use-link {
  display: inline-flex;

  margin-top: 14px;

  color: var(--hphf-orange-bright) !important;

  font-size: 0.82rem;
  font-weight: 750;

  text-decoration: none;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.hphf-use-link:hover {
  color: #ffc15d !important;

  transform: translateX(3px);
}

/* =====================================================
   USE CASE CARD CTA
   ===================================================== */

.hphf-use-card {
  display: flex;
  flex-direction: column;
}

.hphf-use-card p {
  flex-grow: 1;
}

.hphf-use-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  align-self: flex-start;

  margin-top: 22px;
  padding: 9px 15px;

  border: 1px solid rgba(255, 138, 31, 0.25);
  border-radius: 999px;

  background: rgba(255, 138, 31, 0.07);

  color: var(--hphf-orange-bright) !important;

  font-size: 0.76rem;
  font-weight: 750;

  text-decoration: none;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.hphf-use-button:hover {
  background: rgba(255, 138, 31, 0.13);
  border-color: rgba(255, 138, 31, 0.42);

  color: #ffc067 !important;

  transform: translateY(-1px);
}