/* ============================================================
   HireNowX Landing — Styles
   All rules are scoped under .hnx so they won't touch your theme.
   ============================================================ */

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

.hnx {
  --hnx-blue:      #1f74f0;
  --hnx-blue-dark: #145fd6;
  --hnx-ink:       #16233a;
  --hnx-body:      #5a6b7e;
  --hnx-muted:     #8794a5;
  --hnx-line:      #e6ebf2;
  --hnx-teal-1:    #14b8a6;
  --hnx-teal-2:    #0b9e86;
  --hnx-navy-1:    #0a2a4d;
  --hnx-navy-2:    #123863;
  --hnx-bg-soft:   #eef3fb;
  --hnx-bg-soft-2: #f4f7fc;
  --hnx-white:     #ffffff;
  --hnx-shadow:    0 18px 40px -18px rgba(20, 45, 90, .25);
  --hnx-shadow-sm: 0 8px 24px -12px rgba(20, 45, 90, .22);
  --hnx-radius:    16px;
  --hnx-radius-lg: 22px;

  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--hnx-ink);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: clip;
}

.hnx p { margin: 0 0 1em; color: var(--hnx-body); }
.hnx h1, .hnx h2, .hnx h3, .hnx h4 { margin: 0 0 .5em; color: var(--hnx-ink); line-height: 1.18; font-weight: 700; }
.hnx a { text-decoration: none; color: inherit; }
.hnx img { max-width: 100%; display: block; }

.hnx-accent { color: var(--hnx-blue); }
.hnx-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---- Section rhythm ---- */
.hnx-section { padding: 84px 0; position: relative; }
.hnx-section--tight { padding: 64px 0; }

