/* Workora UI — drop-in design system (plain CSS, no build step) */
:root,html[data-theme="light"]{
  /* Workora theme D: navy + emerald + gold. Light is the default. */
  --scheme:light;
  --bg:#F6F8FB; --surface:#FFFFFF; --surface-2:#EEF2F7;
  --ink:#0B1B33; --strong:#0B1B33; --soft:#33425B; --mute:#5B6B82; --mute2:#6B7A90;
  --line:rgba(11,27,51,.12);
  --fg:11 27 51; --pri:18 183 106; --sec:245 179 1;
  --a:#12B76A; --a-d:#0B7A4B; --b:#0B7A4B; --c:#E5484D; --g:#12B76A; --gold:#F5B301; --navy:#0B1B33;
  --pri-t:#0B7A4B; --ok-t:#0B7A4B; --err-t:#B42318; --warn-t:#8A5A00; --info-t:#175CD3;
  --side-bg:#FFFFFF; --bar-bg:rgba(255,255,255,.88); --drawer-bg:rgba(255,255,255,.98);
  --shadow-sm:0 1px 2px rgba(11,27,51,.06),0 1px 3px rgba(11,27,51,.08);
  --shadow-md:0 8px 24px -8px rgba(11,27,51,.16),0 2px 6px rgba(11,27,51,.06);
  --shadow-lg:0 24px 48px -16px rgba(11,27,51,.22);
  --f-display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-serif:'Plus Jakarta Sans',system-ui,sans-serif;
  --f-mono:'Inter',system-ui,sans-serif;
}
html[data-theme="dark"]{
  --scheme:dark;
  --bg:#07101F; --surface:#0F1C33; --surface-2:#13233F;
  --ink:#EAF0FA; --strong:#FFFFFF; --soft:#C3CEE0; --mute:#93A3BD; --mute2:#7C8CA6;
  --line:rgba(255,255,255,.11);
  --fg:255 255 255; --pri:18 183 106; --sec:245 179 1;
  --a:#12B76A; --a-d:#0E9F5C; --b:#34D399; --c:#F0616D; --g:#34D399; --gold:#F5B301; --navy:#0B1B33;
  --pri-t:#6EE7B7; --ok-t:#6EE7B7; --err-t:#FCA5A5; --warn-t:#FCD34D; --info-t:#93C5FD;
  --side-bg:rgba(9,18,35,.92); --bar-bg:rgba(9,18,35,.82); --drawer-bg:rgba(7,16,31,.98);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 10px 30px -10px rgba(0,0,0,.55);
  --shadow-lg:0 30px 60px -20px rgba(0,0,0,.7);
}
html{scroll-behavior:smooth}
body{background:var(--bg)!important;color:var(--ink);font-family:var(--f-body)!important;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.f-display{font-family:var(--f-display);letter-spacing:-.03em;font-weight:700}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--f-mono)}
::selection{background:var(--a);color:var(--strong)}
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-fx i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.45;animation:float 18s ease-in-out infinite}
.bg-fx i:nth-child(1){width:46vw;height:46vw;background:var(--a);top:-14vw;left:-10vw}
.bg-fx i:nth-child(2){width:38vw;height:38vw;background:var(--b);top:10vh;right:-12vw;animation-delay:-6s;opacity:.28}
.bg-fx i:nth-child(3){width:34vw;height:34vw;background:var(--c);bottom:-16vw;left:28vw;animation-delay:-11s;opacity:.22}
.bg-fx::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 75%);opacity:.5}
@keyframes float{50%{transform:translate(4vw,5vh) scale(1.12)}}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.nav{position:sticky;top:12px;z-index:60;margin:12px auto 0;max-width:1200px;padding:0 12px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 22px;border:1px solid var(--line);border-radius:999px;background:var(--bar-bg);backdrop-filter:blur(18px) saturate(1.4)}
.logo{font-family:var(--f-display);font-weight:800;font-size:1.3rem;letter-spacing:-.04em;display:flex;align-items:center;gap:9px}
.logo b{width:26px;height:26px;border-radius:9px;background:conic-gradient(from 200deg,var(--a),var(--b),var(--c),var(--a));display:inline-block;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo span{background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;color:transparent}
.links{display:flex;align-items:center;gap:4px}
.links a,.links button{padding:9px 16px;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--mute);transition:.25s}
.links a:hover,.links a.on{color:var(--strong);background:rgb(var(--fg)/.07)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:16px;height:2px;background:var(--strong)}
.drawer{position:fixed;inset:0;z-index:70;background:var(--drawer-bg);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;padding:32px;gap:6px;transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.drawer.open{transform:none}
.drawer a,.drawer button{font-family:var(--f-display);font-size:2.4rem;font-weight:700;letter-spacing:-.03em;text-align:left;padding:6px 0;color:var(--strong)}
.drawer .x{position:absolute;top:22px;right:22px;font-size:1.2rem!important;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;text-align:center!important;padding:0!important}
@media(max-width:820px){.links{display:none}.burger{display:flex}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:.95rem;transition:.3s}
.btn-p{background:linear-gradient(100deg,var(--a),#5b8cff 60%,var(--b));color:#fff!important;box-shadow:0 10px 40px -10px var(--a)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 18px 50px -10px var(--a)}
.btn-g{border:1px solid var(--line);background:rgb(var(--fg)/.04);color:var(--strong)}
.btn-g:hover{background:rgb(var(--fg)/.1)}
.btn-sm{padding:10px 20px;font-size:.88rem}
.glass{background:linear-gradient(160deg,rgb(var(--fg)/.07),rgb(var(--fg)/.02));border:1px solid var(--line);backdrop-filter:blur(14px)}
.card{position:relative;display:block;border-radius:28px;padding:30px;overflow:hidden;transition:transform .4s,border-color .4s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgb(var(--pri)/.22),transparent 45%);opacity:0;transition:.4s}
.card:hover{transform:translateY(-6px);border-color:rgb(var(--pri)/.5)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,rgb(var(--pri)/.35),rgb(var(--sec)/.2));border:1px solid var(--line);margin-bottom:22px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:rgb(var(--sec)/.06)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 12px var(--g)}
.hero-h{font-size:clamp(2.8rem,8.4vw,7rem);line-height:.95}
.sec-h{font-size:clamp(2rem,5vw,3.6rem);line-height:1}
.grad{background:linear-gradient(95deg,#fff 0%,#c9bbff 40%,var(--b) 100%);-webkit-background-clip:text;color:transparent}
.lead{color:var(--mute);font-size:1.1rem;line-height:1.75}
.marq{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq div{display:flex;gap:56px;width:max-content;animation:mq 30s linear infinite;font-family:var(--f-display);font-size:1.5rem;font-weight:600;color:rgb(var(--fg)/.32)}
.marq span::after{content:"✦";margin-left:56px;color:var(--a)}
@keyframes mq{to{transform:translateX(-50%)}}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento .s2{grid-column:span 2}.bento .s3{grid-column:span 3}.bento .s4{grid-column:span 4}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bento>*{grid-column:span 2!important}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento>*{grid-column:span 1!important}}
.stat b{font-family:var(--f-display);font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;display:block;line-height:1}
.stat small{color:var(--mute);font-size:.9rem}
.mock{border-radius:26px;padding:18px;transform:perspective(1400px) rotateX(8deg);transition:.6s;box-shadow:0 60px 120px -30px rgb(var(--pri)/.5)}
.mock:hover{transform:perspective(1400px) rotateX(0)}
.bar{height:8px;border-radius:9px;background:linear-gradient(90deg,var(--a),var(--b));transform-origin:left;animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}
.flash{border:1px solid rgba(52,211,153,.3);background:rgba(52,211,153,.1);color:var(--ok-t);border-radius:18px;padding:14px 20px}
.foot{border-top:1px solid var(--line);margin-top:120px;padding:56px 0 34px;color:var(--mute);font-size:.9rem}
.foot a:hover{color:var(--strong)}
.cta{border-radius:40px;padding:clamp(36px,7vw,84px);text-align:center;background:radial-gradient(700px circle at 50% 0%,rgb(var(--pri)/.35),transparent 60%),rgb(var(--fg)/.03);border:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}