body,
button,
input,
select,
textarea,
.btn,
.navbar,
.accordion-button {
  font-family: "Open Sans", sans-serif;
}
:root {
  --yp-primary: #6f42c1;
  --yp-primary-dark: #4d2c91;
  --yp-accent: #8d6cf2;
  --yp-soft: #f4f0ff;
  --yp-ink: #17131f;
  --yp-muted: #6f6878;
  --yp-card: rgba(255,255,255,.82);
  --yp-border: rgba(111,66,193,.14);
  --yp-success: #17a673;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--yp-ink);
  background:
	radial-gradient(circle at top left, rgba(141,108,242,.15), transparent 30rem),
	linear-gradient(180deg, #fff 0%, #fbfaff 35%, #fff 100%);
  overflow-x: hidden;
}

.navbar {
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.navbar-brand-mark {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--yp-primary), var(--yp-accent));
  box-shadow: 0 10px 24px rgba(111,66,193,.26);
}

.btn-primary {
  --bs-btn-bg: var(--yp-primary);
  --bs-btn-border-color: var(--yp-primary);
  --bs-btn-hover-bg: var(--yp-primary-dark);
  --bs-btn-hover-border-color: var(--yp-primary-dark);
  --bs-btn-active-bg: var(--yp-primary-dark);
  --bs-btn-active-border-color: var(--yp-primary-dark);
}

.text-primary {
  color: var(--yp-primary) !important;
}

.hero {
  padding: 8.5rem 0 5rem;
  position: relative;
}

.hero-badge,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--yp-border);
  color: var(--yp-primary);
  background: rgba(244,240,255,.85);
  border-radius: 999px;
  padding: .5rem .8rem;
  font-size: .9rem;
  font-weight: 700;
}

.display-title {
  font-size: clamp(2.8rem, 7vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 800;
}

.hero-copy {
  max-width: 680px;
  font-size: 1.18rem;
  color: var(--yp-muted);
}

.app-btn {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 14px;
  background: #111;
  color: #fff;
  text-decoration: none;
  padding: .75rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 160px;
}

.app-btn:hover {
  color: #fff;
  transform: translateY(-1px);
}

.app-btn small {
  display: block;
  font-size: .68rem;
  line-height: 1;
  opacity: .72;
}

.app-btn strong {
  display: block;
  line-height: 1.15;
}

.phone-shell {
  max-width: 330px;
  margin-inline: auto;
  border-radius: 30px;
  padding: 3px;
  box-shadow: 0 36px 80px rgba(51,32,83,.28);
  position: relative;
	transform: rotate(2deg);
}

.phone-screen {
  padding: 2px;
  min-height: 650px;
  border-radius: 27px;
  overflow: hidden;
  background-color: white;
  position: relative;
}

.phone-notch {
  width: 120px;
  height: 28px;
  border-radius: 20px;
  background: #17131f;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.match-card {
  margin-top: 3.5rem;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(57,39,83,.14);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.05);
}

.match-card-header {
  min-height: 190px;
  background:
	linear-gradient(135deg, rgba(111,66,193,.95), rgba(141,108,242,.78)),
	linear-gradient(45deg, #4d2c91, #8d6cf2);
  padding: 1.35rem;
  color: #fff;
  position: relative;
}

.match-score {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.65);
  font-weight: 800;
  font-size: 1.1rem;
}

.floating-chip {
  position: absolute;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(60,37,92,.16);
  padding: .65rem .9rem;
  font-weight: 700;
  font-size: .86rem;
  z-index: 4;
}

.chip-hot {
  top: 13%;
  right: 0;
  color: #e9582f;
}

.chip-ai {
  bottom: 13%;
  left: 0;
  color: var(--yp-primary);
}

.section-space {
  padding: 6rem 0;
}

.soft-section {
  background: var(--yp-soft);
}

.feature-card,
.privacy-card,
.step-card,
.recruiter-card {
  height: 100%;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--yp-border);
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(64,45,94,.07);
}

.feature-card {
  padding: 1.75rem;
  transition: .25s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(64,45,94,.12);
}

.icon-box {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--yp-soft);
  color: var(--yp-primary);
  font-size: 1.35rem;
  margin-bottom: 1.1rem;
}