/* ---- Buttons ---- */
.hnx-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 15px 26px; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  will-change: transform;
}
.hnx-btn svg { width: 17px; height: 17px; }
.hnx-btn--primary { background: var(--hnx-blue); color: #fff; box-shadow: 0 12px 22px -10px rgba(31,116,240,.7); }
.hnx-btn--primary:hover { background: var(--hnx-blue-dark); transform: translateY(-3px); box-shadow: 0 18px 30px -10px rgba(31,116,240,.75); }
.hnx-btn--ghost { background: #fff; color: var(--hnx-ink); border-color: var(--hnx-line); box-shadow: var(--hnx-shadow-sm); }
.hnx-btn--ghost:hover { transform: translateY(-3px); border-color: #cfd9e6; box-shadow: var(--hnx-shadow); }
.hnx-btn--block { width: 100%; justify-content: center; }

/* ============================================================
   1. HERO
   ============================================================ */
.hnx-hero {
  background:
    radial-gradient(120% 90% at 90% -10%, #dbe9ff 0%, rgba(219,233,255,0) 55%),
    linear-gradient(180deg, #f6f9ff 0%, #ffffff 70%);
  padding: 70px 0 90px;
  overflow: hidden;
}
.hnx-hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
}
.hnx-hero h1 { font-size: clamp(38px, 5vw, 58px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 22px; }
.hnx-hero p  { font-size: 16.5px; max-width: 480px; }
.hnx-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 26px; }
.hnx-hero__badges { display: flex; gap: 26px; flex-wrap: wrap; }
.hnx-badge { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--hnx-ink); }
.hnx-badge .hnx-check {
  width: 20px; height: 20px; border-radius: 50%; background: #e7f6ef; color: var(--hnx-teal-2);
  display: grid; place-items: center; flex: none;
}
.hnx-badge .hnx-check svg { width: 12px; height: 12px; }

/* Hero visual (recreated recruitment UI) */
.hnx-hero__art { position: relative; }
.hnx-recruit {
  background: #fff; border-radius: var(--hnx-radius-lg); box-shadow: var(--hnx-shadow);
  padding: 22px; border: 1px solid #eef2f8; position: relative; z-index: 2;
}
.hnx-recruit__bar { height: 8px; width: 60%; border-radius: 6px; background: linear-gradient(90deg,#1f74f0,#63a2ff); margin-bottom: 4px; }
.hnx-recruit__title { font-size: 18px; font-weight: 800; letter-spacing: .5px; color: #2a3852; margin: 10px 0 16px; }
.hnx-cand-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.hnx-cand {
  background: #f7f9fd; border: 1px solid #eef2f8; border-radius: 14px; padding: 14px 10px; text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hnx-cand:hover { transform: translateY(-5px); box-shadow: var(--hnx-shadow-sm); }
.hnx-cand__ava { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 8px; background: linear-gradient(135deg,#cfe0ff,#9fc0ff); display: grid; place-items: center; color:#2f68c8; }
.hnx-cand__ava svg { width: 22px; height: 22px; }
.hnx-stars { color: #f6b93b; font-size: 12px; letter-spacing: 1px; }
.hnx-cand__lines { margin-top: 8px; display: grid; gap: 5px; }
.hnx-cand__lines span { height: 5px; border-radius: 4px; background: #e4eaf3; display: block; }
.hnx-cand__lines span:nth-child(2){ width: 70%; margin: 0 auto; }

.hnx-float {
  position: absolute; background: #fff; border-radius: 12px; box-shadow: var(--hnx-shadow);
  padding: 10px 14px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; z-index: 3;
  border: 1px solid #eef2f8;
}
.hnx-float--tl { top: -18px; left: -8px; }
.hnx-float--tr { top: -26px; right: 10px; text-align: right; display: block; }
.hnx-float--tr .hnx-float__num { font-size: 18px; font-weight: 800; color: var(--hnx-ink); }
.hnx-float--tr .hnx-float__lbl { color: var(--hnx-muted); font-weight: 500; font-size: 10.5px; }
.hnx-float .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hnx-teal-1); }
.hnx-blob { position: absolute; inset: auto -30px -40px auto; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle,#d7e6ff 0%,rgba(215,230,255,0) 70%); z-index: 1; }

/* ============================================================
   2. FEATURE CARDS (Hiring Slows Down)
   ============================================================ */
.hnx-heading { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.hnx-heading h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.hnx-heading p  { font-size: 16px; }

.hnx-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hnx-fcard {
  background: #fff; border: 1px solid var(--hnx-line); border-radius: var(--hnx-radius);
  padding: 26px; display: flex; gap: 18px; align-items: flex-start;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hnx-fcard:hover { transform: translateY(-6px); box-shadow: var(--hnx-shadow); border-color: #d9e2ee; }
.hnx-fcard__icon {
  flex: none; width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
  background: #eef4ff; color: var(--hnx-blue);
}
.hnx-fcard__icon svg { width: 28px; height: 28px; }
.hnx-fcard h3 { font-size: 18px; margin-bottom: 8px; }
.hnx-fcard p  { font-size: 13.5px; margin: 0; line-height: 1.6; }
.hnx-fcard strong { color: var(--hnx-ink); }

.hnx-fcard--teal {
  background: linear-gradient(150deg, var(--hnx-teal-1) 0%, var(--hnx-teal-2) 100%);
  border-color: transparent; color: #eafcf7;
}
.hnx-fcard--teal h3 { color: #fff; }
.hnx-fcard--teal p  { color: #d7f7ef; }
.hnx-fcard--teal strong { color: #fff; }
.hnx-fcard--teal .hnx-fcard__icon { background: rgba(255,255,255,.16); color: #fff; }
.hnx-fcard--teal:hover { box-shadow: 0 24px 44px -18px rgba(11,158,134,.6); }

/* ============================================================
   3. IMPACT (dark navy)
   ============================================================ */
.hnx-impact {
  background: linear-gradient(120deg, var(--hnx-navy-1) 0%, var(--hnx-navy-2) 100%);
  color: #eaf1fb;
}
.hnx-impact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.hnx-impact h2 { color: #fff; font-size: clamp(26px,3.2vw,36px); font-weight: 800; }
.hnx-impact p  { color: #b9cbe4; max-width: 460px; }
.hnx-impact__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.hnx-impact__list li { display: flex; gap: 12px; align-items: flex-start; color: #d6e2f3; font-size: 15px; }
.hnx-impact__list strong { color: #fff; }
.hnx-impact__list .hnx-check {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(31,116,240,.25);
  color: #6ea8ff; display: grid; place-items: center; flex: none; margin-top: 1px;
}
.hnx-impact__list .hnx-check svg { width: 12px; height: 12px; }

/* image collage for impact */
.hnx-impact__art { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6);
  background: linear-gradient(160deg,#1b3a63,#0d2748); min-height: 320px; }
.hnx-impact__art .person {
  position: absolute; inset: 0; background:
    radial-gradient(120% 120% at 30% 40%, rgba(31,116,240,.35), transparent 60%),
    linear-gradient(180deg,#20456f,#0e2846);
}
.hnx-hcard {
  position: absolute; background: rgba(255,255,255,.12); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 10px 12px; width: 132px;
  display: flex; gap: 9px; align-items: center;
}
.hnx-hcard .av { width: 26px; height: 26px; border-radius: 50%; background: #cfe0ff; flex: none; }
.hnx-hcard .ln { height: 6px; border-radius: 4px; background: rgba(255,255,255,.55); }
.hnx-hcard .ln.s { width: 70%; margin-top: 5px; background: rgba(255,255,255,.32); }
.hnx-hcard--1 { top: 34px; left: 26px; }
.hnx-hcard--2 { top: 130px; left: 12px; }
.hnx-hcard--3 { top: 60px; right: 26px; }
.hnx-hcard--4 { bottom: 40px; right: 40px; }

/* ============================================================
   4. DECISIONS (light, dashboard image)
   ============================================================ */
.hnx-decide { background: var(--hnx-bg-soft-2); }
.hnx-decide__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.hnx-decide h2 { font-size: clamp(26px,3.2vw,38px); font-weight: 800; }
.hnx-decide strong { color: var(--hnx-ink); }

.hnx-dash {
  perspective: 1400px;
}
.hnx-dash__inner {
  transform: rotateY(-16deg) rotateX(6deg) rotate(1deg);
  transform-style: preserve-3d; transition: transform .6s ease;
  background: #fff; border-radius: 16px; box-shadow: 0 40px 70px -28px rgba(20,45,90,.4);
  padding: 18px; border: 1px solid #eef2f8;
}
.hnx-dash:hover .hnx-dash__inner { transform: rotateY(-8deg) rotateX(3deg); }
.hnx-dash__top { display: flex; gap: 10px; margin-bottom: 14px; }
.hnx-dash__top span { width: 10px; height: 10px; border-radius: 50%; background: #e0e7f1; }
.hnx-dash__profiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.hnx-dp { background: #f6f9fd; border: 1px solid #eef2f8; border-radius: 10px; padding: 10px; text-align: center; }
.hnx-dp .a { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 6px; background: linear-gradient(135deg,#cfe0ff,#9fc0ff); }
.hnx-dp .l { height: 5px; border-radius: 3px; background: #e4eaf3; margin: 4px 6px; }
.hnx-dash__charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.hnx-dchart { background: #f6f9fd; border: 1px solid #eef2f8; border-radius: 10px; padding: 12px; }
.hnx-bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; }
.hnx-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg,#63a2ff,#1f74f0); display: block; }
.hnx-donut { width: 74px; height: 74px; border-radius: 50%; margin: 6px auto;
  background: conic-gradient(var(--hnx-teal-1) 0 62%, #1f74f0 62% 82%, #e4eaf3 82% 100%); position: relative; }
.hnx-donut::after { content:""; position: absolute; inset: 16px; border-radius: 50%; background: #f6f9fd; }

/* ============================================================
   5. BETTER DECISIONS (feature list w/ image)
   ============================================================ */
.hnx-better__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.hnx-better h2 { font-size: clamp(26px,3.2vw,38px); font-weight: 800; margin-bottom: 26px; }

/* left illustration */
.hnx-review {
  background: linear-gradient(150deg,#1fb6a4,#0b9e86); border-radius: var(--hnx-radius-lg); padding: 34px;
  position: relative; box-shadow: var(--hnx-shadow);
}
.hnx-review__card { background: #fff; border-radius: 14px; padding: 16px; box-shadow: var(--hnx-shadow-sm); }
.hnx-review__row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f0f3f8; }
.hnx-review__row:last-child { border-bottom: 0; }
.hnx-review__row .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#cfe0ff,#9fc0ff); flex: none; }
.hnx-review__row .meta { flex: 1; }
.hnx-review__row .meta .l { height: 6px; border-radius: 4px; background: #e4eaf3; }
.hnx-review__row .meta .l.s { width: 60%; margin-top: 5px; background: #eef1f6; }
.hnx-review__row .st { color: #f6b93b; font-size: 11px; letter-spacing: 1px; }
.hnx-review__glass { position: absolute; right: 18px; bottom: 14px; width: 58px; height: 58px; }

.hnx-flist { display: grid; gap: 14px; margin-bottom: 26px; }
.hnx-fitem {
  display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--hnx-line);
  border-radius: 13px; padding: 16px 18px; transition: transform .3s ease, box-shadow .3s ease;
}
.hnx-fitem:hover { transform: translateX(6px); box-shadow: var(--hnx-shadow-sm); }
.hnx-fitem__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: #eef4ff; color: var(--hnx-blue); }
.hnx-fitem__icon svg { width: 20px; height: 20px; }
.hnx-fitem h4 { font-size: 15.5px; margin: 0 0 3px; }
.hnx-fitem p  { font-size: 13px; margin: 0; }
.hnx-fitem--teal { background: linear-gradient(150deg,var(--hnx-teal-1),var(--hnx-teal-2)); border-color: transparent; }
.hnx-fitem--teal h4 { color: #fff; }
.hnx-fitem--teal p  { color: #d7f7ef; }
.hnx-fitem--teal .hnx-fitem__icon { background: rgba(255,255,255,.18); color: #fff; }
.hnx-fitem--teal:hover { box-shadow: 0 20px 36px -16px rgba(11,158,134,.55); }

/* ============================================================
   6. FAQ
   ============================================================ */
.hnx-faq__list { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.hnx-faq__item { border: 1px solid var(--hnx-line); border-radius: 12px; background: #fff; overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease; }
.hnx-faq__item:hover { border-color: #d4deec; box-shadow: var(--hnx-shadow-sm); }
.hnx-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--hnx-ink);
  list-style: none; user-select: none;
}
.hnx-faq__q::-webkit-details-marker { display: none; }
.hnx-faq__chev { flex: none; width: 20px; height: 20px; color: var(--hnx-muted); transition: transform .3s ease; }
.hnx-faq__item[open] .hnx-faq__chev { transform: rotate(180deg); color: var(--hnx-blue); }
.hnx-faq__a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
.hnx-faq__item[open] .hnx-faq__a { padding: 0 22px 20px; max-height: 320px; }
.hnx-faq__a p { font-size: 14px; margin: 0; color: var(--hnx-body); }

/* ============================================================
   7. CONTACT / FORM
   ============================================================ */
.hnx-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.hnx-contact h2 { font-size: clamp(26px,3.2vw,38px); font-weight: 800; }
.hnx-contact__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 13px; }
.hnx-contact__list li { display: flex; gap: 11px; align-items: center; font-size: 15px; color: var(--hnx-body); }
.hnx-contact__list .hnx-check { width: 20px; height: 20px; border-radius: 50%; background: #e7f6ef;
  color: var(--hnx-teal-2); display: grid; place-items: center; flex: none; }
.hnx-contact__list .hnx-check svg { width: 11px; height: 11px; }

.hnx-form { background: #fff; border: 1px solid var(--hnx-line); border-radius: 18px; padding: 30px;
  box-shadow: var(--hnx-shadow-sm); display: grid; gap: 16px; }
.hnx-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--hnx-ink); }
.hnx-field label span { color: #e5484d; }
.hnx-field input {
  width: 100%; padding: 13px 15px; border: 1px solid var(--hnx-line); border-radius: 10px;
  font-size: 14px; font-family: inherit; color: var(--hnx-ink); background: #fbfcfe; transition: border-color .2s ease, box-shadow .2s ease;
}
.hnx-field input:focus { outline: none; border-color: var(--hnx-blue); box-shadow: 0 0 0 3px rgba(31,116,240,.15); background: #fff; }

/* ============================================================
   Animations (scroll reveal + entry)
   ============================================================ */
.hnx [data-anim] { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.hnx [data-anim="left"]  { transform: translateX(-40px); }
.hnx [data-anim="right"] { transform: translateX(40px); }
.hnx [data-anim="zoom"]  { transform: scale(.92); }
.hnx [data-anim].is-visible { opacity: 1; transform: none; }
.hnx [data-delay="1"] { transition-delay: .1s; }
.hnx [data-delay="2"] { transition-delay: .2s; }
.hnx [data-delay="3"] { transition-delay: .3s; }
.hnx [data-delay="4"] { transition-delay: .4s; }

/* gentle float loop for hero floating chips */
@keyframes hnxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hnx-float--tl { animation: hnxFloat 4s ease-in-out infinite; }
.hnx-float--tr { animation: hnxFloat 5s ease-in-out .4s infinite; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .hnx-hero__grid,
  .hnx-impact__grid,
  .hnx-decide__grid,
  .hnx-better__grid,
  .hnx-contact__grid { grid-template-columns: 1fr; }
  .hnx-cards2 { grid-template-columns: 1fr; }
  .hnx-hero__art { max-width: 480px; margin: 10px auto 0; }
  .hnx-impact__art { min-height: 300px; }
  .hnx-decide__grid { direction: ltr; }
}
@media (max-width: 560px) {
  .hnx-section { padding: 60px 0; }
  .hnx-hero { padding: 50px 0 70px; }
  .hnx-hero__cta { flex-direction: column; align-items: stretch; }
  .hnx-hero__cta .hnx-btn { justify-content: center; }
  .hnx-cand-row { grid-template-columns: 1fr; }
  .hnx-dash__inner { transform: none; }
  .hnx-fcard { flex-direction: column; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hnx [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hnx-float--tl, .hnx-float--tr { animation: none; }
}