/* ==========================================================================
   X-SEEK — homepage
   ========================================================================== */

body[data-app="home"] { background: var(--ink-950); }

/* ---- Hero --------------------------------------------------------------*/

.hero {
  position: relative;
  padding-top: clamp(2rem, 1rem + 4vw, 4rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(201, 169, 74, 0.16), transparent 68%),
    radial-gradient(45% 45% at 15% 65%, rgba(120, 140, 255, 0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 2rem + 2vw, 4rem);
  align-items: center;
  min-height: 66vh;
}

.hero-copy .eyebrow { margin-bottom: var(--sp-3); }

.hero-title {
  font-size: var(--fs-11);
  line-height: 1.03;
  color: var(--text-on-dark);
  max-width: 13ch;
}

.hero-sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-7);
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  max-width: 46ch;
}

.hero-actions { margin-top: var(--sp-5); }
.hero-footnote { margin-top: var(--sp-3); font-size: var(--fs-4); color: var(--text-on-dark-faint); }

/* ---- Hero device stage ---------------------------------------------- */

.hero-stage {
  position: relative;
  height: clamp(360px, 46vw, 560px);
  perspective: 1400px;
}

.hero-devices {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.hero-device {
  position: absolute;
  width: clamp(120px, 15vw, 190px);
  transition: transform var(--dur-med) var(--ease-out);
  transform:
    translate3d(var(--hx, 0px), var(--hy, 0px), 0)
    rotate(var(--hr, 0deg))
    rotateY(calc(var(--tiltx, 0) * 1deg))
    rotateX(calc(var(--tilty, 0) * -1deg));
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.45));
}

.hero-device .device-frame { border-radius: 22px; padding: 6px; }
.hero-device .device-frame::after { width: 32%; height: 10px; top: 5px; border-radius: 0 0 8px 8px; }
.hero-device .device-frame__screen { border-radius: 16px; }

.hero-device--coin  { --hx: 2%;  --hy: 4%;  --hr: -9deg;  top: 6%;  left: 0%;  z-index: 2; }
.hero-device--plant { --hx: 24%; --hy: -2%; --hr: 6deg;   top: -2%; left: 22%; z-index: 3; }
.hero-device--bible { --hx: 46%; --hy: 10%; --hr: -4deg;  top: 12%; left: 44%; z-index: 4; }
.hero-device--health{ --hx: 66%; --hy: 0%;  --hr: 8deg;   top: 2%;  left: 64%; z-index: 1; }

.hero-device__label {
  position: absolute;
  bottom: -2.1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--text-on-dark-muted);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; min-height: auto; }
  .hero-stage { height: clamp(300px, 78vw, 420px); margin-top: var(--sp-4); }
  .hero-title { max-width: none; }
}
@media (max-width: 560px) {
  .hero-device { width: clamp(100px, 32vw, 140px); }
  .hero-device--coin  { top: 4%; left: -2%; }
  .hero-device--plant { top: -4%; left: 26%; }
  .hero-device--bible { top: 18%; left: 50%; }
  .hero-device--health{ top: 8%; left: 68%; }
}

/* ---- Portfolio intro / DISCOVER-UNDERSTAND-TRACK-LEARN --------------- */

.portfolio-intro {
  text-align: center;
  padding-top: 0;
}
.portfolio-intro .eyebrow { justify-content: center; }
.portfolio-intro h2 {
  font-size: var(--fs-10);
  margin: var(--sp-3) auto 0;
  max-width: 18ch;
  color: var(--text-on-dark);
}
.portfolio-intro p {
  margin: var(--sp-4) auto 0;
  max-width: 58ch;
  color: var(--text-on-dark-muted);
  font-size: var(--fs-7);
}

.value-words {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.value-word {
  background: var(--ink-950);
  padding: var(--sp-5) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.value-word b { font-family: var(--font-display); font-size: var(--fs-8); color: var(--text-on-dark); font-weight: 500; }
.value-word span { font-size: var(--fs-4); color: var(--text-on-dark-faint); line-height: 1.5; }

@media (max-width: 720px) {
  .value-words { grid-template-columns: 1fr 1fr; }
}

/* ---- App showcase rows ------------------------------------------------ */

.app-row {
  --row-accent: var(--accent);
  --row-ink: var(--accent-ink);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--ink-line);
  overflow: hidden;
}
.app-row-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 3vw, 5rem);
  align-items: center;
}
.app-row.is-reverse .app-row-inner { direction: rtl; }
.app-row.is-reverse .app-row-inner > * { direction: ltr; }

.app-row__visual { position: relative; display: flex; justify-content: center; }
.app-row__device { width: min(78%, 300px); position: relative; z-index: 1; }
.app-row__backdrop {
  position: absolute;
  inset: -8% -4%;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, color-mix(in srgb, var(--row-accent) 24%, transparent), transparent 70%);
  z-index: 0;
}

.app-row__copy .app-row__icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: var(--sp-3); }
.app-row__kicker { color: var(--row-accent); font-weight: 600; font-size: var(--fs-4); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.app-row__title { font-size: var(--fs-10); color: var(--text-on-dark); max-width: 12ch; }
.app-row__desc { margin-top: var(--sp-3); font-size: var(--fs-7); color: var(--text-on-dark-muted); max-width: 46ch; line-height: 1.6; }
.app-row__features { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.app-row__features li {
  font-size: var(--fs-4);
  color: var(--text-on-dark-muted);
  border: 1px solid var(--ink-line-strong);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
}
.app-row__link {
  margin-top: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--row-accent);
  padding-bottom: 0.2rem;
  transition: gap var(--dur-fast) var(--ease-out);
}
.app-row__link:hover { gap: 0.85em; }
.app-row__link svg { width: 16px; height: 16px; color: var(--row-accent); }

@media (max-width: 880px) {
  .app-row-inner { grid-template-columns: 1fr; }
  .app-row.is-reverse .app-row-inner { direction: ltr; }
  .app-row__visual { order: -1; }
}

/* ---- About band ------------------------------------------------------- */

.about-band {
  border-top: 1px solid var(--ink-line);
  padding-block: var(--sp-8);
  background: var(--ink-900);
}
.about-band-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--sp-6);
}
.about-band h2 { font-size: var(--fs-9); color: var(--text-on-dark); max-width: 14ch; }
.about-band p { font-size: var(--fs-7); color: var(--text-on-dark-muted); line-height: 1.65; }
.about-band p + p { margin-top: var(--sp-3); }
@media (max-width: 880px) { .about-band-inner { grid-template-columns: 1fr; } }

/* ---- Final CTA ---------------------------------------------------------*/

.final-band {
  padding-block: var(--sp-8);
  text-align: center;
  border-top: 1px solid var(--ink-line);
}
.final-band h2 { font-size: var(--fs-10); color: var(--text-on-dark); max-width: 16ch; margin-inline: auto; }
.final-band p { margin-top: var(--sp-3); color: var(--text-on-dark-muted); font-size: var(--fs-7); }
.final-band .btn-row { justify-content: center; margin-top: var(--sp-5); }