/* HR Workify Premium White Landing
   - White base
   - Premium spacing
   - Soft gradients & shadows
*/
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --muted:#5b6473;
  --text:#0b1020;
  --stroke:rgba(15, 23, 42, .10);
  --soft:rgba(15, 23, 42, .06);

  --p1:#2f6bff;
  --p2:#23d6ee;
  --p3:#a855f7;

  --shadow: 0 18px 50px rgba(15, 23, 42, .12);
  --shadow2: 0 8px 22px rgba(15, 23, 42, .10);

  --r:20px;
  --r2:28px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto; background:var(--bg); color:var(--text)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1200px, 92%); margin:auto}

.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900}
.brand__logo{height:34px;width:auto}
.brand__name{letter-spacing:.2px}

.navlinks{display:flex;align-items:center;gap:20px}
.navlinks a{font-size:14px;color:#30384a;font-weight:700}
.navlinks a:hover{color:#0b1020}

.hamburger{display:none;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:26px;height:2px;background:#0b1020;margin:6px 0;border-radius:99px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:11px 16px;
  border-radius:14px;
  font-weight:900;
  font-size:14px;
}
.btn--primary{
  border:0;
  color:white;
  background:linear-gradient(90deg,var(--p1),var(--p2));
  box-shadow: 0 16px 32px rgba(47,107,255,.18);
}
.btn--ghost{
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.7);
  color:#0b1020;
}

/* HERO */
.hero{position:relative; padding:70px 0 40px}
.hero__bg{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.blob{position:absolute; filter: blur(34px); opacity:.65; border-radius:999px}
.blob--1{width:560px;height:560px; left:-160px; top:-220px; background:rgba(47,107,255,.22)}
.blob--2{width:520px;height:520px; right:-220px; top:-140px; background:rgba(168,85,247,.20)}
.blob--3{width:520px;height:520px; left:40%; bottom:-260px; transform:translateX(-50%); background:rgba(35,214,238,.18)}

.hero__grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.75);
  color:#20263a;
  font-size:13px;
  font-weight:900;
}
.pill__dot{width:8px;height:8px;border-radius:99px;background:var(--p2); box-shadow:0 0 14px rgba(35,214,238,.55)}

