/*
Theme Name: Vektis HR OS
Theme URI: https://vektis.online
Author: Osama Khalil
Description: Custom animated marketing theme for Vektis HR OS.
Version: 1.0.0
Text Domain: vektis
*/
:root{
--panel-dark:#14181a;
--panel-dark-2:#1c2320;
--ink:#151b18;
--ink-soft:#454f4a;
--gray:#5b665f;
--gray-light:#8a948e;
--line:#d3dad5;
--bg:#f7f9f7;
--bg-soft:#eef1ee;
--accent:#b45309;
--accent-dark:#92400e;
--accent-light:#fbe6cf;
--accent-glow: rgba(180,83,9,.18);
--mono: ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
--radius:10px;
--radius-sm:7px;
--shadow-sm: 0 2px 5px rgba(21,27,24,.05), 0 1px 2px rgba(21,27,24,.04);
--shadow-md: 0 12px 28px -6px rgba(21,27,24,.10), 0 4px 10px -4px rgba(21,27,24,.06);
--shadow-lg: 0 28px 64px -16px rgba(21,27,24,.18), 0 10px 24px -8px rgba(21,27,24,.10);
--ease: cubic-bezier(.16,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:hidden on BOTH html and body (not just body) — a mobile-browser quirk otherwise
lets position:fixed elements (the mobile nav drawer) compute their width against the wrong
"viewport", falling short of the true right edge and leaving the real page visible in the
gap. Anchoring the clip on html as well as body is the standard fix for that class of bug. */
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
color:var(--ink);
background:var(--bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
width:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
/* ---------- Page transitions (smooth fade between full-page navigations) ----------
Entrance is pure CSS (runs on first paint, no JS/FOUC risk). Exit is added by a small
main.js click-handler that fades the current page out before letting the browser navigate,
with a matching timeout so the actual navigation waits for the fade to finish. Chromium
browsers additionally get a native cross-fade between documents via @view-transition — a
no-op progressive enhancement everywhere else. Opacity-only, deliberately no transform: a
`transform` on (even a settled translateY(0)) makes every position:fixed descendant
(impersonation banner, billing paywall, mobile nav drawer) treat as its containing
block instead of the viewport, which broke them — see the incident this comment replaced. */
@view-transition{navigation:auto}
body{animation:vektisPageIn .32s var(--ease) both}
@keyframes vektisPageIn{from{opacity:0}to{opacity:1}}
body.vektis-page-out{opacity:0!important;transition:opacity .18s var(--ease)}
/* Colorful top route-bar — a thin animated brand-gradient strip that sweeps in on click and
completes on the next page's load, so switching between app modules (or any page) reads as
one smooth, colored transition instead of a flat fade. Its own element, position:fixed but
never an ancestor of anything, so it can't trigger the transform-on-body containing-block
bug the fade above deliberately avoids. */
.vektis-route-bar{
position:fixed;top:0;left:0;height:3px;width:0%;
background:linear-gradient(90deg,var(--ink) 0%,var(--accent-dark) 35%,var(--accent) 65%,var(--accent-light) 100%);
box-shadow:0 0 12px var(--accent-glow);
z-index:9999;pointer-events:none;
transition:width .5s var(--ease),opacity .3s var(--ease);
opacity:0;
}
.vektis-route-bar.is-active{opacity:1}
.vektis-route-bar.is-done{width:100%!important;transition:width .2s var(--ease),opacity .3s var(--ease) .2s;opacity:0}
@media (prefers-reduced-motion: reduce){
body{animation:none}
body.vektis-page-out{transition:none;opacity:1!important}
.vektis-route-bar{display:none}
.brand-mark,.brand-name,.brand-badge,.auth-brand .mark,.app-topbar .brand .mark,.app-topbar .mobile-nav-brand .mark{animation:none!important}
.mock-view.active{animation:none}
.mock-view.active .mock-card,.mock-view.active .mock-kcol,.mock-view.active .mock-table tr{animation:none;opacity:1}
.main-nav{animation:none!important}
.main-nav.is-open > *,.main-nav.is-open > ul > li{animation:none!important;opacity:1!important}
.ceo-social-link:hover,.ceo-social-link:focus-visible{transform:none}
.ceo-social-link:hover svg,.ceo-social-link:focus-visible svg{animation:none}
}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent-dark);margin-bottom:14px;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--accent);border-radius:2px}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.15;margin:0 0 16px;color:var(--ink);letter-spacing:-.02em}
h1,h2{font-family:var(--mono);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(32px,4.6vw,54px)}
h2{font-size:clamp(24px,3.1vw,36px)}
h3{font-size:20px}
h4{font-size:18px}
p{color:var(--ink-soft);margin:0 0 16px}
strong{color:var(--accent-dark)}
.section{padding:96px 0}
.section-tight{padding:64px 0}
.section-alt{background:var(--bg-soft)}
.center{text-align:center}
.section-head{max-width:680px;margin:0 auto 56px}
.section-head.left{margin:0 0 48px}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 26px;border-radius:var(--radius-sm);font-weight:700;font-size:14.5px;
font-family:var(--mono);
border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -6px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 14px 28px -8px var(--accent-glow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dark);transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn svg{width:16px;height:16px}
/* ---------- Skip link (keyboard/screen-reader users only — jump past the nav) ---------- */
.skip-link{
position:absolute;top:-48px;left:12px;z-index:10000;
background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--radius-sm);
font-weight:700;font-size:14px;text-decoration:none;transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}
/* ---------- Header ---------- */
/* Floating glass pill, inset from the viewport edges, rather than a bar spanning full-bleed —
reuses the same .glass recipe (rgba white + blur+saturate) already defined below so the header
and the hero's own glass card read as one consistent material. Sits close to the edge at rest,
pulls in slightly and firms up its shadow once scrolled (.is-scrolled), so it never looks like
a static box bolted onto the page. */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;
padding:14px 16px 0;transition:padding .35s var(--ease);
}
.site-header.is-scrolled{padding:10px 16px 0}
.header-inner{
display:flex;align-items:center;justify-content:space-between;gap:24px;
max-width:1240px;margin:0 auto;padding:9px 12px 9px 20px;
border-radius:999px;
background:rgba(255,255,255,.7);
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
border:1px solid rgba(255,255,255,.6);
box-shadow:var(--shadow-md);
transition:box-shadow .35s var(--ease),background .35s var(--ease);
}
.site-header.is-scrolled .header-inner{background:rgba(255,255,255,.85);box-shadow:var(--shadow-lg)}
.brand{display:flex;align-items:center;gap:5px;font-weight:800;font-size:22px;color:var(--ink)}
.brand{position:relative}
/* The mark is the actual brand icon shape (same file as the favicon/OG image), used as a CSS
mask over an animated gradient rather than painted as a static — same flowing-gradient
technique as .brand-name below and the animated favicon (favicon-animate.js), so the logo and
the browser-tab icon read as one consistent, alive identity instead of a static image next to
an animated wordmark. Sized off the wordmark's own font-size so it scales naturally with it.
The V glyph is a wedge — narrower than its own square canvas everywhere below its very top
corners — so even a pixel-tight crop still leaves visible air between it and the wordmark at
the height text actually sits. A negative margin pulls "ektis" in to close that specifically,
rather than a positive/zero margin that only closes the gap the crop's bounding box has. */
.brand-mark{
height:1.5em;width:1.5em;flex:none;display:inline-block;vertical-align:middle;margin-right:-8px;
-webkit-mask:url(/assets/marketing/vektis-mark.png) center/contain no-repeat;
mask:url(/assets/marketing/vektis-mark.png) center/contain no-repeat;
background:linear-gradient(165deg,var(--ink) 0%,var(--accent-dark) 32%,var(--accent) 55%,var(--accent-light) 75%,var(--accent-dark) 100%);
background-size:100% 280%;
animation:vektisMarkFlow 5s linear infinite;
filter:drop-shadow(0 2px 5px rgba(180,83,9,.25));
}
@keyframes vektisMarkFlow{0%{background-position:0 0}100%{background-position:0 100%}}
.brand:hover .brand-mark{animation-play-state:paused}
/* Bold, tightly-tracked geometric sans (not the site's usual code-like mono) — the wordmark is
its own typographic voice, closer to the clean, heavy, no-frills lockups on grow.org.pk, where
the wordmark itself (not an icon) carries the whole identity. */
.brand-name{
font-weight:800;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
letter-spacing:-0.03em;text-transform:uppercase;
background:linear-gradient(100deg,var(--ink) 35%,var(--accent) 50%,var(--ink) 65%);
background-size:240% auto;color:transparent;-webkit-background-clip:text;background-clip:text;
animation:vektisNameFlow 6s var(--ease) infinite;
}
.brand:hover .brand-name{animation-play-state:paused;background-position:0 0}
@keyframes vektisNameFlow{
0%,100%{background-position:220% 0}
50%{background-position:0 0}
}
/* No pill/chip anymore — same "let the animated text itself carry it" treatment as the V mark and
the Vektis wordmark, instead of a separate colored box sitting apart from them. */
.brand-badge{
font-size:10.5px;font-weight:800;font-family:var(--mono);
letter-spacing:.05em;text-transform:uppercase;vertical-align:2px;display:inline-block;
background-image:linear-gradient(100deg,var(--ink) 30%,var(--accent-dark) 50%,var(--ink) 70%);
background-size:220% auto;-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
animation:vektisNameFlow 6s var(--ease) infinite;
}
.brand:hover .brand-badge{animation-play-state:paused}
.footer-brand .brand-badge{background-image:linear-gradient(100deg,#fff 30%,var(--accent) 50%,#fff 70%)}
.footer-brand .brand-name{background-image:linear-gradient(90deg,#fff 40%,var(--accent) 50%,#fff 60%)}
.main-nav{display:flex;align-items:center;gap:4px}
.mobile-nav-brand{display:none}
/* Mobile-only language switcher inside the drawer. UI-only for now — it swaps the nav labels
(via [data-i18n] + main.js) but the rest of the page's copy isn't translated yet; that would be
a much bigger, separate project. Hidden on desktop, shown in the ≤760px block below. */
.mobile-lang-switch{display:none}
.main-nav > ul{display:flex;align-items:center;gap:4px}
.main-nav a.nav-link{
padding:10px 16px;border-radius:999px;font-weight:500;font-size:14.5px;color:var(--ink-soft);
transition:color .2s,background .2s;position:relative;display:flex;align-items:center;gap:6px;
}
.main-nav a.nav-link:hover{color:var(--ink);background:var(--bg-soft)}
.has-dropdown{position:relative}
.dropdown{
position:absolute;top:calc(100% + 10px);left:0;min-width:260px;overflow:hidden;
background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--line);
padding:12px 10px 10px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:top left;
transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s linear .28s;
}
.dropdown::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--ink),var(--accent-dark),var(--accent));
}
.has-dropdown:hover .dropdown{
opacity:1;visibility:visible;transform:translateY(0) scale(1);
transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.dropdown a{
display:flex;flex-direction:column;gap:2px;padding:10px 14px 10px 16px;border-radius:var(--radius-sm);
font-size:14px;font-weight:600;color:var(--ink);border-left:3px solid transparent;
opacity:0;transform:translateX(-8px);
transition:background .15s,border-color .15s,color .15s,
opacity .3s var(--ease) var(--stagger,0s),transform .3s var(--ease) var(--stagger,0s);
}
.has-dropdown:hover .dropdown a{opacity:1;transform:translateX(0)}
.dropdown a:nth-child(2){--stagger:.03s}
.dropdown a:nth-child(3){--stagger:.07s}
.dropdown a:nth-child(4){--stagger:.11s}
.dropdown a:nth-child(5){--stagger:.15s}
.dropdown a small{font-weight:400;color:var(--gray);font-size:12.5px;transition:color .15s}
.dropdown a:hover{background:var(--accent-light);border-left-color:var(--accent);color:var(--accent-dark)}
.dropdown a:hover small{color:var(--accent-dark)}
.header-cta{display:flex;align-items:center;gap:10px}
/* The header itself is a floating glass pill (.header-inner, border-radius:999px) — its own CTA
buttons kept the site-wide .btn's smaller --radius-sm corners, which read as a mismatched,
separate control sitting inside a rounded shell instead of belonging to it. Pill radius +
slightly smaller padding here only, scoped to the header — every other .btn on the site
(hero, pricing, cards) is untouched. */
.header-cta .btn{border-radius:999px;padding:11px 22px;}
.header-cta .btn-ghost{background:rgba(21,27,24,.04);border-color:rgba(21,27,24,.1);}
.header-cta .btn-ghost:hover{background:rgba(21,27,24,.07);}
.nav-toggle{
display:none;width:40px;height:40px;background:rgba(255,255,255,.6);border:1px solid var(--line);
border-radius:12px;padding:0;position:relative;z-index:1;cursor:pointer;
align-items:center;justify-content:center;flex-direction:column;
transition:background .2s,border-color .2s;
}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin:2.5px 0;transition:all .3s var(--ease)}
/* Hamburger morphs into an X while its drawer is open — the same button doubles as the close
control, so there's always one obvious way to dismiss any mobile menu on the site. */
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Locks page scroll behind a full-screen mobile drawer while it's open — toggled on by
main.js for every .nav-toggle/.main-nav pair site-wide (marketing header, app topbar, portal
topbar), so scrolling never "leaks" through to the page underneath. */
html.nav-open{overflow:hidden}
/* The open drawer is full-screen, so the header's own "Get Started" button (which sits in front
of it, same stacking context) would otherwise float visibly on top of the open menu. */
html.nav-open .header-cta > a.btn-primary{display:none}
/* ---------- Hero ---------- */
.hero{
position:relative;padding:190px 0 120px;overflow:hidden;
background:radial-gradient(1200px 600px at 50% -10%,var(--accent-light) 0%,rgba(180,83,9,0) 60%);
}
/* Faint dot-grid texture. A real element, not a ::before/::after — .hero's section already carries
both of those via the .grain and .vignette classes it's paired with, and only one ::before/
::after box can ever render per element, so a third decorative layer needs its own node. */
.hero-dots{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:radial-gradient(circle,rgba(180,83,9,.16) 1.4px,transparent 1.4px);
background-size:28px 28px;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
}
.hero-blob{
position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;
background:linear-gradient(135deg,var(--accent),#e0a458);
animation:float 10s ease-in-out infinite, hueDrift 16s ease-in-out infinite;
will-change:transform;
}
.hero-blob.b1{width:340px;height:340px;top:-100px;right:-80px}
.hero-blob.b2{width:260px;height:260px;bottom:-80px;left:-60px;animation-delay:-4s;opacity:.35}
/* b3/b4/b5 use fixed pixel offsets, not percentages of the whole (very tall, mockup-inclusive)
.hero section, specifically so they land within the first screen's actual visible side
margins — a percentage-based top here mostly landed below the fold on common viewports, which
is why the sides still read as empty even with these present. Bolder opacity than b1/b2 too,
since blurred+faint blended straight into this section's already-warm background before. */
.hero-blob.b3{width:220px;height:220px;top:520px;left:6%;opacity:.4;animation-delay:-7s;background:linear-gradient(135deg,var(--panel-dark-2),var(--accent))}
.hero-blob.b4{width:280px;height:280px;top:160px;right:5%;opacity:.38;animation-delay:-2s;background:linear-gradient(135deg,var(--accent-dark),var(--accent-light))}
.hero-blob.b5{width:190px;height:190px;top:420px;right:9%;opacity:.32;animation-delay:-9s}
@keyframes hueDrift{
0%,100%{filter:blur(60px) hue-rotate(0deg)}
50%{filter:blur(60px) hue-rotate(25deg)}
}
/* Small glass stat chips floating in the hero's side margins — concrete, sharp-edged content
(unlike the soft blurred blobs above, which read as ambient color, not "something there") so
the wide empty gutters either side of the centered headline on anything wider than the ~800px
content column actually look deliberately designed, not just unfinished. Same glass treatment
as .app-window below so it reads as one consistent product, not a random decoration. Fixed
pixel positions (not percentages) so both land inside the first, un-scrolled screen. */
.hero-float-card{
position:absolute;z-index:1;display:flex;align-items:center;gap:11px;
padding:12px 16px;border-radius:var(--radius);box-shadow:var(--shadow-lg);
animation:float 9s ease-in-out infinite;
}
.hero-float-card .fc-icon{
width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-size:15px;
}
.hero-float-card .fc-text{display:flex;flex-direction:column;text-align:left;line-height:1.3;}
.hero-float-card .fc-text strong{font-size:13.5px;color:var(--ink);font-weight:800;}
.hero-float-card .fc-text span{font-size:11px;color:var(--gray);}
/* All four kept within the first, un-scrolled screen on a typical laptop viewport (roughly
top:550px and up, once the sticky header's own height is accounted for) — two per side,
stacked vertically, rather than letting the lower two drift down into scroll territory where
they'd go unseen, same mistake as the blobs before this. */
.hero-float-card.fc1{top:190px;left:5%;animation-delay:-3s}
.hero-float-card.fc2{top:480px;right:8%;animation-delay:-6s}
.hero-float-card.fc3{top:110px;right:10%;animation-delay:-1s}
.hero-float-card.fc4{top:510px;left:5%;animation-delay:-8s}
/* Percentage-based, not fixed pixels, for the shorter page heroes below (Contact/Demo) — those
sections are a fraction of the homepage hero's height (no trailing dashboard mockup), so a
pixel offset tuned for that tall layout would land outside these and get clipped. */
.hero-float-card.fc-contact{top:38%;left:6%;animation-delay:-2s}
.hero-float-card.fc-demo{top:62%;right:8%;animation-delay:-5s}
/* Parallax: JS sets --py (scroll-driven offset) on elements with .parallax */
.parallax{--py:0px;transform:translateY(var(--py));will-change:transform}
/* Ambient drifting particles (cheap, no canvas) */
.particle-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particle{
position:absolute;border-radius:50%;background:var(--accent);opacity:0;
animation:particleDrift linear infinite;
}
@keyframes particleDrift{
0%{opacity:0;transform:translateY(0) scale(.6)}
8%{opacity:.5}
92%{opacity:.35}
100%{opacity:0;transform:translateY(-140px) scale(1)}
}
/* Film-grain texture overlay, used on hero + cta-banner for a cinematic finish */
.grain{position:relative;isolation:isolate}
.grain::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* Soft vignette to focus attention toward hero center, higgsfield-style */
.vignette::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(ellipse at 50% 30%,transparent 45%,rgba(21,27,24,.06) 100%);
}
/* Glass-card treatment for product mockups (subtle, kept light for a trustworthy feel) */
.glass{
background:rgba(255,255,255,.72);
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
border:1px solid rgba(255,255,255,.6);
}
.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto;text-align:center}
.hero-content h1{margin-bottom:22px}
.hero-content .lead{font-size:18px;max-width:620px;margin:0 auto 36px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-badge{
display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:28px;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
/* ---------- Stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:36px 28px;text-align:center;box-shadow:var(--shadow-sm);
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.stat-num{font-size:44px;font-weight:800;color:var(--accent-dark);margin-bottom:6px;letter-spacing:-0.02em;font-family:var(--mono);font-variant-numeric:tabular-nums}
.stat-label{color:var(--gray);font-weight:600;font-size:14.5px}
/* ---------- Cards / Capabilities ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{
display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;
transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent}
.feature-card:hover .card-link{color:var(--accent-dark);gap:8px}
.feature-icon{
width:48px;height:48px;border-radius:var(--radius);background:var(--accent-light);color:var(--accent-dark);
display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.feature-icon svg{width:24px;height:24px}
.feature-card p{font-size:14.5px;margin-bottom:14px}
.card-tagline{color:var(--accent-dark)!important;font-weight:700;font-size:13px!important;margin:-10px 0 10px!important;text-transform:uppercase;letter-spacing:.03em}
.card-link{
display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:13.5px;color:var(--accent);
transition:gap .25s var(--ease),color .25s var(--ease);
}
/* ---------- Workflow steps ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:20px}
.steps::before{
content:"";position:absolute;top:26px;left:12%;right:12%;height:2px;
background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);
z-index:0;
}
.step{position:relative;z-index:1}
.step-num{
width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--accent);
color:var(--accent-dark);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;
margin-bottom:20px;box-shadow:0 0 0 6px #fff;
}
.step h4{margin-bottom:10px}
.step p{font-size:14.5px}
/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.about-copy p{font-size:16px}
.about-points{margin-top:24px;display:grid;gap:14px}
.about-point{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:14.5px;color:var(--ink)}
.about-point svg{width:20px;height:20px;color:var(--accent);flex:none;margin-top:2px}
.about-visual{
position:relative;border-radius:10px;background:linear-gradient(145deg,var(--panel-dark),var(--panel-dark-2));
padding:44px;color:#fff;overflow:hidden;box-shadow:var(--shadow-lg);
}
.about-visual::after{
content:"";position:absolute;inset:0;
background:radial-gradient(400px 260px at 90% 0%,rgba(180,83,9,.35),transparent 70%);
}
.about-visual-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.about-visual-item{border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:18px;background:rgba(255,255,255,.04)}
.about-visual-item .stat-num{color:#fff;font-size:28px}
.about-visual-item .stat-label{color:rgba(255,255,255,.6)}
/* ---------- CEO Message ---------- */
.ceo-section{background:var(--bg-soft)}
.ceo-grid{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:center}
.ceo-photo-wrap{position:relative}
.ceo-photo{
width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:#fff;
border:1px solid var(--line);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;
}
.ceo-photo img{width:100%;height:100%;object-fit:cover}
.ceo-photo .placeholder-avatar{width:60%;height:60%;color:var(--gray-light)}
.ceo-quote-mark{
position:absolute;top:-18px;left:-18px;width:56px;height:56px;border-radius:50%;
background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
font-size:30px;font-weight:800;box-shadow:var(--shadow-md);font-family:Georgia,serif;
}
.ceo-message p{font-size:17px;color:var(--ink)}
.ceo-message p.lead-quote{font-size:20px;font-weight:600;line-height:1.5;color:var(--ink)}
.ceo-signature{margin-top:24px}
.ceo-signature .name{font-weight:800;font-size:17px;color:var(--ink)}
.ceo-signature .title{color:var(--accent-dark);font-weight:600;font-size:14px}
.ceo-social{display:flex;justify-content:center;gap:14px;margin-top:22px}
.ceo-social-link{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;color:#fff;
background:linear-gradient(165deg,var(--ink) 0%,var(--accent-dark) 32%,var(--accent) 65%,var(--accent-light) 100%);
box-shadow:var(--shadow-sm);
transition:box-shadow .25s var(--ease),transform .25s var(--ease);
outline:none;
}
.ceo-social-link svg{width:19px;height:19px;transform-origin:50% 60%}
.ceo-social-link:hover,.ceo-social-link:focus-visible{
transform:translateY(-3px);
box-shadow:0 14px 28px -8px var(--accent-glow);
}
.ceo-social-link:hover svg,.ceo-social-link:focus-visible svg{animation:iconDance .9s var(--ease)}
@keyframes iconDance{
0%,100%{transform:rotate(0deg) translateY(0)}
15%{transform:rotate(-18deg) translateY(-1px)}
30%{transform:rotate(14deg) translateY(0)}
45%{transform:rotate(-11deg) translateY(-1px)}
60%{transform:rotate(8deg) translateY(0)}
75%{transform:rotate(-5deg)}
90%{transform:rotate(2deg)}
}
/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:760px;margin:0 auto;gap:28px}
.team-card{text-align:center}
.team-avatar{
width:110px;height:110px;margin:0 auto 18px;border-radius:50%;
background:linear-gradient(135deg,var(--accent-light),#fff6ea);
display:flex;align-items:center;justify-content:center;color:var(--accent-dark);
border:1px solid var(--line);transition:transform .3s var(--ease);
}
.team-card:hover .team-avatar{transform:scale(1.06) rotate(-2deg)}
.team-avatar svg{width:46px;height:46px}
.team-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.team-card h4{margin-bottom:4px}
.team-card .role{color:var(--accent-dark);font-weight:600;font-size:13.5px}
.team-card .experience{color:var(--gray);font-size:12.5px;margin-top:4px}
/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;
box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.testi-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.testi-card p{font-size:15px;color:var(--ink);font-style:italic}
.testi-author{font-weight:700;font-size:13.5px;color:var(--gray);font-style:normal;margin-top:14px}
/* ---------- CTA banner ---------- */
.cta-banner{
background:linear-gradient(135deg,var(--panel-dark),#2b1d0f);
border-radius:calc(var(--radius) * 2);padding:64px 48px;text-align:center;color:#fff;position:relative;overflow:hidden;
}
.cta-banner::before{
content:"";position:absolute;inset:0;
background:radial-gradient(500px 300px at 20% 0%,rgba(180,83,9,.4),transparent 70%);
}
.cta-banner *{position:relative;z-index:1}
.cta-banner h2{color:#fff}
.cta-banner p{color:rgba(255,255,255,.75);max-width:520px;margin:0 auto 32px}
.cta-banner .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.cta-banner .btn-ghost:hover{border-color:#fff;color:#fff}
/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:flex-start}
.contact-info-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
display:flex;gap:16px;align-items:flex-start;margin-bottom:16px;box-shadow:var(--shadow-sm);
transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.contact-info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.contact-info-card .icon{
width:44px;height:44px;border-radius:var(--radius);background:var(--accent-light);color:var(--accent-dark);
display:flex;align-items:center;justify-content:center;flex:none;
}
.contact-info-card .icon svg{width:22px;height:22px}
.contact-info-card .icon.icon-photo{
width:58px;height:58px;border-radius:50%;background:none;overflow:hidden;
box-shadow:0 0 0 2px var(--accent-light),0 4px 10px -4px rgba(21,27,24,.25);
}
.contact-info-card .icon.icon-photo img{width:100%;height:100%;object-fit:cover;display:block}
.contact-info-card h4{margin-bottom:2px}
.contact-info-card a,.contact-info-card span{color:var(--ink-soft);font-size:14.5px}
.contact-form-card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:40px;
box-shadow:var(--shadow-md);
}
.wpcf7-form p{margin-bottom:16px}
.wpcf7-form .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.wpcf7-form .form-row-2{grid-template-columns:1fr}}
.wpcf7-form label{display:block;font-weight:600;font-size:13.5px;margin-bottom:8px;color:var(--ink)}
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form textarea{
width:100%;padding:13px 16px;border-radius:var(--radius);border:1px solid var(--line);font-family:inherit;
font-size:14.5px;transition:border-color .2s,box-shadow .2s;background:var(--bg-soft);
}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow);background:#fff;
}
.wpcf7-form textarea{min-height:130px;resize:vertical}
.wpcf7-form input[type=submit]{
background:var(--accent);color:#fff;border:0;padding:14px 30px;border-radius:var(--radius-sm);font-weight:700;font-family:var(--mono);
transition:background .2s,transform .2s;
}
.wpcf7-form input[type=submit]:hover{background:var(--accent-dark);transform:translateY(-2px)}
.wpcf7-response-output{border-radius:var(--radius) !important;margin-top:16px !important;font-size:14px !important}
.wpcf7-not-valid-tip{color:#dc2626;font-size:12.5px;margin-top:4px}
.wpcf7-spinner{margin-left:10px}
/* ---------- Pricing tiers ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:32px 0 8px;align-items:stretch}
/* The homepage teaser (identified by its companion .reveal-stagger class — the only other place
.pricing-grid is used) has exactly 3 cards, not 4. Left on the shared 4-column template, the
grid always leaves a 4th, empty column track on the right, which visually shoves the row of
cards left instead of centering it — the actual cause of "cards not centered" here; it was
never a text-alignment issue. Scoped to this specific instance so /pricing/'s real 4-plan grid
is untouched. */
.pricing-grid.reveal-stagger{grid-template-columns:repeat(3,1fr)}
/* flex-column + the CTA's margin-top:auto below is what keeps all 4 buttons on one shared
baseline regardless of how many lines the label/tagline/price above happen to wrap to per
plan — grid alone only equalizes card height, not where content lands inside it. */
.pricing-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:38px 28px 32px;background:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:flex;flex-direction:column;text-align:center}
.pricing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.pricing-card.featured{border-color:var(--accent);box-shadow:var(--shadow-lg);background:linear-gradient(180deg,var(--accent-light) 0%,#fff 160px)}
.pricing-card .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:5px 16px;border-radius:999px;white-space:nowrap}
/* Plan name is an eyebrow label now, not the headline — the price is what a visitor scans for
first on every pricing page that reads as "designed," not the term length. */
.pricing-card h3{margin-bottom:14px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray)}
.pricing-card .price-row{display:flex;align-items:baseline;justify-content:center;gap:6px}
.pricing-card .price{font-family:var(--mono);font-size:44px;font-weight:700;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pricing-card .price-period{font-size:14px;font-weight:600;color:var(--gray-light)}
.pricing-card .save-badge{display:inline-block;margin:10px auto 0;font-size:12px;font-weight:700;color:var(--accent-dark);background:var(--accent-light);padding:4px 12px;border-radius:999px}
.pricing-card .tagline{color:var(--gray);font-size:13px;margin:10px 0 24px}
/* The header block above (h3/price/tagline) reads better centered, matching the centered section
heading most pricing sections sit under — but a feature checklist is a list to scan, not a
headline, so it stays left-aligned even though the card around it is centered. */
.pricing-card ul{text-align:left}
.pricing-card ul{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.pricing-card li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-soft);line-height:1.4}
.pricing-card li::before{content:"\2713";flex:none;color:var(--accent-dark);font-weight:700}
.pricing-card > .btn{margin-top:auto;width:100%;justify-content:center}
/* ---------- Product mockups (real HTML/CSS, not images) ---------- */
.app-window{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);background:#fff;margin:32px 0;transition:box-shadow .4s var(--ease)}
.app-window.glass{box-shadow:0 30px 70px -20px rgba(21,27,24,.35),var(--shadow-lg)}
.app-window-bar{display:flex;align-items:center;gap:7px;padding:12px 18px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.app-dot{width:10px;height:10px;border-radius:50%}
.app-dot.red{background:#f87171}
.app-dot.yellow{background:#fbbf24}
.app-dot.green{background:#34d399}
.app-window-title{margin-left:8px;font-size:12px;color:var(--gray);font-weight:600}
.app-window-body{background:#f8fafc;overflow-x:auto}
.mock-shell{display:grid;grid-template-columns:200px 1fr;min-width:700px}
.mock-sidebar{background:var(--panel-dark);color:rgba(255,255,255,.75);padding:20px 14px}
.mock-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:14px;margin-bottom:22px}
/* One flex item, not two — .mock-brand's own `gap` would otherwise land between the mark span
and the trailing text node, visibly splitting "V" from "ektis HR OS". */
.mock-brand-text{text-transform:uppercase}
.mock-nav{display:grid;gap:3px}
.mock-nav span{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6);cursor:pointer;transition:background .2s,color .2s,transform .12s}
.mock-nav span:hover{background:rgba(255,255,255,.08);color:#fff}
.mock-nav span:active{transform:scale(.96)}
.mock-nav span.active{background:rgba(255,255,255,.12);color:#fff}
/* Mock dashboard content panes swapped by clicking the mock sidebar (homepage hero preview,
platform overview mockup). */
.mock-view{display:none}
.mock-view.active{display:block;animation:mockViewIn .4s var(--ease)}
@keyframes mockViewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Cards/kanban-columns/table-rows inside a freshly-opened view cascade in one by one on top of
the pane's own fade, so multi-item views (a kanban board, a data table) read as populating in
sequence rather than popping in all at once. nth-child is scoped to each item's own immediate
parent, so this works the same whether items sit directly in the view, inside a .mock-row grid,
or inside a .mock-kanban/.mock-table — no per-layout selector needed. */
.mock-view.active .mock-card,
.mock-view.active .mock-kcol,
.mock-view.active .mock-table tr{
opacity:0;
animation:mockItemIn .4s var(--ease) both;
}
.mock-view.active .mock-card:nth-child(1),.mock-view.active .mock-kcol:nth-child(1),.mock-view.active .mock-table tr:nth-child(1){animation-delay:.05s}
.mock-view.active .mock-card:nth-child(2),.mock-view.active .mock-kcol:nth-child(2),.mock-view.active .mock-table tr:nth-child(2){animation-delay:.12s}
.mock-view.active .mock-card:nth-child(3),.mock-view.active .mock-kcol:nth-child(3),.mock-view.active .mock-table tr:nth-child(3){animation-delay:.19s}
.mock-view.active .mock-card:nth-child(4),.mock-view.active .mock-kcol:nth-child(4),.mock-view.active .mock-table tr:nth-child(4){animation-delay:.26s}
.mock-view.active .mock-card:nth-child(5),.mock-view.active .mock-kcol:nth-child(5),.mock-view.active .mock-table tr:nth-child(5){animation-delay:.33s}
@keyframes mockItemIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mock-main{padding:22px;min-width:0}
.mock-row{display:grid;gap:14px;margin-bottom:14px}
.mock-row.cols-2{grid-template-columns:1fr 1fr}
.mock-row.cols-3{grid-template-columns:repeat(3,1fr)}
.mock-row.cols-4{grid-template-columns:repeat(4,1fr)}
.mock-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.mock-card h5{margin:0 0 6px;font-size:11.5px;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mock-card .big{font-size:23px;font-weight:800;color:var(--ink);line-height:1.1;font-family:var(--mono);font-variant-numeric:tabular-nums}
.mock-card .delta{font-size:11.5px;font-weight:700;color:#16a34a;margin-left:6px}
.mock-bars{display:flex;align-items:flex-end;gap:5px;height:52px;margin-top:10px}
.mock-bars span{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-dark));border-radius:3px 3px 0 0}
.mock-table{width:100%;border-collapse:collapse;font-size:12px}
.mock-table th{text-align:left;color:var(--gray);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.mock-table td{padding:10px;border-bottom:1px solid var(--bg-soft);color:var(--ink-soft);white-space:nowrap}
.mock-table tr:last-child td{border-bottom:0}
.mock-table tr.clickable{cursor:pointer;transition:background .15s}
.mock-table tr.clickable:hover{background:var(--bg-soft)}
.mock-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap}
.mock-pill.green{background:#dcfce7;color:#15803d}
.mock-pill.blue{background:#e3e8e4;color:#3d4a43}
.mock-pill.amber{background:var(--accent-light);color:var(--accent-dark)}
.mock-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent-light);color:var(--accent-dark);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;margin-right:8px;flex:none}
.mock-flex{display:flex;align-items:center}
/* Kanban */
.mock-kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px}
.mock-kcol{flex:0 0 190px}
.mock-kcol h5{font-size:11px;text-transform:uppercase;color:var(--gray);margin-bottom:10px;font-weight:700;display:flex;justify-content:space-between}
.mock-kcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;margin-bottom:8px;font-size:12px;cursor:pointer;transition:box-shadow .15s,transform .15s}
.mock-kcard:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.mock-kcard .name{font-weight:700;color:var(--ink);margin-bottom:2px}
.mock-kcard .role{color:var(--gray);font-size:11px}
/* ---------- Org chart: true top-down organogram ----------
CEO sits alone at the top; each tier below (Director -> Manager -> everyone else) is laid
out as a horizontal row of siblings, connected to its parent by a drawn line: a vertical
stub down from the parent, a horizontal "bus" line across the siblings, then a vertical stub
down into each child card. Everything cascades in one tier at a time (see the PHP-side
$depth-based animation-delay) so the chart visibly builds itself from the top down. */
:root{ --org-director:#2563eb; --org-director-bg:#e8f0fe; --org-manager:#16a34a; --org-manager-bg:#e7f7ec; --org-line:22px; }
.org-tree-wrap{overflow-x:auto;padding:70px 40px 90px}
.org-tree,.org-branch{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.org-node{position:relative;padding:0 16px;display:flex;flex-direction:column;align-items:center}
/* Vertical line from a parent's card down to the bus row above its children. */
.org-card + .org-branch{position:relative;padding-top:var(--org-line);margin-top:0}
.org-card + .org-branch::before{
content:"";position:absolute;top:0;left:50%;width:2px;height:var(--org-line);
background:var(--line);transform:translateX(-1px) scaleY(0);transform-origin:top;
animation:orgLineDrawV .3s var(--ease) forwards;animation-delay:inherit;
}
/* Each child node: a stub down to its own card, plus its share of the horizontal bus line
that ties it to its siblings (trimmed at the first/last child, skipped for an only child). */
.org-branch > .org-node{padding-top:var(--org-line)}
.org-branch > .org-node::before{
content:"";position:absolute;top:0;left:50%;width:2px;height:var(--org-line);
background:var(--line);transform:translateX(-1px) scaleY(0);transform-origin:top;
animation:orgLineDrawV .3s var(--ease) forwards;animation-delay:inherit;
}
.org-branch > .org-node::after{
content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line);
transform:scaleX(0);animation:orgLineDrawH .3s var(--ease) forwards;animation-delay:inherit;
}
.org-branch > .org-node:first-child::after{left:50%}
.org-branch > .org-node:last-child::after{right:50%}
.org-branch > .org-node:only-child::after{display:none}
/* No card box on purpose: the node is just a big circular photo with its details set alongside
it, not text boxed inside a bordered rectangle — tier color lives on the photo's ring instead
of a card border. */
.org-card{display:flex;align-items:center;gap:16px;background:none;border:0;box-shadow:none;padding:4px;transition:transform .2s var(--ease);width:250px;text-align:left;position:relative;cursor:pointer}
.org-card:hover,.org-card:focus{transform:translateY(-3px);outline:none;z-index:40}
.org-card-body{min-width:0}
.org-name{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.3}
.org-designation{font-size:11.5px;font-weight:700;margin-top:2px}
.org-card-ceo .org-designation{color:var(--accent-dark)}
.org-card-director .org-designation{color:var(--org-director)}
.org-card-manager .org-designation{color:var(--org-manager)}
.org-role{font-size:11.5px;color:var(--gray);margin-top:1px}
.org-meta{font-size:10.5px;color:var(--gray-light);margin-top:4px;font-family:var(--mono);letter-spacing:.01em}
.org-badge{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;margin-left:6px;vertical-align:1px;font-family:var(--mono);white-space:nowrap}
.org-badge-ceo{background:var(--ink);color:#fff}
.org-badge-director{background:var(--org-director-bg);color:var(--org-director)}
.org-badge-manager{background:var(--org-manager-bg);color:var(--org-manager)}
/* The photo IS the node — big, unmistakably circular, with a colored ring carrying the tier
color that used to live on the card border. */
.org-avatar-photo,.org-avatar-fallback{width:96px;height:96px;border-radius:50%;flex-shrink:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.org-avatar-photo{object-fit:cover;border:4px solid var(--line);box-shadow:var(--shadow-sm)}
.org-avatar-fallback{font-size:30px;border:4px solid var(--line);margin-right:0;box-shadow:var(--shadow-sm)}
.org-card:hover .org-avatar-photo,.org-card:hover .org-avatar-fallback,.org-card:focus .org-avatar-photo,.org-card:focus .org-avatar-fallback{transform:scale(1.08);box-shadow:var(--shadow-md)}
.org-card-ceo .org-avatar-photo,.org-card-ceo .org-avatar-fallback{border-color:var(--accent);animation:orgCeoPulse 3.5s ease-in-out infinite}
.org-card-director .org-avatar-photo,.org-card-director .org-avatar-fallback{border-color:var(--org-director)}
.org-card-manager .org-avatar-photo,.org-card-manager .org-avatar-fallback{border-color:var(--org-manager)}
/* Hover/focus pop-up: a larger, more detailed card that zooms in over the compact one. Purely
decorative (pointer-events:none) so hovering into it never breaks the :hover state driving it.
z-index is deliberately very high (not just higher than a resting sibling card) — every card
this could ever land over, hovered or not, must always lose to it; a low z-index here was what
let it render visually underneath/behind a neighboring card instead of cleanly on top of it. */
.org-hover-pop{
position:absolute;top:50%;left:50%;width:290px;z-index:999;
background:#fff;border-radius:var(--radius);box-shadow:0 22px 44px -12px rgba(21,27,24,.32),0 0 0 1px var(--line);
padding:26px 22px;text-align:center;
opacity:0;visibility:hidden;pointer-events:none;
transform:translate(-50%,-50%) scale(.78);
transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s;
}
.org-card:hover .org-hover-pop,.org-card:focus .org-hover-pop{
opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);
transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.org-hover-avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;border:4px solid var(--line);margin:0 auto 14px;font-size:40px;box-shadow:var(--shadow-md)}
.org-card-ceo .org-hover-avatar{border-color:var(--accent)}
.org-card-director .org-hover-avatar{border-color:var(--org-director)}
.org-card-manager .org-hover-avatar{border-color:var(--org-manager)}
.org-hover-name{font-weight:800;font-size:16px;color:var(--ink)}
.org-hover-designation{font-size:12.5px;font-weight:700;margin-top:4px}
.org-card-ceo .org-hover-designation{color:var(--accent-dark)}
.org-card-director .org-hover-designation{color:var(--org-director)}
.org-card-manager .org-hover-designation{color:var(--org-manager)}
.org-hover-dept{font-size:12px;color:var(--gray);margin-top:3px}
.org-hover-meta{font-size:11px;color:var(--gray-light);margin-top:8px;font-family:var(--mono);padding-top:8px;border-top:1px dashed var(--line)}
.org-hover-email{font-size:11px;color:var(--gray);margin-top:4px;word-break:break-all}
/* Reporting structure: whole tiers cascade in together (PHP sets the same animation-delay for
every card at a given depth), and the connector lines draw themselves in right behind. */
.org-node{opacity:0;animation:orgNodeIn .5s var(--ease) forwards}
@keyframes orgNodeIn{
from{opacity:0;transform:translateY(14px) scale(.97)}
to{opacity:1;transform:none}
}
@keyframes orgLineDrawV{
from{transform:translateX(-1px) scaleY(0)}
to{transform:translateX(-1px) scaleY(1)}
}
@keyframes orgLineDrawH{
from{transform:scaleX(0)}
to{transform:scaleX(1)}
}
@keyframes orgCeoPulse{
0%,100%{box-shadow:0 0 0 2px var(--accent-glow)}
50%{box-shadow:0 0 0 5px var(--accent-glow)}
}
@media (prefers-reduced-motion: reduce){
.org-node{opacity:1;animation:none}
.org-card + .org-branch::before,.org-branch > .org-node::before,.org-branch > .org-node::after{animation:none;transform:none}
.org-card-ceo .org-avatar-photo,.org-card-ceo .org-avatar-fallback{animation:none}
.org-hover-pop{transition:opacity .12s linear}
.org-card:hover .org-hover-pop,.org-card:focus .org-hover-pop{transform:translate(-50%,-50%) scale(1)}
}
@media (max-width:760px){
.org-card{width:190px;padding:4px;gap:12px}
.org-avatar-photo,.org-avatar-fallback{width:68px;height:68px;border-width:3px}
.org-hover-pop{width:240px;padding:20px 16px}
.org-hover-avatar{width:96px;height:96px}
}
/* ---------- Org chart: department edit pop-up ---------- */
.dept-name-btn{
background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;
display:inline-flex;align-items:center;gap:8px;
}
.dept-name-btn:hover{color:var(--accent-dark)}
.dept-edit-hint{
font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-dark);
background:var(--accent-light);padding:2px 7px;border-radius:999px;opacity:0;transition:opacity .15s;
}
.dept-name-btn:hover .dept-edit-hint,.dept-name-btn:focus .dept-edit-hint{opacity:1}
.dept-modal-overlay{
position:fixed;inset:0;background:rgba(21,27,24,.5);display:flex;align-items:center;justify-content:center;
padding:24px;z-index:300;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s linear .2s;
}
.dept-modal-overlay.is-open{opacity:1;visibility:visible;transition:opacity .2s var(--ease)}
.dept-modal{
background:#fff;border-radius:var(--radius);padding:26px;width:100%;max-width:440px;max-height:85vh;overflow-y:auto;
box-shadow:var(--shadow-lg);transform:scale(.9) translateY(10px);transition:transform .22s var(--ease);
}
.dept-modal-overlay.is-open .dept-modal{transform:scale(1) translateY(0)}
.dept-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.dept-modal-close{background:none;border:0;font-size:26px;line-height:1;color:var(--gray);cursor:pointer;padding:0 4px}
.dept-modal-close:hover{color:var(--ink)}
.dept-modal-section{margin-bottom:20px}
.dept-modal-section:last-child{margin-bottom:0}
.dept-modal-section > label{display:block;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gray);margin-bottom:8px}
.dept-modal-section select{flex:1;padding:9px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);font-family:inherit;font-size:13.5px}
.dept-modal-section input[type="text"]{flex:1;padding:9px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);font-family:inherit;font-size:13.5px}
.dept-designation-list{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.dept-designation-list li{
display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg-soft);
border-radius:var(--radius-sm);padding:7px 10px;font-size:13px;
}
.dept-designation-remove{background:none;border:0;color:var(--gray);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.dept-designation-remove:hover{color:#c0392b}
.dept-remove-btn{width:100%;justify-content:center;color:#c0392b;border-color:#f0d3ce}
.dept-remove-btn:hover{background:#fdf1ef;border-color:#c0392b}
/* Calendar */
.mock-cal{display:grid;grid-template-columns:repeat(7,minmax(78px,1fr));gap:6px;min-width:640px}
.mock-cal .day-head{font-size:10.5px;color:var(--gray);font-weight:700;text-align:center;padding-bottom:2px;text-transform:uppercase}
.mock-cal .cell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);min-height:68px;padding:6px}
.mock-cal .cell .date{font-size:10px;color:var(--gray-light);font-weight:700;margin-bottom:4px}
.mock-shift{display:block;border-radius:4px;padding:3px 6px;margin-bottom:3px;font-size:10px;font-weight:700;color:#fff;cursor:pointer}
.mock-shift.blue{background:#4b5563}
.mock-shift.teal{background:#0d7a6c}
.mock-shift.purple{background:#166534}
.mock-shift.amber{background:var(--accent)}
/* Progress bar */
.mock-progress{height:7px;border-radius:999px;background:var(--bg-soft);overflow:hidden;margin-top:6px}
.mock-progress span{display:block;height:100%;background:var(--accent);border-radius:999px}
/* Demo tabs */
.demo-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.demo-tab{padding:11px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:13.5px;font-family:var(--mono);color:var(--ink-soft);background:#fff;border:1px solid var(--line);cursor:pointer;transition:all .2s}
.demo-tab:hover{border-color:var(--accent);color:var(--accent-dark)}
.demo-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.demo-pane{display:none}
.demo-pane.active{display:block}
.demo-note{display:flex;align-items:center;gap:8px;background:var(--accent-light);color:var(--accent-dark);padding:10px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;margin-bottom:20px}
/* Detail drawer (fake modal) */
.mock-drawer-backdrop{position:fixed;inset:0;background:rgba(21,27,24,.45);z-index:2000;opacity:0;visibility:hidden;transition:opacity .25s}
.mock-drawer-backdrop.open{opacity:1;visibility:visible}
.mock-drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,88vw);background:#fff;z-index:2001;box-shadow:-24px 0 64px -8px rgba(21,27,24,.18);transform:translateX(100%);transition:transform .3s var(--ease);padding:28px;overflow-y:auto}
.mock-drawer.open{transform:translateX(0)}
.mock-drawer-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:50%;background:var(--bg-soft);border:0;font-size:16px;color:var(--ink-soft);cursor:pointer}
.mock-drawer h3{margin-bottom:4px}
.mock-drawer .sub{color:var(--gray);font-size:13.5px;margin-bottom:20px}
.mock-drawer dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.mock-drawer dt{font-size:11px;text-transform:uppercase;color:var(--gray);font-weight:700;letter-spacing:.03em}
.mock-drawer dd{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
/* FAQ accordion */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:16px;color:var(--ink)}
.faq-q .icon{font-size:20px;color:var(--accent);transition:transform .25s var(--ease);flex:none;margin-left:16px}
.faq-item.open .faq-q .icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a p{padding-top:14px;margin-bottom:0}
/* Comparison table */
.compare-table{width:100%;border-collapse:collapse;margin:32px 0;font-size:14px}
.compare-table th,.compare-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.compare-table th{background:var(--bg-soft);font-size:13px}
.compare-table td:first-child,.compare-table th:first-child{text-align:left;font-weight:600;color:var(--ink)}
.compare-table th.featured{color:var(--accent-dark)}
.compare-table .yes{color:var(--accent);font-weight:800}
.compare-table .no{color:var(--gray-light)}
/* ---------- Generic subpage content (Platform/Pricing/etc from imported HTML) ---------- */
/* This band is short (~220px, no headline of its own — the real H1 lives below in
.entry-content) and .hero-blob is a 200-340px blurred circle tuned for a much taller box; used
here it got hard-clipped by overflow:hidden right through the blur, which reads as a visual
glitch, not decoration. A plain radial-gradient wash (smooth, no hard edge at any height) plus
the dot-grid texture gets the same "this page has some warmth to it" effect with no clipping
risk at all — position:relative/overflow:hidden kept so .hero-dots still contains to this band. */
.page-hero{
padding:180px 0 40px;position:relative;overflow:hidden;
background:radial-gradient(900px 400px at 82% -30%,var(--accent-light) 0%,rgba(180,83,9,0) 65%),var(--bg-soft);
}
.hero-demo{padding:170px 0 40px}
.hero-contact{padding:170px 0 60px}
.hero-careers{padding:150px 0 50px}
.entry-content{padding:0 0 40px}
.entry-content .body-small,.entry-content span.body-small{
display:inline-block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent-dark);margin-bottom:12px;
}
.entry-content h1{margin-top:0}
.entry-content h2{margin-top:56px}
.entry-content h3,.entry-content h4{margin-top:8px}
.entry-content img{border-radius:var(--radius);box-shadow:var(--shadow-md);margin:24px 0;border:1px solid var(--line)}
.entry-content > *:first-child{margin-top:0}
.entry-content p.body-small{font-size:14px;color:var(--gray)}
.entry-content ul{margin:16px 0 28px;padding:0}
.entry-content ul li{list-style:none;position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-soft);font-size:14.5px}
.entry-content ul li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
/* ---------- Footer ---------- */
.site-footer{background:var(--panel-dark);color:rgba(255,255,255,.7);padding:72px 0 28px;margin-top:64px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand .brand{color:#fff}
.footer-brand p{color:rgba(255,255,255,.55);margin-top:16px;max-width:320px;font-size:14.5px}
.footer-col h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px}
.footer-col ul{display:grid;gap:12px}
.footer-col a{color:rgba(255,255,255,.65);font-size:14.5px;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-contact-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:14.5px}
.footer-contact-item svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent)}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:rgba(255,255,255,.45);
}
.footer-legal-links{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.footer-legal-links a{color:rgba(255,255,255,.65);font-size:13.5px;transition:color .2s}
.footer-legal-links a:hover{color:#fff}
.footer-link-btn{background:none;border:none;padding:0;color:rgba(255,255,255,.65);font-size:13.5px;font-family:inherit;transition:color .2s}
.footer-link-btn:hover{color:#fff}
/* ---------- Cookie consent banner (see vektis_render_cookie_banner() in wp-compat.php) ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--panel-dark);color:rgba(255,255,255,.85);box-shadow:0 -8px 30px rgba(0,0,0,.25);animation:cookieBannerUp .4s var(--ease)}
.cookie-banner[hidden]{display:none}
.cookie-banner-inner{max-width:1100px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cookie-banner-inner p{margin:0;font-size:14px;color:rgba(255,255,255,.75)}
.cookie-banner-inner a{color:#fff;text-decoration:underline}
.cookie-banner-actions{display:flex;gap:10px;flex:none}
@keyframes cookieBannerUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (max-width:600px){
.cookie-banner-inner{padding:16px 18px}
.cookie-banner-actions{width:100%}
.cookie-banner-actions .btn{flex:1;justify-content:center}
}
/* ---------- Scroll reveal (cinematic: blur + scale + rise) ---------- */
.reveal{
opacity:0;transform:translateY(32px) scale(.97);filter:blur(6px);
transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
}
.reveal.in-view{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.reveal-stagger.in-view > *{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.reveal-stagger > *{
opacity:0;transform:translateY(28px) scale(.96);filter:blur(5px);
transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
}
.reveal-stagger > *:nth-child(1){transition-delay:.05s}
.reveal-stagger > *:nth-child(2){transition-delay:.15s}
.reveal-stagger > *:nth-child(3){transition-delay:.25s}
.reveal-stagger > *:nth-child(4){transition-delay:.35s}
.reveal-stagger > *:nth-child(5){transition-delay:.45s}
/* ---------- Cinematic hero entrance (plays once on load, above the fold) ----------
Kept short on purpose: the h1 here is the page's Largest Contentful Paint element on
mobile, and an opacity:0/blurred element isn't counted as "painted" until this
animation settles — a slow entrance directly inflates the LCP metric. Same staggered
fade/rise feel, just fast enough not to cost real seconds of measured load time. */
.hero-cine{opacity:0;transform:translateY(38px) scale(.96);filter:blur(8px);animation:heroIn .5s var(--ease) forwards}
.hero-cine.d1{animation-delay:.02s}
.hero-cine.d2{animation-delay:.08s}
.hero-cine.d3{animation-delay:.14s}
.hero-cine.d4{animation-delay:.2s}
@keyframes heroIn{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
/* Continuous gradient sweep across the hero headline — subtle, always-on motion */
.text-shimmer{
background:linear-gradient(100deg,var(--ink) 40%,var(--accent) 50%,var(--ink) 60%);
background-size:250% auto;color:transparent;-webkit-background-clip:text;background-clip:text;
animation:shimmerSweep 5s ease-in-out infinite;
}
@keyframes shimmerSweep{
0%,100%{background-position:200% 0}
50%{background-position:0 0}
}
/* ---------- Magnetic buttons ---------- */
.btn{will-change:transform}
.btn-magnetic{transition:transform .35s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
/* ---------- 3D tilt cards (JS sets --tiltX/--tiltY per pointer position) ---------- */
.tilt-card{
--tiltX:0deg;--tiltY:0deg;
transform:perspective(800px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateY(0);
transition:transform .5s var(--ease),box-shadow .3s var(--ease);
transform-style:preserve-3d;
}
.tilt-card:hover{transition:transform .08s linear,box-shadow .3s var(--ease)}
@keyframes float{
0%,100%{transform:translate(0,0) scale(1)}
50%{transform:translate(-20px,20px) scale(1.05)}
}
@keyframes pulse-dot{
0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.2)}
50%{box-shadow:0 0 0 6px rgba(34,197,94,.1)}
}
/* ---------- Responsive ---------- */
@media (max-width:980px){
.card-grid{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr);row-gap:40px}
.steps::before{display:none}
.team-grid{grid-template-columns:repeat(2,1fr)}
.about-grid,.ceo-grid,.contact-grid{grid-template-columns:1fr}
.ceo-photo-wrap{max-width:240px}
.footer-grid{grid-template-columns:1fr 1fr}
.pricing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
/* Full-screen mobile drawer — inset:0 rather than a fixed width/height so it always covers
the entire viewport exactly, on any phone, regardless of rounding. Shared by every
.nav-toggle/.main-nav pair on the site (marketing header, app topbar, portal topbar) via
the same class, wired generically in main.js — "one hamburger behavior" everywhere. */
/* display:none is the hide mechanism now (not opacity/visibility) — a hard guarantee the
drawer never paints, receives input, or affects layout while closed, on any browser.
opacity+visibility technically should do the same thing, but this removes all doubt. */
.main-nav{
display:none;
background:linear-gradient(165deg,#fff 0%,var(--accent-light) 45%,#fff 75%,var(--accent-light) 100%);
background-size:100% 260%;
flex-direction:column;align-items:stretch;
padding:96px 28px 28px;
box-sizing:border-box;
}
.main-nav::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--ink),var(--accent-dark),var(--accent),var(--accent-light));
}
/* Forced full-viewport sizing lives on the .is-open rule itself, !important, so nothing
upstream (flex-item sizing from being a child of the flex .app-topbar, any inherited
max-width, etc.) can ever leave it short of covering the entire screen. */
.main-nav.is-open{
display:flex!important;
position:fixed!important;
top:0!important;right:0!important;bottom:0!important;left:0!important;
width:auto!important;height:auto!important;
margin:0!important;max-width:none!important;
overflow-y:auto;
z-index:2000;
animation:navBgFlow 10s var(--ease) infinite alternate, mobileNavIn .3s var(--ease) both;
}
@keyframes navBgFlow{0%{background-position:50% 0%}100%{background-position:50% 100%}}
@keyframes mobileNavIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
/* Nav items cascade in one by one once the drawer opens, rather than appearing all at once —
covers both DOM shapes sharing this drawer: the marketing header's brand+