/* Webyne HRMS website theme – shared by every inner page (same look as the home page) */
:root{--ink:#06142a;--navy:#0b2140;--signal:#14b3d9;--cyan:#14b3d9;
 --c1:#14b3d9;--c2:#2fbf8f;--c3:#f2a93b;--c4:#8b6cf6;--c5:#ff6b8b;--c6:#3d8bfd;
 --display:'Instrument Serif',Georgia,serif;--body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:var(--display);--sans:var(--body)}
body{font-family:var(--body)!important;background:#f3f7fb!important;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2{font-family:var(--display)!important;font-weight:400!important;letter-spacing:-.01em!important;line-height:1.04!important}
h1{font-size:clamp(46px,6.4vw,92px)!important}
h2{font-size:clamp(36px,4.6vw,60px)!important}
h3{font-family:var(--body)!important;font-weight:700!important;letter-spacing:-.005em}
/* buttons and pills */
main a[href="https://www.webyne.com"],main a[href="pricing.html"][style*="background"],section a[style*="border-radius: 12px"],section a[style*="border-radius:12px"]{border-radius:999px!important}
/* header (same as home) */
.top{position:sticky;top:0;z-index:20;background:rgba(6,20,42,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff}
.top .wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:22px;min-height:68px;padding-inline:clamp(16px,4vw,48px)}
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;color:#fff}
.top .brand img{height:32px;width:auto;filter:brightness(0) invert(1)}
.top .brand span{font-weight:700;font-size:15px;opacity:.85;border-left:1px solid rgba(255,255,255,.3);padding-left:10px}
.top nav{display:flex;gap:20px;font-size:15px;font-weight:500}
.top nav a{text-decoration:none;color:#fff;opacity:.78}.top nav a:hover,.top nav a[aria-current]{opacity:1;color:#fff}
.top nav a[aria-current]{box-shadow:0 2px 0 var(--signal)}
.top .signin{font-size:15px;font-weight:600;text-decoration:none;color:#fff}
.top .btn{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:var(--signal);color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 10px 30px -10px rgba(20,179,217,.8)}
@media (max-width:1000px){.top nav{display:none}}
@media (max-width:480px){.top .signin{display:none}.top .brand span{display:none}}
/* page hero: drifting colour field like the home page */
.pg-hero{position:relative;overflow:hidden;background:var(--ink)!important}
.pg-hero>*:not(.blobs):not(.grain){position:relative;z-index:1}
.pg-hero .blobs{position:absolute;inset:-25%;filter:blur(70px);opacity:.75;pointer-events:none;z-index:0}
.pg-hero .blobs b{position:absolute;border-radius:50%;mix-blend-mode:screen}
.pg-hero .blobs b:nth-child(1){width:46vw;height:46vw;left:52%;top:0;background:#1560c4;animation:drift1 18s ease-in-out infinite alternate}
.pg-hero .blobs b:nth-child(2){width:30vw;height:30vw;left:72%;top:40%;background:#0fa3c6;animation:drift2 22s ease-in-out infinite alternate}
.pg-hero .blobs b:nth-child(3){width:24vw;height:24vw;left:34%;top:55%;background:#6c4fe0;opacity:.7;animation:drift3 26s ease-in-out infinite alternate}
.pg-hero .blobs b:nth-child(4){width:16vw;height:16vw;left:85%;top:6%;background:#ff6b8b;opacity:.45;animation:drift2 20s ease-in-out infinite alternate-reverse}
.pg-hero .grain{position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:4px 4px;opacity:.5;pointer-events:none;z-index:0}
@keyframes drift1{to{transform:translate(-8vw,6vh) scale(1.1)}}
@keyframes drift2{to{transform:translate(6vw,-8vh) scale(.9)}}
@keyframes drift3{to{transform:translate(10vw,-4vh) scale(1.2)}}
.pg-hero h1{background:linear-gradient(100deg,#fff 0%,#fff 40%,#9fe6f7 55%,#fff 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:sheen 6s ease-in-out 1s infinite}
@keyframes sheen{0%{background-position:100% 0}60%,100%{background-position:0 0}}
.pg-hero span[style*="text-transform"]{background:rgba(255,255,255,.1)!important;color:#d6ecf7!important;border:1px solid rgba(255,255,255,.2);text-transform:none!important;letter-spacing:0!important;font-size:14px!important}
/* colour accents on cards (one colour per card, cycling like the home page journey) */
.rv-grid>.rv-card{border-top:4px solid var(--c1)!important;transition:transform .25s ease,box-shadow .25s ease}
.rv-grid>.rv-card:nth-child(6n+2){border-top-color:var(--c2)!important}.rv-grid>.rv-card:nth-child(6n+3){border-top-color:var(--c3)!important}
.rv-grid>.rv-card:nth-child(6n+4){border-top-color:var(--c4)!important}.rv-grid>.rv-card:nth-child(6n+5){border-top-color:var(--c5)!important}.rv-grid>.rv-card:nth-child(6n){border-top-color:var(--c6)!important}
.rv-grid>.rv-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(6,20,42,.35)}
main img{transition:transform .5s ease}
main img:hover{transform:scale(1.015)}
/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.img{transform:translateY(30px) scale(.97)}
.rv.in{opacity:1;transform:none}
/* call-to-action band in the same palette */
section[style*="background:#14b3d9"],section[style*="background: #14b3d9"]{background:linear-gradient(120deg,#14b3d9,#3d8bfd 55%,#8b6cf6)!important}
section[style*="background:#14b3d9"] h2,section[style*="background: #14b3d9"] h2,section[style*="background:#14b3d9"] p,section[style*="background: #14b3d9"] p{color:#fff!important}
/* footer (same as home) */
.ft{background:#040e1e;color:#a9bdd3;font-size:14px}
.ft .wrap{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;padding:30px clamp(16px,4vw,48px)}
.ft span{flex:1 1 280px}.ft nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.ft a{color:#c9d6e8;text-decoration:none}.ft a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}.pg-hero .blobs b,.pg-hero h1{animation:none!important}main img:hover{transform:none}}
/* card headings stay card-sized */
.rv-card h2,.rv-card h3{font-size:clamp(20px,1.9vw,26px)!important;line-height:1.15!important}
/* section labels in sentence case, coloured */
main span[style*="text-transform: uppercase"],main span[style*="text-transform:uppercase"],main p[style*="text-transform: uppercase"],main p[style*="text-transform:uppercase"]{text-transform:none!important;letter-spacing:0!important;font-size:15px!important;color:var(--c6)!important;font-weight:700!important}