.product-visual {
  min-height: 430px;
  padding: 2rem;
  display: flex;
  align-items: center;
  border-radius: 28px;
  overflow: hidden;
  background:
	linear-gradient(135deg, rgba(111,66,193,.08), rgba(141,108,242,.22)),
	#fff;
  border: 1px solid var(--yp-border);
  position: relative;
}

.mini-window {
  width: min(100%, 520px);
  margin-inline: auto;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 24px 60px rgba(65,44,96,.14);
  padding: 1rem;
}

.vacancy-row {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: .75rem;
  background: #fff;
}

.vacancy-row:last-child {
  margin-bottom: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .35rem .6rem;
  background: var(--yp-soft);
  color: var(--yp-primary);
}

.tag.success {
  background: #eaf8f3;
  color: #087a55;
}

.step-number {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, var(--yp-primary), var(--yp-accent));
  box-shadow: 0 10px 24px rgba(111,66,193,.24);
}

.privacy-card {
  padding: 2rem;
}

.privacy-list li {
  margin-bottom: .85rem;
}

.recruiter-wrap {
  background: #17131f;
  color: #fff;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
}

.recruiter-wrap::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: rgba(141,108,242,.18);
  right: -160px;
  top: -180px;
  filter: blur(4px);
}

.recruiter-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #fff;
  padding: 1.5rem;
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.accordion {
  --bs-accordion-border-color: rgba(111,66,193,.14);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-bg: var(--yp-soft);
  --bs-accordion-active-color: var(--yp-primary-dark);
}

.accordion-item {
  border-radius: 18px !important;
  overflow: hidden;
  margin-bottom: .85rem;
  border: 1px solid var(--yp-border);
}

.cta-band {
  background: linear-gradient(135deg, var(--yp-primary-dark), var(--yp-primary), var(--yp-accent));
  color: #fff;
  border-radius: 32px;
  padding: 3rem;
  box-shadow: 0 28px 70px rgba(86,52,139,.28);
}

footer a {
  color: var(--yp-muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--yp-primary);
}

@media (max-width: 991.98px) {
  .hero {
	padding-top: 7rem;
  }

  .phone-shell {
	margin-top: 3rem;
	transform: none;
  }

  .floating-chip {
	display: none;
  }
}

@media (max-width: 575.98px) {
  .section-space {
	padding: 4.25rem 0;
  }

  .hero {
	padding-bottom: 3.5rem;
  }

  .phone-screen {
	min-height: 590px;
  }

  .cta-band {
	padding: 2rem 1.4rem;
  }
}

.screenshots-showcase {
  background:
	radial-gradient(circle at 15% 20%, rgba(141,108,242,.14), transparent 24rem),
	radial-gradient(circle at 85% 75%, rgba(111,66,193,.12), transparent 28rem),
	#17131f;
  color: #fff;
}

.screenshot-device {
  max-width: 330px;
  margin-inline: auto;
  padding: 10px;
  border-radius: 10px;
  background: #0f0d14;
  box-shadow: 0 28px 70px rgba(0,0,0,.35);
}

.screenshot-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.screenshot-copy {
  max-width: 520px;
}

.screenshot-nav-card {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  border-radius: 18px;
  color: #fff;
  padding: 1rem;
  cursor: pointer;
  transition: .2s ease;
  text-align: left;
  width: 100%;
}

.screenshot-nav-card:hover,
.screenshot-nav-card.active {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  transform: translateY(-2px);
}

.carousel-control-prev,
.carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.carousel-control-prev {
  left: -10px;
}

.carousel-control-next {
  right: -10px;
}

@media (max-width: 991.98px) {
  .carousel-control-prev {
	left: 0;
  }

  .carousel-control-next {
	right: 0;
  }
}


.oneupply-wordmark {
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: .04em;
  white-space: nowrap;
}

.oneupply-wordmark .wordmark-purple {
  color: #6f2dbd;
}

.oneupply-wordmark .wordmark-orange {
  color: #ff9f1c;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .oneupply-wordmark {
	font-size: 1.55rem;
  }
}/* CSS Document */