/* Emmassoft premium layer — loads after style.css. Brand palette taken from the Emmas HRM logo. */
:root{--bg:#F2F7FA;--fg:#08202F;--mut:#4F6678;--card:#fff;--line:#D3E0E9;--v:#0B63CE;--a:#14A393;--p:#3E93BE;--ink:#0A2A40;
--d:'Sora','Segoe UI',system-ui,sans-serif;--b:'Manrope','Segoe UI',system-ui,sans-serif;--g:linear-gradient(120deg,#0B63CE,#14A393)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#061520;--fg:#E8F2F8;--mut:#8CA7B8;--card:#0C2333;--line:#173449}}
:root[data-theme="dark"]{--bg:#061520;--fg:#E8F2F8;--mut:#8CA7B8;--card:#0C2333;--line:#173449}
body{font-family:var(--b);font-size:1.05rem;position:relative}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(40% 35% at 20% 15%,rgba(11,99,206,.16),transparent 70%),radial-gradient(35% 30% at 85% 30%,rgba(20,163,147,.15),transparent 70%),radial-gradient(40% 35% at 55% 95%,rgba(62,147,190,.14),transparent 70%);animation:mesh 28s ease-in-out infinite alternate}
@keyframes mesh{to{transform:translate3d(-4%,3%,0) rotate(6deg) scale(1.08)}}
h1,h2,h3{font-family:var(--d);font-weight:700;letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem)}h2{font-size:clamp(1.9rem,4vw,3.1rem);max-width:20ch}
/* strip the developer-terminal chrome */
.eyebrow,.btn code,.mm .l code,.caret{display:none!important}
.logo{font-family:var(--d);font-weight:700}
.logo svg stop:first-child{stop-color:#0B63CE}.logo svg stop:last-child{stop-color:#14A393}
.bar{border-radius:20px;background:color-mix(in srgb,var(--bg) 78%,transparent)}
.bar::before,.bar::after{display:none}
.prog{background:var(--g)}
/* buttons: tag shape with light sweep */
.btn{position:relative;overflow:hidden;border:0;color:#fff;background:var(--g);border-radius:14px 14px 14px 4px;font:600 .95rem var(--b);padding:.95rem 1.6rem;box-shadow:0 14px 30px -14px rgba(11,99,206,.7);transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.btn:hover::after{transform:translateX(120%)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--v)}
/* cards: leaf geometry + brand-tag punch hole + cursor spotlight */
.bx,.model-card,.pn,.stat,.work-board figure,.sg>*,.faq details,.st{position:relative;border-radius:30px 6px 30px 6px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.bx::after,.model-card::after{content:"";position:absolute;top:16px;right:16px;width:12px;height:12px;border-radius:50%;border:2px solid var(--a);opacity:.7}
.bx::before,.model-card::before,.sg>*::before,.pn::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(20,163,147,.16),transparent 60%)}
.bx:hover::before,.model-card:hover::before,.sg>*:hover::before,.pn:hover::before{opacity:1}
.stat b{font-family:var(--d);background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq{border-block:1px solid var(--line)}
/* product showcase: real app screens */
.duo{position:relative;display:flex;justify-content:center;align-items:center;gap:0;min-height:520px;perspective:1400px}
.duo::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:42% 58% 60% 40%/50% 40% 60% 50%;background:var(--g);opacity:.22;filter:blur(40px);animation:morph 14s ease-in-out infinite alternate}
@keyframes morph{to{border-radius:60% 40% 40% 60%/40% 60% 40% 60%;transform:rotate(40deg) scale(1.1)}}
.shield{position:relative;width:min(46%,260px);border-radius:34px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(6,30,50,.7);transform-style:preserve-3d;transition:transform .25s ease-out;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.shield img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.shield::after{content:"";position:absolute;inset:0}
.shield:nth-child(1){transform:translateX(14%) rotate(-6deg);z-index:1;animation:fl 7s ease-in-out infinite alternate}
.shield:nth-child(2){transform:translateX(-14%) translateY(36px) rotate(5deg);animation:fl 8s ease-in-out -3s infinite alternate}
@keyframes fl{to{translate:0 -18px}}
.work-board img,.hv img,.pagehead img,main figure img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.work-board figure,main figure{position:relative}
.work-board figure::after,main figure::after{content:"";position:absolute;inset:0;z-index:2}
.work-board figcaption{display:none}
/* page-load curtain: one orchestrated moment */
.curtain{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--ink);clip-path:inset(0 0 0 0);animation:lift 1s .85s cubic-bezier(.76,0,.24,1) forwards}
.curtain svg{width:72px;animation:pop .8s cubic-bezier(.2,.9,.2,1) both}
@keyframes pop{from{transform:scale(.4) rotate(-90deg);opacity:0}}
@keyframes lift{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
footer{background:var(--ink);color:#CFE2EE}footer a{color:#CFE2EE}
@media(max-width:760px){.duo{min-height:380px}.shield{border-radius:24px}}
@media(prefers-reduced-motion:reduce){body::before,.duo::before,.shield,.curtain{animation:none!important}.curtain{display:none}}