:root {
    --hr-blue: #1378f5;
    --hr-blue-dark: #075fc9;
    --hr-navy: #071f3b;
    --hr-text: #445875;
    --hr-line: #dce8f6;
    --hr-soft: #f4f9ff;
    --hr-green: #0fbd82;
    --hr-purple: #7a5af8;
    --hr-orange: #ff8a34;
    --hr-coral: #ff5d7c;
    --hr-cyan: #11afd4;
    --hr-shadow: 0 24px 60px rgba(14, 60, 109, .12);
}

.hrms-page {
    color: var(--hr-navy);
    overflow-x: hidden;
}

.hrms-page main {
    overflow: hidden;
}

.hrms-page .infotattwa-navbar {
    background: #fff !important;
    box-shadow: 0 3px 18px rgba(7, 31, 59, .08);
}

.hrms-page .hr-section {
    padding: 105px 0;
    position: relative;
}

.hrms-page .hr-soft {
    background: var(--hr-soft);
}

.hr-eyebrow {
    color: var(--hr-blue);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.hr-eyebrow::before {
    background: var(--hr-green);
    content: "";
    height: 3px;
    width: 26px;
}

.hr-eyebrow.light {
    color: #62b0ff;
}

.hr-section h2,
.hr-final-cta h2 {
    color: var(--hr-navy);
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -1.8px;
    line-height: 1.08;
    margin: 0 0 20px;
}

.hr-section p,
.hr-final-cta p {
    color: var(--hr-text);
    font-size: 17px;
    line-height: 1.75;
}

.hr-section-head {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 48px;
}

.hr-section-head > div {
    max-width: 800px;
}

.hr-section-head p {
    margin: 0;
}

.hr-section-head.centered {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    max-width: 880px;
    text-align: center;
}

.hr-showcase .hr-section-head,
.hr-modules-section .hr-section-head,
.hr-industries-section .hr-section-head,
.hr-experience .hr-section-head,
.hr-choose-section .hr-section-head {
    max-width: none;
    width: 100%;
}

#showcase-title,
#modules-title,
#industries-title,
#experience-title,
#choose-title {
    font-size: clamp(36px, 3.35vw, 52px);
    white-space: nowrap;
}

.hr-split {
    align-items: center;
    display: grid;
    gap: 72px;
    grid-template-columns: .9fr 1.1fr;
}

.hr-section-copy p {
    margin-bottom: 30px;
}

.hr-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    min-height: 54px;
    padding: 13px 24px;
    position: relative;
    transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    z-index: 1;
}

.hr-btn-primary {
    background: var(--hr-blue);
    box-shadow: 0 12px 26px rgba(19, 120, 245, .24);
    color: #fff;
}

.hr-btn-primary:hover,
.hr-btn-primary:focus {
    background: linear-gradient(135deg, var(--hr-blue), var(--hr-green));
    box-shadow: 0 18px 35px rgba(15, 189, 130, .24);
    color: #fff;
    transform: translateY(-3px);
}

.hr-btn-secondary {
    background: #fff;
    border-color: #8abcf8;
    color: var(--hr-blue-dark);
}

.hr-btn-secondary:hover,
.hr-btn-secondary:focus,
.hr-btn-ghost:hover,
.hr-btn-ghost:focus {
    background: var(--hr-blue);
    border-color: var(--hr-blue);
    color: #fff;
    transform: translateY(-3px);
}

.hr-btn:hover i,
.hr-btn:focus i {
    transform: translateX(4px);
}

.hr-btn i {
    transition: transform .3s ease;
}

.hrms-page a:focus-visible,
.hrms-page button:focus-visible,
.hrms-page summary:focus-visible {
    outline: 3px solid rgba(19, 120, 245, .38);
    outline-offset: 4px;
}

.hr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hr-icon {
    align-items: center;
    border-radius: 15px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 24px;
    height: 54px;
    justify-content: center;
    transition: transform .3s ease, box-shadow .3s ease;
    width: 54px;
}

