/* Vibra Finish demo: styles that Tailwind utilities don't cover.
   WordPress: enqueue this after the compiled Tailwind file. */

:root { --header-h: 76px; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 64px); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #1F74D4; color: #fff; }
img, video { max-width: 100%; }
:focus-visible { outline: 2px solid #1F74D4; outline-offset: 3px; border-radius: 6px; }

/* ---------- Header ---------- */
.site-header { transition: background-color .35s ease, box-shadow .35s ease, transform .35s ease; }
.site-header.is-scrolled { background: rgba(7, 13, 24, .97); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -20px rgba(0,0,0,.6); }
/* pages with a section menu: header drops its shadow so the two bars read as one unit */
body.has-subnav .site-header.is-scrolled { box-shadow: none; }
.subnav.is-stuck { box-shadow: 0 12px 24px -18px rgba(10,18,32,.45); }
.nav-link { position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: #1F74D4; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav-item:hover > .nav-link::after, .nav-item.is-open > .nav-link::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

.mega { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.nav-item.is-open > .mega { opacity: 1; visibility: visible; transform: none; }
.mega-card video { opacity: 0; transition: opacity .35s ease; }
.mega-card:hover video { opacity: 1; }

/* Mega menu items: staggered entrance each time a menu opens, then a hover animation per item */
.nav-item.is-open .mega-item { animation: megaIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes megaIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.mega-item { transition: translate .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.mega-card:hover, .mega-ind:hover, .mega-tile:hover { translate: 0 -5px; }
.mega-card:hover { box-shadow: 0 18px 30px -16px rgba(10,18,32,.6); }
.mega-card img, .mega-ind img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.mega-card:hover img, .mega-ind:hover img { transform: scale(1.08); }
.mega-ind > div { transition: box-shadow .35s ease; }
.mega-ind:hover > div { box-shadow: 0 0 0 3px #1F74D4, 0 18px 30px -16px rgba(10,18,32,.5); }
.mega-ind p { transition: color .2s ease; }
.mega-ind:hover p { color: #1F74D4; }
.mega li a { display: inline-flex; align-items: center; gap: 6px; transition: translate .25s ease, color .2s ease; }
.mega li a::after { content: "→"; opacity: 0; translate: -6px 0; transition: opacity .2s ease, translate .25s ease; color: #1F74D4; }
.mega li a:hover { translate: 4px 0; }
.mega li a:hover::after { opacity: 1; translate: 0 0; }

.scroll-progress { transform-origin: left; transform: scaleX(0); }

/* Mobile drawer */
.drawer { transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.drawer.is-open { transform: none; }
.drawer-backdrop { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.acc-panel > div { overflow: hidden; }
.is-expanded > .acc-panel, .acc-panel.is-expanded { grid-template-rows: 1fr; }
.acc-icon { transition: transform .3s ease; }
.is-expanded .acc-icon { transform: rotate(45deg); }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Headline word rotator */
.rotator { display: inline-grid; vertical-align: bottom; justify-items: start; overflow: hidden; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.rotator > span { grid-area: 1 / 1; opacity: 0; transition: opacity .45s ease; white-space: nowrap; }
.rotator > span.is-active { opacity: 1; }
.rotator > span.is-leaving { opacity: 0; }

/* Hero */
.hero-shade { background: linear-gradient(100deg, rgba(7,13,24,.96) 0%, rgba(7,13,24,.82) 38%, rgba(7,13,24,.35) 75%, rgba(7,13,24,.2) 100%); }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.grid-lines { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; }
.grid-lines-dark { background-image: linear-gradient(rgba(10,18,32,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10,18,32,.05) 1px, transparent 1px); background-size: 48px 48px; }

/* ---------- Vibra scroll rail (motif from the current site) ---------- */
.rail { position: absolute; top: 0; bottom: 0; left: 28px; width: 2px; background: linear-gradient(#D8DFE8, #D8DFE8); }
.rail-fill { position: absolute; top: 0; left: 0; width: 2px; height: 0; background: linear-gradient(#4F91E1, #1F74D4); }
.rail-dot { position: absolute; left: -15px; width: 32px; height: 32px; border-radius: 50%; background: #0A1220; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(31,116,212,.15), 0 0 28px rgba(31,116,212,.7); transform: translateY(-50%); transition: top .12s linear; }
.rail-dot svg { width: 14px; height: 14px; }
@media (max-width: 1023px) { .rail { left: 14px; } }

/* ---------- Stat blocks ---------- */
.stat-block { position: relative; text-align: center; padding: 22px 16px 20px; border-radius: 20px; background: linear-gradient(180deg, #F5F7FA, #fff); border: 1px solid #E1E6ED; overflow: hidden; transition: translate .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease; }
.stat-block::before { content: ""; position: absolute; left: 50%; top: 0; width: 44px; height: 3px; border-radius: 0 0 4px 4px; background: #1F74D4; translate: -50% 0; transition: width .4s ease; }
.stat-block:hover { translate: 0 -4px; border-color: #B5D2F4; box-shadow: 0 18px 34px -22px rgba(10,18,32,.4); }
.stat-block:hover::before { width: 100%; }
.stat-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #EEF5FD; color: #1F74D4; }
.stat-icon svg { width: 18px; height: 18px; }
.stat-num { font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(2.1rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.02em; color: #0A1220; margin-top: 12px; }
.stat-label { margin-top: 6px; color: #66758B; font-size: 14px; }

/* ---------- About: timeline ---------- */
.scrollbar-none { scrollbar-width: none; } .scrollbar-none::-webkit-scrollbar { display: none; }
.tl-btn { position: relative; flex: none; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px; scroll-snap-align: center; color: #66758B; }
.tl-dot { width: 16px; height: 16px; margin-top: 11px; border-radius: 50%; background: #fff; border: 3px solid #B9C3D1; transition: transform .25s ease, background-color .25s ease, border-color .25s ease; }
.tl-year { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 600; transition: color .2s ease; }
.tl-btn:hover .tl-dot { border-color: #1F74D4; }
.tl-btn[aria-selected="true"] { color: #0A1220; }
.tl-btn[aria-selected="true"] .tl-dot { background: #1F74D4; border-color: #1F74D4; transform: scale(1.35); box-shadow: 0 0 0 6px rgba(31,116,212,.18); }
.tl-pane { display: grid; gap: 32px; align-items: center; }
@media (min-width: 768px) { .tl-pane { grid-template-columns: 1fr 1fr; } }
.tl-pane[hidden] { display: none; }
.tl-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 28px; }
.tl-big { font-family: Archivo, sans-serif; font-weight: 900; font-stretch: 120%; font-size: clamp(4rem, 9vw, 7rem); line-height: .9; color: transparent; -webkit-text-stroke: 2px #1F74D4; }
.tl-title { font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1.1; margin-top: 14px; }
.tl-text { margin-top: 12px; color: #66758B; font-size: 17px; line-height: 1.6; }

/* ---------- About: team, certs, partners ---------- */
.team-card { text-align: center; border: 1px solid #E1E6ED; border-radius: 24px; padding: 30px 20px; transition: translate .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease; }
.team-card:hover { translate: 0 -5px; border-color: #B5D2F4; box-shadow: 0 18px 34px -22px rgba(10,18,32,.4); }
.team-avatar { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, #1F74D4, #0F2F55); box-shadow: 0 0 0 6px #EEF5FD; transition: transform .35s ease; }
.team-card:hover .team-avatar { transform: scale(1.06) rotate(-4deg); }
.team-card h3 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.15rem; margin-top: 18px; }
.team-card p { color: #66758B; font-size: 14px; margin-top: 2px; }
.cert-tile { display: grid; gap: 12px; justify-items: center; padding: 22px 16px; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: translate .3s ease, background-color .3s ease, border-color .3s ease; }
.cert-tile img { height: 56px; width: auto; background: #fff; border-radius: 10px; padding: 6px 10px; }
.cert-tile span { font-size: 14px; color: #CFD8E6; }
.cert-tile:hover { translate: 0 -4px; background: rgba(31,116,212,.18); border-color: #4F91E1; }
.partner-row { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 20px; border: 1px solid #E1E6ED; transition: border-color .25s ease, background-color .25s ease, translate .3s ease; }
.partner-row:hover { border-color: #1F74D4; background: #EEF5FD; translate: 4px 0; }
.partner-mark { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #0A1220; color: #fff; font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 13px; }
.partner-row h3 { font-weight: 700; } .partner-row p { color: #66758B; font-size: 14px; }
.award-card { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: 22px; background: #0A1220; color: #fff; }
.award-year { font-family: Archivo, sans-serif; font-weight: 900; font-size: 2.2rem; color: #F2B84B; }
.award-card h3 { font-weight: 700; font-size: 1.1rem; } .award-card p { color: #AFC0DA; font-size: 14px; }

/* ---------- Resources ---------- */
.res-card { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; border: 1px solid #E1E6ED; background: #fff; transition: translate .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease, opacity .35s ease, transform .35s ease; }
.res-card:hover { translate: 0 -5px; border-color: #B5D2F4; box-shadow: 0 20px 36px -24px rgba(10,18,32,.45); }
.res-media { aspect-ratio: 16/10; overflow: hidden; background: #F5F7FA; }
.res-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.res-card:hover .res-media img { transform: scale(1.06); }
.res-media-logo { display: grid; place-items: center; } .res-media-logo img { width: 60%; height: auto; object-fit: contain; }
.res-body { padding: 22px; } .res-body h3 { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.25; margin-top: 10px; }
.res-body p { color: #66758B; font-size: 15px; margin-top: 6px; }
.res-tag { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #185EB0; background: #EEF5FD; border-radius: 6px; padding: 4px 8px; }
.res-tag-case { color: #8A5A00; background: #FDF3DF; } .res-tag-news { color: #1E6B3A; background: #E6F4EA; }
.vid-card { position: relative; aspect-ratio: 4/3; border-radius: 22px; overflow: hidden; background: #101A2C; text-align: left; }
.vid-card img, .vid-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .7s ease; }
.vid-card video { opacity: 0; } .vid-card.is-playing video { opacity: 1; }
.vid-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,18,32,.9), rgba(10,18,32,.1) 60%); }
.vid-play { position: absolute; z-index: 1; left: 50%; top: 45%; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); font-size: 18px; transition: background-color .3s ease, scale .3s ease; }
.vid-card:hover .vid-play { background: #1F74D4; scale: 1.1; }
.vid-title { position: absolute; z-index: 1; left: 18px; bottom: 16px; font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.1rem; }
.dl-col { border: 1px solid #E1E6ED; border-radius: 24px; padding: 24px; }
.dl-col h3 { font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.2rem; margin-bottom: 10px; }
.dl-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px; transition: background-color .2s ease; }
.dl-row:hover { background: #EEF5FD; }
.dl-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #0A1220; color: #fff; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; }
.dl-row span:nth-child(2) { flex: 1; font-weight: 500; }
.dl-arrow { color: #1F74D4; font-weight: 700; transition: translate .25s ease; } .dl-row:hover .dl-arrow { translate: 0 3px; }

/* ---------- Footer CTA straddle ---------- */
.cta-straddle { background: linear-gradient(to bottom, transparent 0, transparent 63%, #0A1220 63%); }
.cta-straddle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 63%; pointer-events: none; opacity: .6;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; }
.cta-straddle > div { z-index: 1; }

/* ---------- Marquee ---------- */
.marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee:hover .animate-marquee { animation-play-state: paused; }
.logo-chip img { filter: grayscale(1) contrast(.9); opacity: .65; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.logo-chip:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* ---------- Service cards with hover video ---------- */
.svc-card .svc-media img, .svc-card .svc-media video { transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.svc-card .svc-media video { opacity: 0; }
.svc-card.is-playing .svc-media video { opacity: 1; }
.svc-card:hover .svc-media img { transform: scale(1.06); }
.svc-card .svc-arrow { transition: transform .3s ease, background-color .3s ease; }
.svc-card:hover .svc-arrow { transform: translateX(4px); background: #1F74D4; color: #fff; }
.tilt { transform-style: preserve-3d; transition: transform .2s ease; will-change: transform; }

/* ---------- Process finder ---------- */
.chip { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: #1F74D4; border-color: #1F74D4; color: #fff; }
.finder-result { transition: opacity .35s ease, transform .35s ease; }
.finder-result.is-swapping { opacity: 0; transform: translateY(10px); }

/* ---------- Industries tabs ---------- */
.ind-tab[aria-selected="true"] { background: #fff; color: #0A1220; box-shadow: 0 10px 24px -16px rgba(10,18,32,.5); }
.ind-tab[aria-selected="true"] .ind-bar { transform: scaleX(1); }
.ind-bar { transform: scaleX(0); transform-origin: left; transition: transform 6s linear; }
.ind-panel { transition: opacity .45s ease, transform .45s ease; }
.ind-panel[hidden] { display: none; }
.ind-panel.is-entering { opacity: 0; transform: translateY(12px); }

/* ---------- Before / after slider ---------- */
.ba { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; transform: translateX(-1px); }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: ew-resize; }
.ba-before img { filter: grayscale(1) sepia(.55) contrast(.8) brightness(.62) blur(.6px); }
.ba-after img { filter: brightness(1.08) contrast(1.08) saturate(1.1); }

/* ---------- Range input (configurator) ---------- */
input[type="range"].range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #1F74D4 var(--fill, 20%), #D8DFE8 var(--fill, 20%)); outline: none; }
input[type="range"].range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 6px solid #1F74D4; box-shadow: 0 4px 14px rgba(31,116,212,.45); cursor: grab; }
input[type="range"].range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 6px solid #1F74D4; cursor: grab; }

/* ---------- Media selector bars ---------- */
.meter-fill { transform-origin: left; transition: transform .7s cubic-bezier(.2,.8,.2,1); }

/* ---------- Product filter ---------- */
.prod-card { transition: opacity .35s ease, transform .35s ease; }
.prod-card.is-hidden { display: none; }
.prod-card.is-fading { opacity: 0; transform: scale(.96); }

/* ---------- Modal ---------- */
.modal { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal .modal-box { transform: translateY(20px) scale(.98); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.modal.is-open .modal-box { transform: none; }

/* ---------- Stepper (service page) ---------- */
.step-btn[aria-selected="true"] { color: #0A1220; }
.step-btn[aria-selected="true"] .step-num { background: #1F74D4; color: #fff; border-color: #1F74D4; }
.step-progress { transition: width .5s ease; }

/* ---------- Scrollspy sub-nav ---------- */
.spy-link[aria-current="true"] { color: #fff; background: #1F74D4; }

/* ---------- Quote form ---------- */
.q-step { display: none; }
.q-step.is-active { display: block; animation: stepIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.q-dot[data-state="done"] { background: #1F74D4; color: #fff; border-color: #1F74D4; }
.q-dot[data-state="current"] { border-color: #1F74D4; color: #1F74D4; box-shadow: 0 0 0 5px rgba(31,116,212,.15); }
.field { transition: border-color .2s ease, box-shadow .2s ease; }
.field:focus { border-color: #1F74D4; box-shadow: 0 0 0 4px rgba(31,116,212,.15); outline: none; }
.field.is-invalid { border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
.option-card input:checked + span { border-color: #1F74D4; background: #EEF5FD; box-shadow: 0 0 0 4px rgba(31,116,212,.12); }
.option-card input:checked + span .opt-check { background: #1F74D4; border-color: #1F74D4; color: #fff; }
.dropzone.is-over { border-color: #1F74D4; background: #EEF5FD; }
.check-draw path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .7s .2s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

[data-group].is-invalid { border-radius: 18px; box-shadow: 0 0 0 2px #DC2626; }

/* ---------- Toast ---------- */
.toast { transform: translate(-50%, 140%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.toast.is-open { transform: translate(-50%, 0); }

/* ---------- Floating actions ---------- */
.fab { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Gallery lightbox ---------- */
.lb-img { transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }

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