.hero__title{
  font-size:54px;
  line-height:1.05;
  margin:18px 0 12px;
  font-weight:950;
  letter-spacing:-.03em;
}
.grad{
  background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__sub{
  margin:0 0 22px;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
  max-width:54ch;
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

.trust{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.trust__item{
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}
.trust__val{font-weight:950}
.trust__lbl{color:var(--muted);font-size:13px;margin-top:2px;font-weight:700}

/* Screenshot card */
.shot{
  border-radius:var(--r2);
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.shot__top{
  padding:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.85);
  font-size:12px;
  font-weight:900;
  color:#11162b;
}
.tag svg{width:16px;height:16px}
.shot__img{width:100%; padding:10px}

/* Floating */
.hero__right{position:relative}
.float{
  position:absolute;
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
}
.float__ic{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(90deg, rgba(47,107,255,.14), rgba(35,214,238,.12));
  border:1px solid rgba(15,23,42,.08);
}
.float svg{width:18px;height:18px}
.float b{display:block;font-weight:950;font-size:13px}
.float span{display:block;color:var(--muted);font-size:12px;margin-top:2px;font-weight:700}
.float--a{left:-18px; bottom:20px}
.float--b{right:-18px; top:72px}

/* Strip */
.strip{padding:10px 0 44px}
.strip__inner{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.7);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}
.strip__left p{margin:4px 0 0;color:var(--muted);font-weight:700}
.mini{font-size:12px;font-weight:950;letter-spacing:.14em;color:#2b3550}
.strip__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.strip__chips span{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.88);
  font-size:13px;
  font-weight:900;
  color:#121a2d;
}
.strip__chips svg{width:16px;height:16px}

/* Sections */
.section{padding:76px 0}
.section.alt{background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(255,255,255,0))}
.section.alt2{background: linear-gradient(180deg, rgba(47,107,255,.05), rgba(255,255,255,0))}
.head{text-align:center;margin-bottom:26px}
.kicker{
  display:inline-flex;
  font-size:12px;
  font-weight:950;
  letter-spacing:.18em;
  color:#2b3550;
}
.head h2{margin:10px 0 10px;font-size:38px;letter-spacing:-.02em}
.head p{margin:0;color:var(--muted);font-weight:700}

/* Feature grid */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.card{
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.78);
  box-shadow: 0 14px 32px rgba(15,23,42,.06);
  transition:.22s ease;
}
.card:hover{transform:translateY(-6px); box-shadow: 0 18px 48px rgba(15,23,42,.10)}
.card h3{margin:14px 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);line-height:1.65;font-weight:650}
.card__ic{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(15,23,42,.08);
}
.card__ic svg{width:20px;height:20px}
.bg1{background:rgba(47,107,255,.12)}
.bg2{background:rgba(35,214,238,.12)}
.bg3{background:rgba(168,85,247,.12)}
.bg4{background:rgba(255,170,56,.14)}
.bg5{background:rgba(34,197,94,.12)}
.bg6{background:rgba(244,63,94,.12)}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.frame{
  padding:14px;border-radius:28px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.86);
  box-shadow: var(--shadow);
}
.split__copy p{color:var(--muted);line-height:1.75;font-weight:700}
.ticks{display:grid;gap:10px;margin:16px 0 18px;color:#1c2436;font-weight:850}
.ticks svg{width:18px;height:18px}
.ticks div{display:flex;gap:10px;align-items:flex-start}
.cta2{display:flex;gap:12px;flex-wrap:wrap}

/* Modules */
.modules{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.m{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.76);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  display:grid;
  gap:8px;
  transition:.2s ease;
}
.m:hover{transform:translateY(-5px)}
.m svg{width:20px;height:20px}
.m b{font-weight:950}
.m span{color:var(--muted);font-weight:700;font-size:13px}

/* FAQ */
.faq{width:min(900px,100%);margin:18px auto 0;display:grid;gap:12px}
details{
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.78);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
  padding:14px 16px;
}
summary{cursor:pointer;font-weight:950}
details p{margin:10px 0 0;color:var(--muted);line-height:1.75;font-weight:650}

/* CTA */
.cta{
  padding:22px;
  border-radius:28px;
  border:1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(800px 260px at 15% 30%, rgba(47,107,255,.18), transparent 60%),
    radial-gradient(800px 260px at 85% 10%, rgba(35,214,238,.12), transparent 60%),
    rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.cta h2{margin:10px 0 8px}
.cta p{margin:0;color:var(--muted);line-height:1.65;font-weight:700}
.cta__buttons{display:flex;gap:12px;flex-wrap:wrap}

/* Footer */
.footer{padding:26px 0;border-top:1px solid rgba(15,23,42,.06)}
.footer__inner{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:16px;align-items:center}
.footer__brand{display:flex;gap:12px;align-items:center}
.footer__brand img{height:34px}
.footer__brand span{display:block;color:var(--muted);font-weight:700;font-size:13px;margin-top:2px}
.footer__links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.footer__links a{color:#30384a;font-weight:800;font-size:14px}
.footer__links a:hover{color:#0b1020}
.footer__copy{text-align:right;color:#6b7487;font-weight:800;font-size:13px}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__title{font-size:44px}
  .float{display:none}
  .strip__inner{flex-direction:column; align-items:flex-start}
  .strip__chips{justify-content:flex-start}
  .grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .modules{grid-template-columns:1fr 1fr}
  .footer__inner{grid-template-columns:1fr;text-align:center}
  .footer__copy{text-align:center}
}
@media (max-width: 640px){
  .navlinks{
    position:absolute;
    left:4%;
    right:4%;
    top:62px;
    display:none;
    flex-direction:column;
    gap:12px;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(15,23,42,.08);
    box-shadow: 0 14px 42px rgba(15,23,42,.10);
  }
  .navlinks.show{display:flex}
  .hamburger{display:block}
  .hero__title{font-size:34px}
  .trust{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .modules{grid-template-columns:1fr}
  .cta{flex-direction:column; align-items:flex-start}
}