.hr-icon.blue { background: #e8f3ff; box-shadow: 0 10px 24px rgba(19,120,245,.15); color: #1378f5; }
.hr-icon.green { background: #e4faf2; box-shadow: 0 10px 24px rgba(15,189,130,.15); color: #0ab67b; }
.hr-icon.purple { background: #f0ebff; box-shadow: 0 10px 24px rgba(122,90,248,.15); color: #7a5af8; }
.hr-icon.orange, .hr-icon.amber { background: #fff1e3; box-shadow: 0 10px 24px rgba(255,138,52,.15); color: #ff7d19; }
.hr-icon.coral { background: #ffebf0; box-shadow: 0 10px 24px rgba(255,93,124,.15); color: #ff4f73; }
.hr-icon.teal { background: #e4f9fb; box-shadow: 0 10px 24px rgba(17,175,212,.15); color: #06a7cd; }
.hr-icon.indigo { background: #eceeff; box-shadow: 0 10px 24px rgba(76,99,232,.15); color: #5367e9; }

.hr-card:hover .hr-icon,
.hr-benefit-grid article:hover .hr-icon,
.hr-industry-grid article:hover .hr-icon {
    box-shadow: 0 0 0 9px rgba(19, 120, 245, .06), 0 14px 30px rgba(19, 120, 245, .2);
    transform: translateY(-4px) rotate(-4deg) scale(1.05);
}

/* Hero */
.hr-hero {
    background: radial-gradient(circle at 88% 14%, rgba(19,120,245,.16), transparent 30%), linear-gradient(118deg, #fff 8%, #f0f8ff 64%, #eaf5ff 100%);
    min-height: 780px;
    padding: 175px 0 70px;
    position: relative;
}

.hr-hero::before {
    background-image: radial-gradient(rgba(19,120,245,.17) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    content: "";
    inset: 0 50% 0 0;
    mask-image: linear-gradient(to right, transparent, #000, transparent);
    opacity: .35;
    position: absolute;
}

.hr-orb {
    border: 1px solid rgba(19, 120, 245, .12);
    border-radius: 50%;
    position: absolute;
}

.hr-orb-one { height: 520px; right: -180px; top: 110px; width: 520px; }
.hr-orb-two { height: 260px; left: -130px; top: 360px; width: 260px; }

.hr-hero-grid {
    align-items: center;
    display: grid;
    gap: 55px;
    grid-template-columns: .82fr 1.18fr;
    position: relative;
    z-index: 2;
}

.hr-hero-copy h1 {
    color: var(--hr-navy);
    font-size: clamp(50px, 6vw, 80px);
    font-weight: 850;
    letter-spacing: -3.5px;
    line-height: .98;
    margin: 0 0 22px;
}

.hr-hero-copy h1 span {
    background: linear-gradient(125deg, var(--hr-blue), #04a8dc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hr-hero-copy h2 {
    color: #183854;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 20px;
}

.hr-hero-copy > p {
    color: var(--hr-text);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 30px;
}

.hr-demo-note {
    align-items: center;
    display: flex;
    font-size: 12px !important;
    gap: 7px;
    margin: 18px 0 0 !important;
}

.hr-hero-visual {
    min-height: 520px;
    perspective: 1200px;
    position: relative;
}

.hr-device-frame {
    background: #081d36;
    border: 9px solid #0d2745;
    border-radius: 22px;
    box-shadow: 0 35px 80px rgba(3, 35, 66, .28);
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 38px;
    transform: rotateY(-5deg) rotateX(2deg);
    width: 100%;
}

.hr-device-bar {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e6edf6;
    display: flex;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
}

.hr-device-bar span { background: #dfe8f2; border-radius: 50%; height: 7px; width: 7px; }
.hr-device-bar small { color: #8191a4; font-size: 8px; font-weight: 700; margin-left: auto; }
.hr-dashboard { background: #f5f8fd; display: grid; grid-template-columns: 118px 1fr; min-height: 415px; }
.hr-dashboard-nav { background: #0a2747; color: #a9bed4; padding: 22px 10px; }
.hr-dashboard-nav b { color: #fff; display: block; font-size: 16px; margin: 0 8px 22px; }
.hr-dashboard-nav b i { color: #3fa7ff; margin-right: 4px; }
.hr-dashboard-nav a { align-items: center; border-radius: 7px; color: #a9bed4; display: flex; font-size: 9px; gap: 7px; margin-bottom: 5px; padding: 8px; }
.hr-dashboard-nav a.active { background: #1378f5; color: #fff; }
.hr-dashboard-main { padding: 24px 20px; }
.hr-dashboard-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.hr-dashboard-head div { display: flex; flex-direction: column; }
.hr-dashboard-head small { color: #8c9bad; font-size: 9px; }
.hr-dashboard-head strong { font-size: 15px; }
.hr-dashboard-head > span { align-items: center; background: #fff; border-radius: 10px; box-shadow: 0 6px 14px rgba(12,48,83,.08); display: flex; height: 32px; justify-content: center; width: 32px; }
.hr-stat-row { display: grid; gap: 9px; grid-template-columns: repeat(4, 1fr); }
.hr-stat-row article { background: #fff; border: 1px solid #e7eef7; border-radius: 10px; display: grid; grid-template-columns: auto 1fr; padding: 11px; }
.hr-stat-row article > i { grid-row: 1 / 4; margin-right: 7px; }
.hr-stat-row small { color: #8191a4; font-size: 7px; }
.hr-stat-row strong { font-size: 16px; line-height: 1.1; }
.hr-stat-row em { color: #9aabba; font-size: 6px; font-style: normal; }
.blue-text { color: var(--hr-blue); }.green-text { color: var(--hr-green); }.coral-text { color: var(--hr-coral); }.purple-text { color: var(--hr-purple); }
.hr-chart-row { display: grid; gap: 12px; grid-template-columns: 1.55fr .75fr; margin-top: 13px; }
.hr-chart-row article { background: #fff; border: 1px solid #e7eef7; border-radius: 12px; padding: 14px; }
.hr-bars-card > div:first-child { display: flex; font-size: 9px; justify-content: space-between; }
.hr-bars-card small { color: #8b9caf; font-size: 7px; }
.hr-bars { align-items: flex-end; border-bottom: 1px solid #dce6f0; display: flex; gap: 9px; height: 125px; justify-content: space-around; padding: 15px 10px 0; }
.hr-bars span { animation: hr-grow 1.1s ease both; background: linear-gradient(#2e9cff, #176de6); border-radius: 4px 4px 0 0; height: var(--bar); width: 15px; }
.hr-events-card > b { display: block; font-size: 10px; margin-bottom: 12px; }
.hr-events-card p { align-items: center; display: flex; font-size: 8px; gap: 8px; line-height: 1.25; margin: 0 0 13px; }
.hr-events-card p i { align-items: center; background: #eaf4ff; border-radius: 8px; color: var(--hr-blue); display: flex; height: 26px; justify-content: center; width: 26px; }
.hr-events-card p span { display: flex; flex-direction: column; }
.hr-events-card p small { color: #90a0b1; font-size: 7px; }

.hr-float-card {
    align-items: center;
    animation: hr-float 5s ease-in-out infinite;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(19,120,245,.12);
    border-radius: 13px;
    box-shadow: 0 18px 45px rgba(20,70,118,.16);
    display: flex;
    font-size: 10px;
    gap: 8px;
    padding: 9px 12px;
    position: absolute;
    z-index: 3;
}

.hr-float-card .hr-icon { border-radius: 9px; font-size: 14px; height: 30px; width: 30px; }
.hr-float-one { right: -34px; top: 0; }
.hr-float-two { animation-delay: -1.5s; bottom: 40px; left: -26px; }
.hr-float-three { animation-delay: -3s; bottom: 5px; right: 8px; }
.hr-hero-benefits { border-top: 1px solid rgba(19,120,245,.16); display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); margin-top: 52px; padding-top: 28px; position: relative; z-index: 2; }
.hr-hero-benefits span { align-items: center; color: #21415e; display: flex; font-size: 13px; font-weight: 700; gap: 10px; }
.hr-hero-benefits i { color: var(--hr-blue); font-size: 20px; }

/* Cards and explorer */
.hr-benefit-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.hr-benefit-grid article { align-items: flex-start; background: linear-gradient(145deg, #fff, #f4f9ff); border: 1px solid var(--hr-line); border-radius: 18px; box-shadow: 0 16px 35px rgba(16,61,106,.07); display: flex; gap: 16px; padding: 25px; transition: transform .3s ease, box-shadow .3s ease; }
.hr-benefit-grid article:hover { box-shadow: var(--hr-shadow); transform: translateY(-6px); }
.hr-benefit-grid h3, .hr-card h3, .hr-industry-grid h3 { font-size: 17px; font-weight: 800; line-height: 1.3; margin: 4px 0 7px; }
.hr-benefit-grid p, .hr-card p, .hr-industry-grid p { font-size: 13px; line-height: 1.55; margin: 0; }
.hr-feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.hr-card { background: #fff; border: 1px solid var(--hr-line); border-radius: 18px; min-height: 220px; padding: 26px; position: relative; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.hr-card:hover { border-color: #9dcbff; box-shadow: var(--hr-shadow); transform: translateY(-7px); }
.hr-card h3 { margin-top: 22px; }
.hr-more-features { background: #fff; border: 1px solid var(--hr-line); border-radius: 16px; margin-top: 22px; }
.hr-more-features summary { align-items: center; color: var(--hr-blue-dark); cursor: pointer; display: flex; font-size: 15px; font-weight: 800; justify-content: space-between; padding: 20px 24px; }
.hr-more-features summary::marker { content: ""; }
.hr-more-features[open] summary i { transform: rotate(180deg); }
.hr-module-pills { border-top: 1px solid var(--hr-line); display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 24px 24px; }
.hr-module-pills span { background: #edf6ff; border-radius: 50px; color: #31516f; font-size: 12px; font-weight: 700; padding: 9px 14px; }
.hr-explorer { background: linear-gradient(180deg, #fff, #f5faff); }
.hr-explorer-shell { background: #fff; border: 1px solid var(--hr-line); border-radius: 24px; box-shadow: var(--hr-shadow); overflow: hidden; }
.hr-tabs { background: #f5f9fe; border-bottom: 1px solid var(--hr-line); display: flex; gap: 5px; overflow-x: auto; padding: 14px; scrollbar-width: none; }
.hr-tabs button { background: transparent; border: 0; border-radius: 10px; color: #526984; flex: 1 0 auto; font-size: 12px; font-weight: 800; padding: 13px 16px; text-transform: uppercase; }
.hr-tabs button.active { background: var(--hr-blue); box-shadow: 0 8px 18px rgba(19,120,245,.2); color: #fff; }
.hr-tab-preview { align-items: center; display: grid; gap: 55px; grid-template-columns: .75fr 1.25fr; min-height: 430px; padding: 46px; }
.hr-tab-preview.is-switching { opacity: .25; transform: translateY(7px); }
.hr-tab-preview { transition: opacity .18s ease, transform .18s ease; }
.hr-preview-copy > small { color: var(--hr-blue); display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-top: 18px; text-transform: uppercase; }
.hr-preview-copy h3 { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 8px 0 14px; }
.hr-preview-copy p { font-size: 15px; }
.hr-preview-copy ul { margin: 20px 0 0; }
.hr-preview-copy li { color: #38516d; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.hr-preview-copy li i { color: var(--hr-green); margin-right: 7px; }
.hr-preview-ui { background: #f5f8fc; border: 1px solid #dce7f3; border-radius: 17px; box-shadow: 0 18px 40px rgba(15,58,100,.11); padding: 22px; position: relative; }
.hr-preview-toolbar { align-items: center; display: grid; gap: 12px; grid-template-columns: 1fr 1fr auto; margin-bottom: 20px; }
.hr-preview-toolbar span { background: #fff; border: 1px solid #dce7f3; border-radius: 7px; color: #9aa9b8; font-size: 10px; padding: 9px; }
.hr-preview-toolbar button { background: var(--hr-blue); border: 0; border-radius: 7px; color: #fff; font-size: 9px; padding: 10px; }
.hr-table-head, .hr-table-row { align-items: center; display: grid; grid-template-columns: 1.3fr 1fr .5fr; padding: 10px; }
.hr-table-head { color: #8596a8; font-size: 9px; font-weight: 700; }
.hr-table-row { background: #fff; border-radius: 9px; font-size: 10px; margin-bottom: 8px; }
.hr-table-row b { align-items: center; display: flex; gap: 8px; }
.hr-table-row b i { align-items: center; background: #e8f3ff; border-radius: 50%; color: var(--hr-blue); display: flex; font-size: 8px; height: 25px; justify-content: center; width: 25px; }
.hr-table-row em { background: #e5f8ef; border-radius: 20px; color: #079663; font-size: 8px; font-style: normal; padding: 4px 8px; text-align: center; }
.hr-sample-tag { color: #8294a7; font-size: 8px; font-weight: 800; letter-spacing: 1px; }

/* Self service and ecosystem */
.hr-self-service { background: #fff; }
.hr-self-grid { align-items: center; display: grid; gap: 90px; grid-template-columns: 1fr 1fr; }
.hr-self-visual { background: radial-gradient(circle at 20% 15%, #d7edff, transparent 40%), linear-gradient(145deg, #eff8ff, #dfefff); border-radius: 28px; min-height: 540px; padding: 55px; position: relative; }
.hr-self-visual::after { border: 1px dashed rgba(19,120,245,.35); border-radius: 50%; content: ""; height: 330px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 330px; }
.hr-self-screen { background: #fff; border: 7px solid #0b2947; border-radius: 25px; box-shadow: 0 30px 65px rgba(7,38,70,.23); margin: 0 auto; max-width: 345px; min-height: 430px; padding: 26px 22px; position: relative; transform: rotate(-2deg); z-index: 2; }
.hr-self-profile { align-items: center; display: flex; gap: 12px; margin-bottom: 26px; }
.hr-self-profile > span { align-items: center; background: linear-gradient(135deg, var(--hr-blue), var(--hr-purple)); border-radius: 50%; color: #fff; display: flex; font-weight: 800; height: 48px; justify-content: center; width: 48px; }
.hr-self-profile div { display: flex; flex-direction: column; }
.hr-self-profile small { color: #8496aa; font-size: 10px; }
.hr-self-actions { display: grid; gap: 10px; grid-template-columns: repeat(2,1fr); }
.hr-self-actions article { align-items: center; background: #f4f8fd; border: 1px solid #e3edf7; border-radius: 12px; display: flex; flex-direction: column; font-size: 10px; gap: 8px; padding: 18px 8px; text-align: center; }
.hr-self-actions i { color: var(--hr-blue); font-size: 22px; }
.hr-request { align-items: center; background: #e6f9f2; border-radius: 11px; color: var(--hr-green); display: flex; gap: 11px; margin-top: 17px; padding: 13px; }
.hr-request span { color: #244660; display: flex; flex-direction: column; font-size: 10px; font-weight: 700; }
.hr-request small { color: #8296a7; font-size: 8px; }
.hr-check-grid { display: grid; gap: 12px; grid-template-columns: repeat(2,1fr); margin-bottom: 26px; }
.hr-check-grid span { color: #264561; font-size: 13px; font-weight: 700; }
.hr-check-grid i { align-items: center; background: #e2f8ef; border-radius: 50%; color: var(--hr-green); display: inline-flex; height: 22px; justify-content: center; margin-right: 7px; width: 22px; }
.hr-mini-benefits { display: grid; gap: 10px; grid-template-columns: repeat(4,1fr); margin-bottom: 28px; }
.hr-mini-benefits span { align-items: center; color: #31506c; display: flex; flex-direction: column; font-size: 9px; font-weight: 800; gap: 6px; text-align: center; }
.hr-mini-benefits i { color: var(--hr-blue); font-size: 20px; }
.hr-ecosystem-section { background: #071f3b; color: #fff; }
.hr-ecosystem-section h2, .hr-ecosystem-section .hr-section-head p { color: #fff; }
.hr-ecosystem { height: 670px; margin: 0 auto; max-width: 1050px; position: relative; }
.hr-ecosystem-ring { animation: hr-spin 28s linear infinite; border: 1px dashed rgba(85,177,255,.52); border-radius: 50%; height: 490px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 490px; }
.hr-ecosystem-ring::before,
.hr-ecosystem-ring::after {
    background: #37a5ff;
    border-radius: 50%;
    box-shadow: 0 0 18px #37a5ff;
    content: "";
    height: 8px;
    left: 50%;
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    width: 8px;
}
.hr-ecosystem-ring::after {
    bottom: -4px;
    left: 50%;
    right: auto;
    top: auto;
}
.hr-eco-center { align-items: center; background: linear-gradient(145deg, #168cff, #1657de); border: 15px solid rgba(72,167,255,.17); border-radius: 50%; box-shadow: 0 0 60px rgba(35,145,255,.35); display: flex; flex-direction: column; height: 205px; justify-content: center; left: 50%; position: absolute; text-align: center; top: 50%; transform: translate(-50%,-50%); width: 205px; z-index: 2; }
.hr-eco-center i { font-size: 36px; margin-bottom: 10px; }
.hr-eco-center strong { color: #fff; font-size: 21px; line-height: 1.2; }
.eco-item { align-items: center; background: #112f4e; border: 1px solid #2b4c6c; border-radius: 50px; color: #fff; display: flex; gap: 13px; min-width: 210px; padding: 11px 16px; position: absolute; text-align: left; transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.eco-item:hover, .eco-item:focus { background: #124e80; border-color: #42aaff; color: #fff; transform: translateY(-4px) scale(1.03); }
.eco-item > i { align-items: center; background: #174976; border-radius: 50%; color: #4eb3ff; display: flex; font-size: 18px; height: 42px; justify-content: center; width: 42px; }
.eco-item span { display: flex; flex-direction: column; font-size: 13px; font-weight: 800; }
.eco-item small { color: #a9c5df; font-size: 9px; font-weight: 500; margin-top: 2px; }
.eco-1 { left: 50%; top: 8px; transform: translateX(-50%); }.eco-2 { left: 115px; top: 105px; }.eco-3 { right: 115px; top: 105px; }.eco-4 { left: 15px; top: 278px; }.eco-5 { right: 15px; top: 278px; }.eco-6 { bottom: 105px; left: 90px; }.eco-7 { bottom: 105px; right: 90px; }.eco-8 { bottom: 5px; left: 265px; }.eco-9 { bottom: 5px; right: 265px; }
.eco-1:hover { transform: translateX(-50%) translateY(-4px) scale(1.03); }

/* Journey, charts, product showcase */
.hr-lifecycle { background: #fff; }
.hr-lifecycle .hr-section-head {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 48px;
    max-width: 980px;
}

.hr-lifecycle .hr-section-head .hr-eyebrow {
    margin-bottom: 15px;
}

.hr-lifecycle .hr-section-head h2 {
    font-size: clamp(38px, 3.4vw, 52px);
    margin-bottom: 0;
    max-width: none;
    white-space: nowrap;
}
.hr-journey { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.hr-journey::before { background: linear-gradient(90deg,var(--hr-blue),var(--hr-green)); content: ""; height: 3px; left: 7%; position: absolute; right: 7%; top: 34px; }
.hr-journey article { align-items: center; display: flex; flex-direction: column; position: relative; text-align: center; }
.hr-journey article > span { align-items: center; background: #fff; border: 2px solid #9dccff; border-radius: 50%; box-shadow: 0 8px 20px rgba(19,120,245,.13); color: var(--hr-blue); display: flex; font-size: 21px; height: 70px; justify-content: center; margin-bottom: 17px; transition: .3s ease; width: 70px; z-index: 2; }
.hr-journey article:hover > span { background: var(--hr-blue); color: #fff; transform: translateY(-5px); }
.hr-journey b { font-size: 14px; }
.hr-journey small { color: #73869b; font-size: 10px; margin-top: 3px; }
.hr-analytics { background: linear-gradient(180deg,#f1f8ff,#fff); }
.hr-analytics .hr-section-head > div {
    flex: 1;
    max-width: none;
    min-width: 0;
}

.hr-analytics .hr-section-head h2 {
    font-size: clamp(38px, 3.4vw, 52px);
    white-space: nowrap;
}
.hr-period { background: #fff; border: 1px solid var(--hr-line); border-radius: 9px; color: #526b84; font-size: 12px; font-weight: 700; padding: 10px 15px; }
.hr-data-notice { align-items: center; display: flex; font-size: 11px !important; gap: 7px; margin: -28px 0 28px; }
.hr-kpi-grid { display: grid; gap: 16px; grid-template-columns: repeat(4,1fr); }
.hr-kpi-grid article { background: #fff; border: 1px solid var(--hr-line); border-radius: 17px; display: grid; grid-template-columns: auto 1fr; padding: 23px; }
.hr-kpi-grid .hr-icon { grid-row: 1 / 4; margin-right: 15px; }
.hr-kpi-grid small { color: #70849a; font-size: 11px; }
.hr-kpi-grid strong { font-size: 29px; line-height: 1.2; }
.hr-kpi-grid em { color: #99a7b6; font-size: 9px; font-style: normal; }
.hr-analytics-grid { display: grid; gap: 18px; grid-template-columns: 1.55fr .75fr; margin-top: 18px; }
.hr-analytics-grid article { background: #fff; border: 1px solid var(--hr-line); border-radius: 18px; min-height: 350px; padding: 25px; }
.hr-analytics-grid article > div:first-child { align-items: center; display: flex; justify-content: space-between; }
.hr-analytics-grid h3 { font-size: 17px; margin: 0; }
.hr-analytics-grid article > div:first-child span { color: #8c9bad; font-size: 10px; }
.hr-line-chart svg { height: 230px; margin-top: 25px; overflow: visible; width: 100%; }
.chart-area { fill: url(#lineFill); }
.chart-line { fill: none; stroke: var(--hr-blue); stroke-dasharray: 800; stroke-dashoffset: 800; stroke-linecap: round; stroke-width: 5; }
.is-visible .chart-line { animation: hr-draw 1.8s ease forwards; }
.hr-chart-labels { color: #8193a8; display: flex; font-size: 9px; justify-content: space-between; padding: 0 10px; }
.hr-department-chart { display: grid; grid-template-columns: 1fr 1fr; }
.hr-department-chart > div:first-child { grid-column: 1 / 3; }
.hr-donut { align-items: center; background: conic-gradient(var(--hr-blue) 0 36%,var(--hr-green) 36% 64%,var(--hr-purple) 64% 85%,var(--hr-orange) 85%); border-radius: 50%; display: flex; height: 165px; justify-content: center; margin: 30px auto; position: relative; width: 165px; }
.hr-donut::after { background: #fff; border-radius: 50%; content: ""; height: 105px; position: absolute; width: 105px; }
.hr-donut strong { display: flex; flex-direction: column; font-size: 24px; position: relative; text-align: center; z-index: 2; }
.hr-donut small { color: #7f91a4; font-size: 9px; }
.hr-department-chart ul { align-self: center; }
.hr-department-chart li { color: #526a82; display: flex; font-size: 10px; margin-bottom: 12px; }
.hr-department-chart li i { border-radius: 50%; height: 8px; margin: 3px 7px 0 0; width: 8px; }.blue-dot{background:var(--hr-blue)}.green-dot{background:var(--hr-green)}.purple-dot{background:var(--hr-purple)}.orange-dot{background:var(--hr-orange)}
.hr-department-chart li b { margin-left: auto; }
.hr-showcase { background: #fff; }
.hr-product-showcase { background: #0b2745; border: 9px solid #0b2745; border-radius: 24px; box-shadow: 0 35px 80px rgba(7,31,59,.22); margin: 0 auto; max-width: 1120px; overflow: hidden; }
.hr-browser-top { align-items: center; display: flex; gap: 7px; height: 34px; padding: 0 13px; }
.hr-browser-top span { background: #375069; border-radius: 50%; height: 7px; width: 7px; }
.hr-browser-top b { color: #c5d6e7; font-size: 9px; margin-left: 8px; }
.hr-product-showcase img { display: block; width: 100%; }

/* Devices through customization */
.hr-devices { background: linear-gradient(100deg,#f8fbff,#e8f5ff); }
.hr-device-grid { align-items: center; display: grid; gap: 70px; grid-template-columns: .8fr 1.2fr; }
.hr-device-grid > * {
    min-width: 0;
}
.hr-device-mockups { height: 430px; position: relative; }
.hr-monitor { background: #09233f; border: 9px solid #09233f; border-radius: 15px; height: 290px; left: 35px; position: absolute; top: 35px; width: 465px; }
.hr-monitor::after { background: #173b61; bottom: -60px; content: ""; height: 60px; left: 48%; position: absolute; width: 20px; }
.hr-monitor::before { background: #173b61; border-radius: 50%; bottom: -70px; content: ""; height: 14px; left: 37%; position: absolute; width: 130px; }
.hr-tablet { background: #102d4c; border: 7px solid #102d4c; border-radius: 17px; bottom: 12px; height: 250px; position: absolute; right: 18px; width: 175px; z-index: 2; }
.hr-phone { background: #061b31; border: 6px solid #061b31; border-radius: 21px; bottom: 3px; height: 225px; left: 0; position: absolute; width: 116px; z-index: 3; }
.device-ui { background: #fff; border-radius: 7px; height: 100%; overflow: hidden; padding: 20px; }
.device-ui b { display: block; font-size: 13px; }
.device-ui span { background: #edf4fb; border-radius: 5px; display: block; height: 35px; margin-top: 10px; }
.device-bars { align-items: flex-end; display: flex; gap: 14px; height: 170px; justify-content: center; }
.device-bars i { background: linear-gradient(var(--hr-blue),#5fb9ff); border-radius: 5px 5px 0 0; height: 40%; width: 35px; }.device-bars i:nth-child(2){height:65%}.device-bars i:nth-child(3){height:52%}.device-bars i:nth-child(4){height:82%}.device-bars i:nth-child(5){height:70%}
.hr-device-mockups > div > small { bottom: -31px; color: #60758b; font-size: 10px; font-weight: 800; left: 50%; position: absolute; transform: translateX(-50%); }
.hr-phone .device-ui { padding: 12px 8px; text-align: center; }.hr-phone .device-ui b{font-size:9px}.hr-phone .device-ui > i{color:var(--hr-blue);display:block;font-size:27px;margin:14px}.hr-phone .device-ui span{align-items:center;display:flex;font-size:7px;height:24px;justify-content:center}
.hr-modules { display: grid; gap: 13px; grid-template-columns: repeat(6,1fr); position: relative; }
.hr-modules span { align-items: center; background: #fff; border: 1px solid var(--hr-line); border-radius: 14px; color: #304d68; display: flex; flex-direction: column; font-size: 11px; font-weight: 800; gap: 10px; min-height: 115px; justify-content: center; position: relative; text-align: center; transition: .3s ease; }
.hr-modules span:hover { border-color: #77b8ff; box-shadow: 0 16px 32px rgba(19,120,245,.13); color: var(--hr-blue); transform: translateY(-6px); }
.hr-modules i { color: var(--hr-blue); font-size: 24px; }
.hr-six-grid { display: grid; gap: 18px; grid-template-columns: repeat(3,1fr); }
.hr-benefits-section .hr-section-head {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 48px;
    max-width: 900px;
}

.hr-benefits-section .hr-section-head .hr-eyebrow {
    margin-bottom: 15px;
}

.hr-benefits-section .hr-section-head h2 {
    margin-bottom: 0;
}
.hr-six-grid .hr-card { min-height: 190px; }
.hr-security { background: #071f3b; color: #fff; }
.hr-security h2, .hr-security h3, .hr-security p { color: #fff; }
.hr-security-grid { align-items: center; display: grid; gap: 80px; grid-template-columns: .8fr 1.2fr; }
.hr-security-seal { align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; display: flex; gap: 14px; padding: 18px; }
.hr-security-seal i { color: #53b7ff; font-size: 36px; }
.hr-security-seal span { font-size: 14px; font-weight: 800; }.hr-security-seal small { color: #a8c2d9; font-size: 10px; font-weight: 500; }
.hr-security-list { display: grid; gap: 14px; grid-template-columns: repeat(2,1fr); }
.hr-security-list article { align-items: flex-start; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; display: flex; gap: 14px; padding: 20px; }
.hr-security-list article:last-child { grid-column: 1 / 3; }
.hr-security-list article > i { align-items: center; background: rgba(39,155,255,.14); border-radius: 11px; color: #4db4ff; display: flex; font-size: 21px; height: 45px; justify-content: center; width: 45px; }
.hr-security-list h3 { font-size: 14px; margin: 0 0 5px; }.hr-security-list p { color:#adc3d8;font-size:11px;line-height:1.5;margin:0; }
.hr-industry-grid { display: grid; gap: 14px; grid-template-columns: repeat(5,1fr); }
.hr-industry-grid article { border: 1px solid var(--hr-line); border-radius: 16px; min-height: 190px; padding: 22px; transition: .3s ease; }
.hr-industry-grid article:hover { box-shadow: var(--hr-shadow); transform: translateY(-6px); }
.hr-industry-grid h3 { margin-top: 18px; }
.hr-flow-section { background: linear-gradient(120deg,#061d37,#0a3c69); }
.hr-flow-section h2 { color: #fff; }
.hr-flow { align-items: center; display: flex; justify-content: center; }
.hr-flow span { align-items: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; display: flex; font-size: 11px; font-weight: 800; height: 82px; justify-content: center; text-transform: uppercase; width: 82px; }
.hr-flow i { background: rgba(107,194,255,.25); height: 2px; overflow: hidden; position: relative; width: 45px; }
.hr-flow i::after { animation: hr-flow 2s linear infinite; background: #52c5ff; border-radius: 50%; box-shadow: 0 0 10px #52c5ff; content:"";height:6px;left:-6px;position:absolute;top:-2px;width:6px; }
.hr-admin-grid { align-items: center; display: grid; gap: 70px; grid-template-columns: .7fr 1.3fr; }
.hr-admin-tasks { display: grid; gap: 11px; grid-template-columns: repeat(2,1fr); margin: 25px 0; }
.hr-admin-tasks span { align-items:center;background:#f4f9ff;border:1px solid var(--hr-line);border-radius:12px;color:#3c5772;display:flex;font-size:11px;font-weight:700;gap:10px;padding:12px; }
.hr-admin-tasks b { color:var(--hr-blue);font-size:20px; }
.hr-admin-preview { border: 7px solid #0b2947; border-radius: 18px; box-shadow: var(--hr-shadow); overflow: hidden; }.hr-admin-preview img{display:block;width:100%;}
.hr-experience {
    background: linear-gradient(#fff, #f3f9ff);
}

.hr-experience .hr-section-head {
    margin-bottom: 58px;
    max-width: 900px;
}

.hr-experience .hr-section-head h2 {
    max-width: 820px;
}

.hr-dual {
    align-items: stretch;
    display: grid;
    gap: clamp(22px, 3vw, 46px);
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1320px;
}

.hr-dual > article {
    align-items: center;
    background: #fff;
    border: 1px solid var(--hr-line);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(12, 55, 98, .08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 270px;
    min-width: 0;
    padding: 34px 26px;
    text-align: center;
}

.hr-dual h3 {
    font-size: clamp(21px, 2vw, 28px);
    margin: 17px 0;
}

.hr-dual article > div {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    width: 100%;
}

.hr-dual article > div span {
    background: #eff6fd;
    border-radius: 30px;
    color: #355675;
    flex: 0 1 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 9px 14px;
    white-space: nowrap;
}

.hr-dual-center {
    align-items: center;
    align-self: center;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--hr-blue), #10a7da);
    border-radius: 50%;
    box-shadow: 0 0 0 17px rgba(19, 120, 245, .09), 0 20px 45px rgba(19, 120, 245, .25);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: center;
    box-sizing: border-box;
    flex: 0 0 220px;
    height: 220px;
    padding: 25px;
    text-align: center;
    width: 220px;
    z-index: 2;
}

.hr-dual-center i {
    font-size: 38px;
}

.hr-dual-center b {
    color: #fff;
    font-size: 18px;
    line-height: 1.25;
    margin-top: 10px;
}

.hr-dual-center small {
    color: rgba(255, 255, 255, .82);
    font-size: 10px;
    line-height: 1.4;
    margin-top: 7px;
}
.hr-custom-grid { display:grid;gap:13px;grid-template-columns:repeat(2,1fr); }.hr-custom-grid span{align-items:center;background:#fff;border:1px solid var(--hr-line);border-radius:13px;color:#2f4d69;display:flex;font-size:13px;font-weight:800;gap:12px;padding:17px}.hr-custom-grid i{align-items:center;background:#eaf4ff;border-radius:10px;color:var(--hr-blue);display:flex;font-size:18px;height:38px;justify-content:center;width:38px}

/* Transformation, FAQ and CTA */
.hr-transform { background:#071f3b; }.hr-transform h2{color:#fff}.hr-before-after{align-items:stretch;display:grid;gap:25px;grid-template-columns:1fr auto 1fr;margin:0 auto;max-width:990px}.hr-before-after article{border-radius:22px;padding:35px}.hr-before{background:#152d45;border:1px solid #314961}.hr-after{background:linear-gradient(145deg,#0b4371,#0c6bb1);border:1px solid #218cd2}.hr-before-after small{color:#70baff;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.hr-before-after h3{color:#fff;font-size:23px;margin:8px 0 22px}.hr-before-after li{color:#c4d6e6;font-size:13px;margin-bottom:13px}.hr-before li i{color:#ff718a;margin-right:8px}.hr-after li i{color:#54e1ae;margin-right:8px}.hr-transform-arrow{align-items:center;color:#fff;display:flex;flex-direction:column;gap:5px;justify-content:center}.hr-transform-arrow i{align-items:center;background:var(--hr-blue);border-radius:50%;display:flex;font-size:25px;height:58px;justify-content:center;width:58px}.hr-transform-arrow span{font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.hr-faq { background:#fff; }.hr-faq-list{display:grid;gap:12px;margin:0 auto;max-width:950px}.hr-faq-list details{border:1px solid var(--hr-line);border-radius:13px;overflow:hidden;transition:.3s ease}.hr-faq-list details[open]{border-color:#8fc5ff;box-shadow:0 12px 30px rgba(19,120,245,.08)}.hr-faq-list summary{align-items:center;color:var(--hr-navy);cursor:pointer;display:flex;font-size:15px;font-weight:800;justify-content:space-between;padding:19px 22px}.hr-faq-list summary::marker{content:""}.hr-faq-list summary i{color:var(--hr-blue);transition:.3s ease}.hr-faq-list details[open] summary i{transform:rotate(45deg)}.hr-faq-list details p{border-top:1px solid #e8eff7;font-size:13px;line-height:1.7;margin:0;padding:17px 22px}
.hr-final-wrap { background:#edf6ff;padding:0 0 90px; }.hr-final-cta{align-items:center;background:linear-gradient(120deg,#071f3b,#0b4779);border-radius:28px;color:#fff;display:grid;grid-template-columns:1.2fr .8fr;min-height:430px;overflow:hidden;padding:65px;position:relative}.hr-final-cta::before{background:radial-gradient(circle,rgba(70,171,255,.22),transparent 65%);content:"";height:600px;position:absolute;right:-180px;top:-220px;width:600px}.hr-final-cta h2,.hr-final-cta p{color:#fff}.hr-final-cta > div{position:relative;z-index:2}.hr-btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}.hr-final-points{align-items:center;color:#c2d6e9;display:flex;font-size:11px;font-weight:700;gap:12px;margin-top:24px}.hr-final-points i{background:#57b8ff;border-radius:50%;height:4px;width:4px}.hr-final-visual{height:300px;position:relative}.hr-final-dashboard{background:#fff;border:8px solid #0b2948;border-radius:20px;box-shadow:0 25px 55px rgba(1,18,35,.3);height:245px;padding:22px;position:absolute;right:-20px;top:10px;transform:rotate(3deg);width:350px}.hr-final-dashboard > i{color:var(--hr-blue);font-size:26px;margin-right:8px}.hr-final-dashboard b{color:var(--hr-navy);font-size:13px}.hr-final-dashboard > div{align-items:flex-end;background:#f1f7fd;border-radius:10px;display:flex;gap:14px;height:135px;justify-content:center;margin-top:17px;padding:18px}.hr-final-dashboard span{background:linear-gradient(#3ea5ff,#176de6);border-radius:5px 5px 0 0;height:var(--h);width:32px}.hr-final-badge{align-items:center;background:#fff;border-radius:12px;bottom:5px;box-shadow:0 14px 35px rgba(3,26,50,.24);color:#294862;display:flex;font-size:11px;font-weight:800;gap:8px;padding:13px 17px;position:absolute;right:170px;z-index:2}.hr-final-badge i{color:var(--hr-green);font-size:18px}

/* Reveal and animation */
.hr-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }.hr-reveal.is-visible{opacity:1;transform:none}
@keyframes hr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hr-grow{from{height:0}to{height:var(--bar)}}
@keyframes hr-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes hr-draw{to{stroke-dashoffset:0}}
@keyframes hr-flow{to{left:100%}}

@media (max-width: 1199px) {
    .hr-hero-grid { grid-template-columns: .9fr 1.1fr; }
    .hr-hero-copy h1 { font-size: 57px; }
    .hr-dashboard { grid-template-columns: 95px 1fr; }
    .hr-feature-grid { grid-template-columns: repeat(3,1fr); }
    .hr-ecosystem { transform: scale(.9); }
    .hr-modules { grid-template-columns: repeat(4,1fr); }
    .hr-industry-grid { grid-template-columns: repeat(4,1fr); }
    .hr-flow span { height:72px;width:72px; }.hr-flow i{width:24px}
    .hr-dual {
        gap: 20px;
        grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
    }
    .hr-dual-center {
        flex-basis: 180px;
        height: 180px;
        width: 180px;
    }
    .hr-dual > article {
        padding: 28px 20px;
    }
    .hr-dual article > div span {
        font-size: 11px;
        padding: 8px 11px;
    }
}

@media (max-width: 991px) {
    .hrms-page .hr-section { padding: 80px 0; }
    .hr-hero { padding-top: 145px; }
    .hr-hero-grid, .hr-split, .hr-self-grid, .hr-device-grid, .hr-security-grid, .hr-admin-grid { grid-template-columns: 1fr; }
    .hr-hero-copy { max-width: 680px; }
    .hr-hero-visual { margin-top:20px; }
    .hr-feature-grid { grid-template-columns: repeat(2,1fr); }
    .hr-tab-preview { gap:30px;grid-template-columns:1fr;padding:35px; }
    .hr-self-grid, .hr-device-grid { gap:50px; }
    .hr-security-grid {
        gap: 42px;
    }
    .hr-self-visual { min-height:500px; }
    .hr-ecosystem { height:760px;transform:none; }
    .eco-2{left:10px}.eco-3{right:10px}.eco-4{left:0;top:300px}.eco-5{right:0;top:300px}.eco-6{bottom:120px;left:30px}.eco-7{bottom:120px;right:30px}.eco-8{bottom:10px;left:160px}.eco-9{bottom:10px;right:160px}
    .hr-journey { gap:15px;grid-template-columns:repeat(4,1fr);row-gap:35px}.hr-journey::before{display:none}
    .hr-kpi-grid{grid-template-columns:repeat(2,1fr)}.hr-analytics-grid{grid-template-columns:1fr}.hr-department-chart{grid-template-columns:1fr 1fr}
    .hr-device-mockups { margin:auto;max-width:620px;width:100%; }
    .hr-six-grid{grid-template-columns:repeat(2,1fr)}.hr-security-list{grid-template-columns:repeat(2,1fr)}
    .hr-industry-grid{grid-template-columns:repeat(3,1fr)}
    .hr-flow{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}.hr-flow span{border-radius:14px;height:65px;width:100%}.hr-flow i{display:none}
    .hr-admin-preview{order:-1}
    .hr-experience .hr-section-head {
        margin-bottom: 42px;
    }
    .hr-dual {
        gap: 28px;
        grid-template-areas:
            "admin employee"
            "hub hub";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hr-dual > article:first-child {
        grid-area: admin;
    }
    .hr-dual > article:last-child {
        grid-area: employee;
    }
    .hr-dual-center {
        grid-area: hub;
        flex-basis: 190px;
        height: 190px;
        width: 190px;
    }
    .hr-final-cta{grid-template-columns:1fr;padding:55px}.hr-final-visual{display:none}
    .hr-lifecycle .hr-section-head h2,
    .hr-analytics .hr-section-head h2 {
        font-size: 40px;
        white-space: normal;
    }
    #showcase-title,
    #modules-title,
    #industries-title,
    #experience-title,
    #choose-title {
        font-size: 40px;
        white-space: normal;
    }
}

@media (max-width: 767px) {
    .hrms-page .hr-section { padding:65px 0; }
    .hr-section h2, .hr-final-cta h2 { font-size:34px;letter-spacing:-1px; }
    .hr-section p, .hr-final-cta p { font-size:15px; }
    .hr-section-head { align-items:flex-start;flex-direction:column;margin-bottom:32px; }
    .hr-hero { min-height:auto;padding:125px 0 55px; }
    .hr-hero-copy h1{font-size:48px;letter-spacing:-2px}.hr-hero-copy h2{font-size:20px}
    .hr-actions{align-items:stretch;flex-direction:column}.hr-btn{width:100%}
    .hr-hero-visual{min-height:395px}.hr-device-frame{border-width:5px;top:45px;transform:none}.hr-dashboard{grid-template-columns:1fr;min-height:320px}.hr-dashboard-nav{display:none}.hr-dashboard-main{padding:14px}.hr-stat-row{grid-template-columns:repeat(2,1fr)}.hr-chart-row{grid-template-columns:1fr}.hr-events-card{display:none}.hr-bars{height:92px}
    .hr-float-card{display:none}.hr-hero-benefits{grid-template-columns:repeat(2,1fr);margin-top:20px}.hr-hero-benefits span{font-size:11px}
    .hr-benefit-grid,.hr-feature-grid,.hr-six-grid,.hr-security-list,.hr-industry-grid{grid-template-columns:1fr}.hr-benefit-grid article{padding:20px}.hr-card{min-height:auto}.hr-security-list article:last-child{grid-column:auto}
    .hr-security-grid {
        gap: 26px;
    }
    .hr-security .hr-section-copy p {
        margin-bottom: 20px;
    }
    .hr-security-seal {
        border-radius: 14px;
        min-height: 78px;
        padding: 15px 17px;
    }
    .hr-security-seal i {
        font-size: 30px;
    }
    .hr-security-seal span {
        font-size: 13px;
        line-height: 1.35;
    }
    .hr-security-list {
        gap: 11px;
    }
    .hr-security-list article {
        align-items: center;
        gap: 13px;
        min-height: 86px;
        padding: 16px;
    }
    .hr-security-list article > i {
        flex: 0 0 42px;
        height: 42px;
        width: 42px;
    }
    .hr-security-list h3 {
        font-size: 14px;
        line-height: 1.3;
    }
    .hr-security-list p {
        font-size: 11px;
        line-height: 1.45;
    }
    .hr-tab-preview{padding:22px}.hr-preview-toolbar{grid-template-columns:1fr auto}.hr-preview-toolbar span{display:none}.hr-preview-copy h3{font-size:25px}.hr-table-head,.hr-table-row{grid-template-columns:1.5fr .8fr}.hr-table-head span:last-child,.hr-table-row em{display:none}
    .hr-self-visual{min-height:450px;padding:32px 16px}.hr-self-screen{max-width:310px}.hr-check-grid{grid-template-columns:1fr}.hr-mini-benefits{grid-template-columns:repeat(2,1fr)}
    .hr-ecosystem{display:grid;gap:10px;height:auto;grid-template-columns:1fr;margin-top:30px}.hr-ecosystem-ring{display:none}.hr-eco-center{height:160px;margin:0 auto 10px;position:static;transform:none;width:160px}.eco-item,.eco-1,.eco-2,.eco-3,.eco-4,.eco-5,.eco-6,.eco-7,.eco-8,.eco-9{left:auto;min-width:0;position:static;right:auto;top:auto;transform:none;width:100%}.eco-1:hover{transform:translateY(-4px)}
    .hr-journey{grid-template-columns:repeat(2,1fr)}
    .hr-lifecycle .hr-section-head {
        margin-bottom: 34px;
    }
    .hr-lifecycle .hr-section-head h2 {
        font-size: 34px;
        max-width: 100%;
    }
    .hr-analytics .hr-section-head h2 {
        font-size: 34px;
    }
    #showcase-title,
    #modules-title,
    #industries-title,
    #experience-title,
    #choose-title {
        font-size: 34px;
    }
    .hr-benefits-section .hr-section-head {
        margin-bottom: 34px;
    }
    .hr-kpi-grid{grid-template-columns:1fr}.hr-data-notice{margin-top:-14px}.hr-department-chart{grid-template-columns:1fr}.hr-department-chart > div:first-child{grid-column:auto}.hr-department-chart ul{padding:0 20px}
    .hr-product-showcase{border-width:5px;border-radius:14px}.hr-browser-top{height:28px}
    .hr-devices {
        overflow: hidden;
    }
    .hr-device-grid {
        gap: 42px;
    }
    .hr-devices .hr-section-copy {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }
    .hr-devices .hr-section-copy h2,
    .hr-devices .hr-section-copy p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .hr-devices .hr-actions,
    .hr-devices .hr-btn {
        max-width: 100%;
        min-width: 0;
    }
    .hr-device-mockups {
        height: 340px;
        margin: 0 auto;
        max-width: 520px;
        min-width: 0;
        transform: none;
        width: 100%;
    }
    .hr-monitor {
        border-width: 6px;
        height: 225px;
        left: 50%;
        top: 24px;
        transform: translateX(-50%);
        width: calc(100% - 36px);
    }
    .hr-monitor::after {
        bottom: -43px;
        height: 43px;
        width: 15px;
    }
    .hr-monitor::before {
        bottom: -52px;
        height: 11px;
        left: 34%;
        width: 32%;
    }
    .hr-monitor .device-ui {
        padding: 16px;
    }
    .hr-monitor .device-bars {
        gap: clamp(8px, 3vw, 14px);
        height: 140px;
    }
    .hr-monitor .device-bars i {
        max-width: 30px;
        width: 12%;
    }
    .hr-tablet {
        border-width: 5px;
        bottom: 18px;
        height: 190px;
        right: 4px;
        width: 122px;
    }
    .hr-phone {
        border-width: 5px;
        bottom: 15px;
        height: 180px;
        left: 3px;
        width: 91px;
    }
    .hr-tablet .device-ui {
        padding: 12px 10px;
    }
    .hr-device-mockups > div > small {
        bottom: -25px;
    }
    .hr-modules{grid-template-columns:repeat(2,1fr)}
    .hr-flow{grid-template-columns:repeat(2,1fr)}
    .hr-admin-tasks,.hr-custom-grid{grid-template-columns:1fr}
    .hr-experience .hr-section-head {
        align-items: center;
        margin-bottom: 34px;
        text-align: center;
    }
    .hr-dual {
        gap: 22px;
        grid-template-areas:
            "admin"
            "hub"
            "employee";
        grid-template-columns: minmax(0, 1fr);
    }
    .hr-dual > article {
        min-height: 235px;
        padding: 28px 20px;
    }
    .hr-dual-center {
        flex-basis: 165px;
        height: 165px;
        width: 165px;
    }
    .hr-before-after {
        grid-template-columns: 1fr;
    }
    .hr-transform-arrow {
        flex-direction: column;
        gap: 9px;
        justify-self: center;
        min-height: 86px;
        width: 100%;
    }
    .hr-transform-arrow i {
        box-shadow: 0 0 0 9px rgba(19, 120, 245, .12), 0 10px 25px rgba(0, 0, 0, .2);
        flex: 0 0 54px;
        font-size: 23px;
        height: 54px;
        transform: rotate(90deg);
        width: 54px;
    }
    .hr-transform-arrow span {
        color: #bcd4ea;
        font-size: 10px;
        letter-spacing: 1.4px;
        line-height: 1;
    }
    .hr-final-wrap{padding-bottom:60px}.hr-final-cta{border-radius:20px;padding:36px 22px}.hr-final-points{align-items:flex-start;flex-direction:column}.hr-final-points i{display:none}
}

@media (max-width: 420px) {
    .hr-hero-copy h1 { font-size:42px; }
    .hr-hero-benefits { grid-template-columns:1fr; }
    .hr-stat-row article { padding:9px; }
    .hr-dashboard-main { padding:10px; }
    .hr-feature-grid,.hr-modules { grid-template-columns:1fr; }
    .hr-device-mockups {
        height: 305px;
        transform: none;
        width: 100%;
    }
    .hr-monitor {
        height: 205px;
        top: 20px;
        width: calc(100% - 22px);
    }
    .hr-monitor .device-ui {
        padding: 13px;
    }
    .hr-monitor .device-bars {
        gap: 7px;
        height: 128px;
    }
    .hr-tablet {
        bottom: 13px;
        height: 165px;
        right: 0;
        width: 103px;
    }
    .hr-phone {
        bottom: 11px;
        height: 160px;
        left: 0;
        width: 82px;
    }
    .hr-phone .device-ui {
        padding: 10px 6px;
    }
    .hr-phone .device-ui > i {
        font-size: 23px;
        margin: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto !important; }
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
    .hr-reveal { opacity:1;transform:none; }
}