/* =============================================================================
   OnePixel Soft — LIGHT / minimalist re-skin (loaded LAST).
   Flips the template's dark surfaces to a clean white theme with our orange
   accent. High-specificity + !important where needed to beat the vendor
   main.css dark rules. The AI "tech card" graphic stays dark by design.
   ============================================================================= */

/* ---- Page + shells -------------------------------------------------------- */
html,
body,
body.black-bg-4,
body[class*="black-bg"],
#smooth-wrapper,
#smooth-content,
.ops-home-main,
.ops-service-main,
.ops-about-main {
  background-color: #ffffff !important;
  color: #0f1117;
}

/* generic dark section backgrounds from the template → light */
.black-bg-4,
.black-bg,
.black-bg-2,
.black-bg-3,
[data-background] {
  background-color: transparent;
}

.ops-service-main,
.ops-service-hero,
.ops-service-section,
.pp-service-details-ptb,
.pp-service-details-overview-ptb,
.pp-about-area,
.tp-pd-2-ptb,
.tp-breadcrumb-area,
.ops-home-hero,
.it-hero-area,
.it-step-area {
  background-color: #ffffff !important;
}

.ops-page-alt,
.ops-section:nth-of-type(even) {
  background-color: #ffffff;
}

/* ---- Typography: dark ink site-wide -------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.ops-service-title,
.pp-service-details-title,
.tp-pd-2-title,
.it-hero-title,
.tp-blog-title,
.tp-career-title,
.ops-section-title {
  color: #0f1117 !important;
}

p,
li,
.ops-service-lead,
.pp-about-content p,
.tp_text_anim p {
  color: #4a5060;
}

a {
  color: inherit;
}

/* Case-study hero title: fluid size + break long single-word titles so they never
   overflow the viewport on mobile (e.g. "Advoconnect" was 60px → 28px wider than its
   column at 375px, causing a page-wide horizontal scroll on all project-detail pages). */
.tp-pd-2-title {
  font-size: clamp(2.25rem, 9vw, 90px) !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- Header / nav (was dark sticky) → clean white ------------------------ */
#header-sticky,
.tp-header-10-area,
.tp-header-11-style,
.sticky-black-bg,
.header-11-dark-style,
.header-transparent {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 17, 23, .08);
}

.tp-header-10-menu nav>ul>li>a {
  color: #0f1117 !important;
}

.tp-header-10-menu nav>ul>li>a:hover,
.tp-header-10-menu nav>ul>li.active>a {
  color: var(--ops-brand) !important;
}

.tp-offcanvas-open-btn i {
  background: #0f1117 !important;
}

/* mega-menu / submenu panels → white */
.tp-megamenu-wrapper,
.tp-submenu,
.dropdown-black-bg,
.megamenu-black-bg,
.offcanvas-black-bg {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, .1) !important;
  box-shadow: 0 20px 50px rgba(15, 17, 23, .12);
}

.tp-header-10-menu .tp-megamenu-title,
.tp-megamenu-title {
  color: #0f1117 !important;
  border-bottom-color: rgba(15, 17, 23, .1) !important;
}

.tp-header-10-menu .tp-megamenu-list ul li a,
.tp-header-10-menu .tp-submenu li a,
.tp-megamenu-list ul li a,
.tp-submenu li a {
  color: #565d6d !important;
}

.tp-header-10-menu .tp-megamenu-list ul li a:hover,
.tp-header-10-menu .tp-submenu li a:hover,
.tp-megamenu-list ul li a:hover,
.tp-submenu li a:hover {
  color: #000000 !important;
  background-color: rgba(var(--ops-brand-rgb), .06) !important;
}

.tp-header-dropdown nav ul li .tp-submenu li:hover>a {
  background-color: rgba(var(--ops-brand-rgb), .06) !important;
  color: #000000 !important;
}

/* ---- Offcanvas slide-out panel → light ----------------------------------- */
.tp-offcanvas-area .tp-offcanvas-wrapper,
.tp-offcanvas-wrapper.offcanvas-black-bg,
.offcanvas-black-bg {
  background: #ffffff !important;
}

.tp-offcanvas-content .tp-offcanvas-title,
.tp-offcanvas-contact .tp-offcanvas-title,
.tp-offcanvas-title {
  color: #0f1117 !important;
}

.tp-offcanvas-content p,
.tp-offcanvas-contact ul li {
  color: #565d6d !important;
}

.tp-offcanvas-contact ul li a {
  color: #565d6d !important;
}

.tp-offcanvas-contact ul li a:hover {
  color: var(--ops-brand) !important;
}

.tp-offcanvas-close-btn,
.tp-offcanvas-close-btn svg {
  color: #0f1117 !important;
}

.tp-offcanvas-menu nav ul li a {
  color: #0f1117 !important;
}

/* ---- Reviews badge / logo strip (used white-on-dark) → light ------------- */
.ops-reviews-badge {
  background: #fff;
  border-color: rgba(15, 17, 23, .12);
  box-shadow: 0 6px 20px rgba(15, 17, 23, .06);
}

.ops-reviews-badge .ops-reviews-text {
  color: #0f1117;
}

.ops-reviews-badge .ops-reviews-platforms span {
  background: #eef0f4;
  color: #0f1117;
}

.ops-reviews-badge .ops-reviews-platforms {
  border-right-color: rgba(15, 17, 23, .12);
}

.ops-logostrip {
  background: #f6f7f9;
  border-color: rgba(15, 17, 23, .08);
}

.ops-logostrip-eyebrow {
  color: var(--ops-brand);
}

.ops-logostrip-heading {
  color: #0f1117;
}

.ops-logostrip-cell {
  border-color: rgba(15, 17, 23, .08);
}

.ops-logostrip-cell img {
  filter: grayscale(1);
  opacity: .5;
}

.ops-logostrip-cell:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.ops-logostrip-caption {
  color: #878d9c;
}

.ops-logostrip-track img {
  filter: none;
  opacity: .55;
}

.ops-logostrip-track img:hover {
  opacity: 1;
}

.ops-trustbar-logos img {
  filter: none;
  opacity: .6;
}

/* ---- Hero ---------------------------------------------------------------- */
.ops-home2-hero {
  background: linear-gradient(180deg, #f6f7f9, #ffffff);
}

.ops-home2-hero-title {
  color: #0f1117;
}

.ops-home2-hero-lead {
  color: #565d6d;
}

.ops-btn-ghost,
.ops-btn-ghost:visited {
  color: #0f1117;
  border-color: rgba(15, 17, 23, .2);
}

.ops-btn-ghost:hover {
  background: #f2f3f6;
  color: #0f1117;
  border-color: rgba(15, 17, 23, .35);
}

/* ---- Cards / grids / steps / stats (light) ------------------------------- */
.ops-card {
  background: #ffffff;
  border-color: #e9ebf0;
  box-shadow: 0 8px 30px rgba(15, 17, 23, .05);
}

.ops-card:hover {
  background: #ffffff;
  border-color: rgba(var(--ops-brand-rgb), .5);
  box-shadow: 0 16px 40px rgba(15, 17, 23, .09);
}

.ops-card h3 {
  color: #0f1117;
}

.ops-card p {
  color: #565d6d;
}

.ops-card p[style] {
  color: #0f1117 !important;
}

.ops-why-section {
  background: #f8f9fb;
}

.ops-portfolio-item {
  background: #fff;
  border-color: #e9ebf0;
  box-shadow: 0 4px 20px rgba(15, 17, 23, .06);
}

.ops-portfolio-item:hover {
  box-shadow: 0 20px 50px rgba(15, 17, 23, .12);
}

.ops-portfolio-info h3 {
  color: #0f1117;
}

.ops-portfolio-info p {
  color: #565d6d;
}

.ops-why-num {
  color: rgba(var(--ops-brand-rgb), 0.07);
}

.ops-why-card:hover .ops-why-num {
  color: rgba(var(--ops-brand-rgb), 0.14);
}

.ops-quote-text {
  color: #0f1117 !important;
  font-size: 1.05rem;
}

.ops-quote-name {
  font-size: 1rem !important;
  margin-top: 18px;
}

.ops-quote-role {
  font-size: .85rem;
}

.ops-step {
  border-top-color: #e4e6ec;
}

.ops-step::before {
  background: #ffffff;
}

.ops-step h3 {
  color: #0f1117;
}

.ops-step p {
  color: #565d6d;
}

.ops-stat {
  background: #ffffff;
  border-color: #e9ebf0;
  box-shadow: 0 8px 24px rgba(15, 17, 23, .05);
}

.ops-stat span {
  color: #565d6d;
}

.ops-prod {
  background: #ffffff;
  border-color: #e9ebf0;
  box-shadow: 0 6px 20px rgba(15, 17, 23, .05);
  padding: 20px;
}

.ops-prod h3 {
  color: #0f1117;
}

.ops-prod p {
  color: #878d9c;
}

.ops-post {
  background: #ffffff;
  border-color: #e9ebf0;
  box-shadow: 0 8px 26px rgba(15, 17, 23, .06);
}

.ops-post-body h3 {
  color: #0f1117;
}

.ops-featured {
  background: linear-gradient(135deg, #f7f8fa, #ffffff);
  border-color: #e9ebf0;
}

.ops-featured-body h3 {
  color: #0f1117;
}

.ops-featured-body p {
  color: #565d6d;
}

/* ---- CTA band: keep a bold DARK band for contrast on the light page ------ */
.ops-cta-inner {
  background: radial-gradient(120% 160% at 0% 0%, rgba(var(--ops-brand-rgb), 0.35), transparent 55%), #14161e;
  border-color: rgba(var(--ops-brand-rgb), 0.4);
}

.ops-cta-inner h2 {
  color: #ffffff !important;
}

.ops-cta-inner p {
  color: rgba(255, 255, 255, .8);
}

/* ---- Footer (was dark) → light ------------------------------------------- */
footer,
.tp-footer-area,
.tp-footer-style-6,
.tp-copyright-area {
  background: #f6f7f9 !important;
  color: #0f1117;
}

.tp-footer-widget-title,
.tp-footer-widget-title-sm,
.tp-copyright-big-text {
  color: #0f1117 !important;
}

.tp-footer-widget-menu ul li a,
.tp-footer-widget-info a,
.ops-footer-legal a,
.tp-copyright-left span {
  color: #565d6d !important;
}

.tp-footer-widget-menu ul li a:hover,
.tp-footer-widget-info a:hover,
.ops-footer-legal a:hover {
  color: var(--ops-brand) !important;
}

.tp-footer-widget-social a {
  background: #ffffff;
  /* border: 1px solid rgba(15, 17, 23, .1); */
  color: #0f1117 !important;
}

.tp-footer-widget-social a:hover {
  background: #ea5523 !important;
  color: #FFF !important;
}

.tp-footer-widget-social a span:hover {
  color: #FFF !important;
}

.ops-trust-strip {
  border-top-color: rgba(15, 17, 23, .08);
  background: #f6f7f9;
}

.ops-trust-title {
  color: #0f1117;
}

.ops-trust-eyebrow {
  color: var(--ops-brand);
  font-weight: 700;
}

.ops-trust-badges a {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, .10) !important;
  box-shadow: 0 4px 14px rgba(15, 17, 23, .04) !important;
  height: 100px !important;
  min-width: 150px !important;
  padding: 10px 22px !important;
  border-radius: 14px !important;
}

.ops-trust-badges a:hover {
  border-color: var(--ops-brand) !important;
  box-shadow: 0 10px 24px rgba(234, 85, 35, .14) !important;
}

.ops-trust-badges img {
  filter: none !important;
  opacity: 1 !important;
  max-height: 70px !important;
  max-width: 140px !important;
  object-fit: contain !important;
}

/* ---- Inner-page surface cards (service/portfolio/product) ---------------- */
.ops-service-shell,
.ops-service-summary,
.ops-service-card,
.ops-service-cta,
.pp-service-details-about-item,
.ops-capability-card,
.tp-pd-2-step-item,
.ops-showcase-card,
.ops-article-card {
  background: #ffffff !important;
  border: 1px solid #e9ebf0 !important;
  color: #0f1117;
  padding: 15px;
  border-radius: 15px;
}

/* Portfolio grid: the column wrapper is a plain cell — only the inner
   .ops-showcase-card is the card (avoids card-in-card framing). */
.ops-portfolio-card-item {
  background: transparent !important;
  border: 0 !important;
}

.ops-showcase-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ops-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 17, 23, .10) !important;
  border-color: rgba(var(--ops-brand-rgb), .35) !important;
}

.ops-loadmore-wrap {
  text-align: center;
  margin-top: 44px;
}

/* The form is nested inside .ops-service-shell (already a card). Strip the
   leftover dark-theme skin (custom.css:3069: translucent white bg + invisible
   border + heavy black shadow) so it's a plain transparent form, not a
   card-in-card with a floating shadow blob. */
.ops-form-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ops-service-label {
  color: var(--ops-brand) !important;
}

.ops-service-lead,
.ops-service-summary p,
.ops-service-card p {
  color: #565d6d;
}

.ops-card-index {
  background: rgba(var(--ops-brand-rgb), .12) !important;
  color: var(--ops-brand) !important;
}

/* ---- FAQ / trust bar ------------------------------------------------------ */
.ops-faq details {
  background: #ffffff;
  border-color: #e9ebf0;
}

.ops-faq summary {
  color: #0f1117;
}

.ops-faq details p {
  color: #565d6d;
}

.ops-trustbar {
  border-color: rgba(15, 17, 23, .08);
}

.ops-trustbar span {
  color: #878d9c;
}

/* ---- Footer client marquee / "Our clients" (was white text) -------------- */
.ops-clients-track,
.ops-clients-item,
.ops-clients-item *,
.ops-clients-title,
.ops-clients-area,
.ops-clients-area * {
  color: #565d6d !important;
}

.ops-clients-title,
.ops-clients-area h2,
.ops-clients-area h3 {
  color: #0f1117 !important;
}

.ops-clients-item img {
  filter: none;
  opacity: .7;
}

/* ---- Catch-all: any remaining pure-white text in VISIBLE footer/body → ink
   (menus/offcanvas handled above; this catches stray vendor white text) ---- */
footer .tp-footer-widget *,
.tp-copyright-content * {}

/* ---- Clients + testimonials partial (was dark) → light ------------------- */
.ops-clients,
.ops-testimonials {
  background: #ffffff !important;
}

.ops-clients-title,
.ops-testimonials-title,
.ops-clients-heading,
.ops-testimonials-heading {
  color: #0f1117 !important;
}

.ops-clients-eyebrow,
.ops-testimonials-eyebrow {
  color: var(--ops-brand) !important;
}

.ops-testimonials-lead {
  color: #565d6d !important;
}

.ops-testimonial-card {
  background: #ffffff !important;
  border: 1px solid #e9ebf0 !important;
  box-shadow: 0 8px 30px rgba(15, 17, 23, .05);
}

.ops-testimonial-quote {
  color: #0f1117 !important;
}

.ops-testimonial-meta,
.ops-testimonial-meta * {
  color: #565d6d !important;
}

.ops-testimonial-quotemark {
  color: rgba(var(--ops-brand-rgb), .25) !important;
}

.ops-testimonial-link {
  color: var(--ops-brand) !important;
}

.ops-clients-item {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

.ops-clients-item,
.ops-clients-item * {
  color: #000000 !important;
}

.ops-clients-item:hover {
  background: #f8f9fa;
  border-color: rgba(0, 0, 0, 0.2);
}

.ops-clients-item:hover,
.ops-clients-item:hover * {
  color: #000000 !important;
}

/* ---- High-specificity catch-alls (beat nested vendor white rules) -------- */
.ops-testimonials .ops-testimonial-card .ops-testimonial-quote,
.ops-testimonial-card p {
  color: #0f1117 !important;
}

/* footer: any widget text/heading/link → readable ink on the light footer */
footer .tp-footer-widget h4,
footer .tp-footer-widget-title,
footer .tp-footer-widget-title-sm {
  color: #0f1117 !important;
}

footer .tp-footer-widget p,
footer .tp-footer-widget span,
footer .tp-footer-widget a,
footer .tp-footer-widget-info a,
footer .tp-footer-widget li a {
  color: #565d6d !important;
}

footer .tp-footer-widget a:hover,
footer .tp-footer-widget-info a:hover {
  color: #fff !important;
}

/* ---- Home footer (ops-footer-* custom footer) → light -------------------- */
.ops-footer-panel,
.ops-footer-shell,
.ops-footer-main,
.ops-footer-bottom {
  background: transparent !important;
}

.ops-footer-heading,
.ops-footer-title,
.ops-footer-contact-label,
.ops-footer-brand,
.ops-footer-contact-card strong {
  color: #0f1117 !important;
}

.ops-footer-contact-card,
.ops-footer-contact-card a,
.ops-footer-contact-stack,
.ops-footer-contact-stack a,
.ops-footer-links a,
.ops-footer-links-wrap a,
.ops-footer-copy,
.ops-footer-bottom-links a,
.ops-footer-contact-wrap,
.ops-footer-contact-wrap * {
  /* color: #565d6d !important; */
}

.ops-footer-links a:hover,
.ops-footer-contact-card a:hover,
.ops-footer-bottom-links a:hover {
  color: var(--ops-brand) !important;
}

.ops-footer-social a {
  background: #ffffff;
  border: 1px solid rgba(15, 17, 23, .1);
  color: #0f1117 !important;
}

.ops-footer-bottom,
.ops-footer-bottom *,
.ops-footer-copy,
.ops-footer-copy * {
  color: #565d6d !important;
}

/* ---- Hide vendor duplicate back-to-top (we use .ops-back-to-top) --------- */
.back-to-top-wrapper {
  display: none !important;
}

.back-to-top-btn {
  display: none !important;
}

/* ============================================================================
   INNER PAGE COMPREHENSIVE LIGHT OVERRIDES
   Flips every ops-* component that inherits dark-theme colors from
   custom.css / onepixel-service-pages.css. Loaded LAST so specificity wins.
   ============================================================================ */

/* ---- Page main containers → white bg (was dark radial gradients) --------- */
.ops-about-main,
.ops-service-main,
.ops-blog-main,
.ops-career-main,
.ops-internship-main,
.ops-portfolio-showcase-main,
.ops-service-main--web,
.ops-service-main--app,
.ops-service-main--software,
.ops-service-main--marketing,
.ops-service-main--design,
.ops-service-main--video {
  background: #ffffff !important;
}

/* ---- Section labels, eyebrows, intros --------------------------------- */
.ops-eyebrow,
.ops-section-label,
.ops-portfolio-eyebrow,
.ops-history-premium .ops-section-label,
.ops-work-premium .ops-section-label,
.ops-blog-heading-wrap .tp-section-subtitle,
.ops-service-label,
.ops-capability-index,
.ops-service-index-count,
.ops-card-index,
.ops-focus-label,
.ops-drupal-focus-label {
  color: var(--ops-brand) !important;
}

.ops-section-title,
.ops-portfolio-headline,
.ops-work-title,
.ops-service-title,
.ops-service-index-heading h2,
.ops-service-index-card h3,
.ops-service-card h3,
.ops-service-cta h3,
.ops-service-directory h3,
.ops-portfolio-content h3,
.ops-article-content h3,
.ops-article-copy h2,
.ops-article-copy h3,
.ops-article-copy h4,
.ops-article-mini h3,
.ops-legal-copy h3,
.ops-founder-card h3,
.ops-office-card h3,
.ops-cta-card h3,
.ops-badge-card h3,
.ops-process-card h3,
.ops-work-card-title,
.ops-service-pin .cst-section-title,
.ops-portfolio-featured-copy h2,
.ops-team-showcase-head h2,
.ops-flow-mobile h4,
.pp-service-details-title,
.pp-service-details-overview-title,
.pp-service-details-process-title,
.pp-service-details-overview-wrapper h4,
.tp-service-4-solution-item-title,
.pp-service-details-process-item h4,
.ops-focus-name,
.ops-drupal-focus-name,
.pp-service-details-about-item span,
.ops-service-metric-card strong,
.ops-history-stat strong,
.ops-history-premium .ops-history-stat strong,
.ops-service-stat-item strong,
.ops-portfolio-kpi strong,
.ops-home-stat strong,
.ops-home-panel-mini-item strong,
.ops-home-panel-feature-item strong,
.ops-home-hero-proof-item strong,
.ops-home-hero-chip strong,
.ops-article-author-copy strong,
.ops-portfolio-author-copy strong,
.ops-contact-hero-point strong,
.ops-history-premium .ops-history-copy,
.ops-history-copy,
.ops-service-pin-note strong {
  color: #0f1117 !important;
}

/* ---- Body copy / paragraph text --------------------------------------- */
.ops-about-intro,
.ops-founder-meta,
.ops-founder-meta span,
.ops-text-card p,
.ops-founder-card p,
.ops-office-card p,
.ops-cta-card p,
.ops-badge-card p,
.ops-service-directory li,
.ops-service-directory p,
.ops-service-directory a,
.ops-process-card p,
.ops-process-intro p,
.ops-team-showcase-head p,
.ops-team-showcase-head span,
.ops-history-stat span,
.ops-history-premium .ops-history-stat span,
.ops-portfolio-kpi span,
.ops-service-stat-item span,
.ops-home-stat span,
.ops-home-panel p,
.ops-home-client p,
.ops-home-panel-mini-item span,
.ops-home-panel-feature-item span,
.ops-home-hero-proof-item span,
.ops-home-hero-chip span,
.ops-service-summary p,
.ops-service-card p,
.ops-service-cta p,
.ops-service-lead,
.ops-service-lead p,
.ops-service-shell p,
.ops-service-pin-copy,
.ops-service-pin-note,
.ops-portfolio-subcopy,
.ops-portfolio-featured-copy p,
.ops-portfolio-chip,
.ops-work-card p,
.ops-work-badge,
.ops-article-content p,
.ops-article-copy,
.ops-article-meta,
.ops-article-mini span,
.ops-article-author-copy span,
.ops-article-date,
.ops-article-tag,
.ops-article-tag i,
.ops-portfolio-author-copy span,
.ops-portfolio-date,
.ops-portfolio-tag,
.ops-portfolio-tag i,
.ops-service-metric-card p,
.ops-service-index-card p,
.ops-contact-hero-point span,
.ops-career-subcopy,
.ops-legal-copy p,
.ops-legal-copy li,
.ops-service-summary .ops-service-link,
.pp-service-details-overview-wrapper p,
.pp-service-details-overview-list ul li,
.tp-service-4-solution-item-content ul li,
.pp-service-details-process-item p,
.pp-service-details-process-bottom span,
.pp-service-details-about-item p,
.pp-service-details-process-item span,
.pp-service-details-process-subtitle,
.tp-portfolio-inner-content span,
.ops-flow-node span,
.ops-flow-mobile,
.ops-focus-copy,
.ops-drupal-focus-copy,
.ops-info-list a,
.ops-showcase-card-tag,
.ops-showcase-card-link,
.smart-technologies-top h2,
.smart-technologies-middle .left-part ul li span,
.ops-portfolio-featured-link,
.ops-featured-prev,
.ops-featured-next,
.ops-gallery-card-featured figcaption {
  color: #565d6d !important;
}

/* ---- Card / panel / pill backgrounds → light ------------------------- */
.ops-founder-card,
.ops-text-card,
.ops-history-panel,
.ops-office-card,
.ops-cta-card,
.ops-badge-card,
.ops-service-directory,
.ops-process-card,
.ops-team-tile,
.ops-work-card,
.ops-article-card,
.ops-portfolio-card,
.ops-showcase-card,
.ops-service-metric-card,
.ops-service-index-card,
.ops-service-card,
.ops-service-cta,
.ops-service-summary,
.ops-history-premium .ops-history-panel,
.ops-history-premium .ops-history-image,
.ops-portfolio-showcase-main .ops-portfolio-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.10) !important;
  box-shadow: 0 8px 24px rgba(15, 17, 23, 0.04) !important;
  backdrop-filter: none !important;
}

.ops-tag,
.ops-badge-link,
.ops-service-pill,
.ops-portfolio-pill,
.ops-tab-button,
.ops-home-panel-chip,
.ops-home-hero-chip,
.ops-portfolio-chip,
.ops-home-hero-service-tag span,
.ops-portfolio-tabs .nav-link {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.12) !important;
  color: #0f1117 !important;
}

.ops-tag:hover,
.ops-badge-link:hover,
.ops-service-pill:hover,
.ops-social-link:hover,
.ops-portfolio-pill:hover,
.ops-tab-button:hover {
  background: var(--ops-brand) !important;
  color: #ffffff !important;
  border-color: var(--ops-brand) !important;
}

.ops-tab-button.is-active,
.ops-history-premium .ops-tab-button.is-active,
.ops-portfolio-tabs .nav-link.active {
  background: var(--ops-brand) !important;
  border-color: var(--ops-brand) !important;
  color: #ffffff !important;
}

/* ---- Action links / buttons that had white text on dark chip --------- */
.ops-service-link,
.ops-service-link:hover,
.ops-service-link:focus-visible,
.ops-showcase-card:hover .ops-showcase-card-link,
.ops-showcase-card-link:hover,
.ops-showcase-card-link:focus,
.ops-service-index-card:hover,
.ops-service-index-card i,
.ops-portfolio-featured-link {
  color: var(--ops-brand) !important;
}

.ops-featured-prev,
.ops-featured-next {
  color: #fdfdfd !important;
  background: #ea5523;
  border-radius: 50%;

}


.ops-service-card_contact p a {
  color: #474747 !important;
}

.ops-service-link {
  background: transparent !important;
  border-color: rgba(15, 17, 23, 0.10) !important;
}

.ops-service-link:hover {
  background: rgba(234, 85, 35, 0.06) !important;
  border-color: var(--ops-brand) !important;
}

/* ---- Blog CTA button (was orange gradient with white text) ----------- */
.ops-blog-cta-btn {
  color: #ffffff !important;
}

/* ---- Career apply button ---------------------------------------------- */
.ops-career-main .ops-career-apply-btn {
  background: var(--ops-brand) !important;
  color: #ffffff !important;
  border: 1px solid var(--ops-brand) !important;
}

.ops-career-main .ops-career-apply-btn:hover,
.ops-career-main .ops-career-apply-btn:focus {
  background: #d34317 !important;
  color: #ffffff !important;
}

/* ---- Form inputs ------------------------------------------------------ */
.ops-form-field,
.ops-form-field span,
.ops-form-field label,
.ops-form-note {
  color: #565d6d !important;
}

.ops-form-field input,
.ops-form-field textarea,
.ops-form-field select {
  color: #0f1117 !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.15) !important;
}

.ops-form-field input::placeholder,
.ops-form-field textarea::placeholder {
  color: #878d9c !important;
  opacity: 1;
}

/* ---- tp-* legacy overlays ------------------------------------------------ */
.tp-benefit-item-icon span {
  color: #0f1117 !important;
}

.smart-technologies {
  background: #f5f6f9 !important;
}

.smart-technologies-top h2 {
  color: #0f1117 !important;
}

.smart-technologies-middle .left-part ul li span {
  color: #565d6d !important;
}

/* ---- Anchor color safety net for links inside light cards ------------ */
.ops-service-card a,
.ops-legal-copy a,
.ops-badge-card a,
.ops-office-card a,
.ops-article-content .ops-service-link {
  color: var(--ops-brand) !important;
}

.ops-about-main .ops-office-card a:hover,
.ops-about-main .ops-badge-card a:hover,
.ops-about-main .ops-social-link:hover,
.ops-about-main .ops-cta-card a:hover,
.ops-portfolio-content h3 a:hover {
  color: #d34317 !important;
}

/* ---- Bootstrap utility classes hardcoded in source pages ---------------- *
   .text-white / .text-white-50 remain from the dark-theme flat pages. On the
   light theme these appear as white text on white bg (invisible). Flip them
   to dark ink whenever they sit inside main content, but leave them alone
   inside CTA bands and other explicitly dark sections (keep specificity low
   so section-level overrides can still win).                                */
main .text-white,
main .text-white-50 {
  color: #0f1117 !important;
}

main .lead.text-white,
main .lead.text-white-50 {
  color: #565d6d !important;
}

main [class*="text-white"] {
  color: #0f1117 !important;
}

main .lead[class*="text-white"] {
  color: #565d6d !important;
}

/* Keep explicit dark bands / cards' white text WHITE */
.ops-cta-band [class*="text-white"],
.ops-cta-band .text-white,
.tp-cta-black-area [class*="text-white"],
.tp-cta-black-area .text-white,
.tp-cta-2-area [class*="text-white"],
.ops-techcard [class*="text-white"] {
  color: #ffffff !important;
}

.ops-cta-band .lead[class*="text-white"],
.ops-cta-band .lead.text-white-50,
.tp-cta-black-area .lead[class*="text-white"] {
  color: rgba(255, 255, 255, .78) !important;
}

/* ---- Vendor .tp-section-subtitle / .tp-section-title in dark theme ------ */
main .tp-section-subtitle,
main .tp-section-subtitle-platform,
main .tp-section-subtitle.pre,
main .tp-section-subtitle-3 {
  color: var(--ops-brand) !important;
}

main .tp-section-title,
main .tp-section-title-platform,
main .tp-section-title-3,
main h4.tp-section-title {
  color: #0f1117 !important;
}

/* ---- Bootstrap list-group items with dark-theme utility classes ------- */
main .list-group-item.bg-transparent,
main .list-group-item.border-secondary {
  background: #ffffff !important;
  border-color: rgba(15, 17, 23, 0.10) !important;
  color: #0f1117 !important;
}

main .list-group-item.bg-transparent.text-white,
main .list-group-item.bg-transparent [class*="text-white"] {
  color: #0f1117 !important;
}

/* ---- Reviews widget: bare spans inheriting white from an ancestor ----- */
main .ops-reviews-badge span,
main .ops-reviews-badge b,
main .ops-reviews-badge {
  color: #0f1117 !important;
}

main .ops-reviews-badge .ops-reviews-text {
  color: #565d6d !important;
}

main .ops-reviews-badge .ops-reviews-text b {
  color: #0f1117 !important;
}

/* ---- Portfolio "Go Trackon" project links / featured link ------------- */
main .ops-portfolio-featured .ops-portfolio-featured-copy a,
main .ops-portfolio-showcase-main a {
  color: #ffffff !important;
}

main .ops-portfolio-featured .ops-portfolio-featured-copy a:hover,
main .ops-portfolio-showcase-main a:hover {
  color: var(--ops-brand) !important;
}

/* ---- Gallery / career / internship hero titles that used .text-white --- */
main h1.text-white,
main h1[class*="text-white"],
main h2.text-white,
main h2[class*="text-white"],
main h3.text-white,
main h3[class*="text-white"],
main .display-5.text-white {
  color: #0f1117 !important;
}

main .text-uppercase[class*="text-white"] {
  color: var(--ops-brand) !important;
}

/* ---- High-specificity: service-details pages (.ops-service-main + vendor .pp-*)
   Vendor rules use 2-class specificity `.ops-service-main .pp-*`; matching it
   here so onepixel-light.css (loaded later) wins the cascade.               */
.ops-service-main .pp-service-details-title,
.ops-service-main .pp-service-details-overview-title,
.ops-service-main .pp-service-details-process-title,
.ops-service-main .pp-service-details-overview-wrapper h4,
.ops-service-main .tp-service-4-solution-item-title,
.ops-service-main .pp-service-details-process-item h4,
.ops-service-main .pp-service-details-about-item span,
.ops-service-main .ops-focus-name,
.ops-service-main .ops-drupal-focus-name {
  color: #0f1117 !important;
}

.ops-service-main .pp-about-content p,
.ops-service-main .pp-about-content div,
.ops-service-main .pp-service-details-overview-wrapper p,
.ops-service-main .pp-service-details-overview-list ul li,
.ops-service-main .tp-service-4-solution-item-content ul li,
.ops-service-main .pp-service-details-process-item p,
.ops-service-main .pp-service-details-process-item span,
.ops-service-main .pp-service-details-process-subtitle,
.ops-service-main .pp-service-details-process-bottom span,
.ops-service-main .pp-service-details-about-item p,
.ops-service-main .ops-focus-copy,
.ops-service-main .ops-drupal-focus-copy {
  color: #565d6d !important;
}

.ops-service-main .pp-service-details-about-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.10) !important;
  box-shadow: 0 8px 24px rgba(15, 17, 23, 0.04) !important;
  color: #565d6d !important;
}

.ops-service-main .pp-service-details-about-item * {
  color: inherit !important;
}

.ops-service-main .pp-service-details-about-item span,
.ops-service-main .pp-service-details-about-item h1,
.ops-service-main .pp-service-details-about-item h2,
.ops-service-main .pp-service-details-about-item h3,
.ops-service-main .pp-service-details-about-item h4,
.ops-service-main .pp-service-details-about-item h5 {
  color: #0f1117 !important;
}

/* ---- Portfolio detail (project-details/*) — anchors/titles in cards --- */
.ops-portfolio-showcase-main .ops-showcase-card a,
.ops-portfolio-showcase-main .ops-showcase-card h3,
.ops-portfolio-showcase-main .ops-showcase-card h3 a,
.ops-portfolio-featured a {
  color: #0f1117 !important;
}

.ops-portfolio-showcase-main .ops-showcase-card a:hover,
.ops-portfolio-featured a:hover {
  color: var(--ops-brand) !important;
}

/* ---- Nuclear default: any bare text-node child in main w/o explicit color
   remains dark. Uses `body main` prefix (2 tags + implicit) to keep low, so
   real component overrides still win.                                       */
body main span:not([class]),
body main a:not([class]),
body main p:not([class]),
body main div:not([class])>span:not([class]) {
  color: #0f1117;
}

/* ---- Internship / career: bootstrap list-group nested items ------------ */
.ops-internship-main .list-group-item,
.ops-career-main .list-group-item {
  background: #ffffff !important;
  border-color: rgba(15, 17, 23, 0.10) !important;
  color: #0f1117 !important;
}

.ops-internship-main .list-group-item *,
.ops-career-main .list-group-item * {
  color: inherit !important;
}

/* ---- Career/internship: "Position/Salary/Experience" labels in job cards */
main .tp-career-opening-heading span,
main .tp-career-opening-heading strong,
main .tp-career-opening-item span,
main .tp-career-opening-item p {
  color: #565d6d !important;
}

main .tp-career-opening-heading h3,
main .tp-career-opening-heading h4,
main .tp-career-opening-item h3,
main .tp-career-opening-item h4 {
  color: #0f1117 !important;
}

main .tp-career-opening-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.10) !important;
}

/* ---- Project detail (project-details/*): tp-pd-2 overview list items --- */
main .tp-pd-2-overview-wrap ul li,
main .tp-pd-2-overview-wrap p,
main .tp-pd-2-overview-wrap span,
main .tp-pd-2-content p,
main .tp-pd-2-content span {
  color: #565d6d;
}

main .tp-pd-2-overview-wrap h2,
main .tp-pd-2-overview-wrap h3,
main .tp-pd-2-overview-wrap h4,
main .tp-pd-2-content h2,
main .tp-pd-2-content h3 {
  color: #0f1117 !important;
}

/* ---- Bootstrap btn-outline-light on light bg → invisible; flip to dark - */
main .btn.btn-outline-light {
  color: #0f1117 !important;
  border-color: rgba(15, 17, 23, 0.30) !important;
}

main .btn.btn-outline-light:hover,
main .btn.btn-outline-light:focus {
  color: #ffffff !important;
  background: var(--ops-brand) !important;
  border-color: var(--ops-brand) !important;
}

main .card.bg-transparent.border-light-subtle {
  background: #ffffff !important;
  border-color: rgba(15, 17, 23, 0.10) !important;
}

main .card.bg-transparent.border-light-subtle .card-body,
main .card.bg-transparent.border-light-subtle .card-body * {
  color: #0f1117 !important;
}

main .card.bg-transparent.border-light-subtle .lead,
main .card.bg-transparent.border-light-subtle p {
  color: #565d6d !important;
}

/* ---- Bootstrap p.mb-20 / other margin utility classes with no color --- */
main p.mb-20,
.ops-about-main p.mb-20,
.ops-about-main .ops-office-card p.mb-20,
.ops-about-main .ops-cta-card p.mb-20,
body main p.mb-20 {
  color: #565d6d !important;
}

/* ---- Bootstrap .text-light (mahalaxmi-web hero-desc) --------------- */
main .text-light,
main [class*="text-light"],
main .hero-desc.text-light {
  color: #565d6d !important;
}

main .hero-desc {
  color: #565d6d !important;
}

main .btn-outline-light,
main .btn.btn-outline-light {
  color: #0f1117 !important;
}

/* Keep dark bands' text-light truly light */
.ops-cta-band .text-light,
.ops-cta-band [class*="text-light"],
.tp-cta-black-area .text-light,
.tp-cta-black-area [class*="text-light"] {
  color: #ffffff !important;
}

/* Bare ul>li inside custom project pages (mahalaxmi-web content lists) */
main .ops-portfolio-showcase-main ul li:not([class]),
main .ops-portfolio-showcase-main .container ul li:not([class]) {
  color: #565d6d !important;
}

/* ---- Vendor tp-portfolio-details-* (pinkora-web) light overrides -------- */
main .tp-portfolio-details-1-sub,
main .tp-portfolio-details-1-sub *,
main .tp-portfolio-details-2-sub,
main .tp-portfolio-details-2-sub *,
main .tp-portfolio-details-content span,
main .tp-portfolio-details-content p,
main .tp-portfolio-details-info span,
main .tp-portfolio-details-info li {
  color: #565d6d !important;
}

main .tp-portfolio-details-1-title,
main .tp-portfolio-details-2-title,
main .tp-portfolio-details-content h1,
main .tp-portfolio-details-content h2,
main .tp-portfolio-details-content h3,
main .tp-portfolio-details-info h4 {
  color: #0f1117 !important;
}

main .tp-portfolio-details-btn {
  background: var(--ops-brand) !important;
  color: #ffffff !important;
  border: 1px solid var(--ops-brand) !important;
}

main .tp-portfolio-details-btn:hover {
  background: #d34317 !important;
  color: #ffffff !important;
}

/* Bare list items in custom project pages (mahalaxmi + pinkora + generic vendor lists) */
main ul.portfolio_details_feature-list li,
main .tp-portfolio-details-1-list ul li,
main .tp-portfolio-details-1-list li,
main .tp-portfolio-details-2-list ul li,
main .portfolio_details_feature-list li,
main .tp-portfolio-details-1-content ul li {
  color: #565d6d !important;
}

/* =============================================================
   CTA BAND (dark band): keep text WHITE — my main{} overrides
   forced everything to dark ink; explicitly restore for this band.
   ============================================================= */
.ops-cta-band,
main .ops-cta-band {
  background: #14161e !important;
  color: #ffffff !important;
}

.ops-cta-band h2,
main .ops-cta-band h2,
.ops-cta-band .ops-cta-inner h2,
main .ops-cta-band .ops-cta-inner h2 {
  color: #ffffff !important;
}

.ops-cta-band p,
main .ops-cta-band p,
.ops-cta-band .ops-cta-inner p,
main .ops-cta-band .ops-cta-inner p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.ops-cta-band .ops-btn-ghost,
main .ops-cta-band .ops-btn-ghost,
.ops-cta-band button.ops-btn-ghost,
main .ops-cta-band button.ops-btn-ghost {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.ops-cta-band .ops-btn-ghost:hover,
main .ops-cta-band .ops-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.ops-cta-band .ops-btn-primary,
main .ops-cta-band .ops-btn-primary {
  color: #ffffff !important;
  background: var(--ops-brand) !important;
  border-color: var(--ops-brand) !important;
}

.ops-cta-band .ops-btn-primary:hover,
main .ops-cta-band .ops-btn-primary:hover {
  background: #d34317 !important;
  color: #ffffff !important;
}

/* =============================================================================
   PRODUCTION READINESS — WCAG AA CONTRAST + TYPOGRAPHY REFINEMENTS
   Site-wide fixes so small text passes WCAG AA (4.5:1). Bright brand orange
   #ea5523 fails on white for small text (3.61:1); we introduce a darker
   text-safe brand shade (#b53a12 ≈ 5.4:1) and re-target the tokens.
   ============================================================================= */
:root {
  --ops-brand-text: #b53a12;
  /* darker orange for small text (passes AA) */
  --ops-ink-2: #4a5160;
  /* darken muted ink for AA compliance (was #565d6d) */
  --ops-ink-3: #6b7280;
  /* darken muted-more ink (was #878d9c) */
}

/* --- Small orange text: eyebrows, labels, chips, tabs, links --- */
main .ops-eyebrow,
.ops-eyebrow,
main .ops-trust-eyebrow,
.ops-trust-eyebrow,
main .ops-section-label,
.ops-section-label,
main .ops-portfolio-eyebrow,
.ops-portfolio-eyebrow,
main .ops-showcase-label,
.ops-showcase-label,
main .ops-focus-label,
.ops-focus-label,
main .ops-drupal-focus-label,
.ops-drupal-focus-label,
main .ops-capability-index,
.ops-capability-index,
main .ops-service-index-count,
.ops-service-index-count,
main .ops-service-label,
.ops-service-label,
main .ops-card-index,
.ops-card-index,
main .tp-section-subtitle,
main .tp-section-subtitle-platform,
main .tp-section-subtitle.pre,
main .tp-section-subtitle-3 {
  color: var(--ops-brand-text) !important;
}

/* --- Muted secondary text: increase contrast --- */
main .ops-logostrip-caption,
.ops-logostrip-caption,
main .ops-home-lead,
main .ops-cta-card-lead,
main .ops-section-lead,
main .ops-reviews-badge .ops-reviews-text,
main .ops-founder-meta,
main .ops-article-date,
main .ops-portfolio-date,
main .ops-article-tag,
main .ops-portfolio-tag {
  color: var(--ops-ink-2) !important;
}

/* --- Techchips on white bg: make text darker and readable --- */
main .ops-techchip,
.ops-techchip {
  color: #14161e !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.12) !important;
  font-weight: 600 !important;
}

main .ops-techchip i,
.ops-techchip i {
  color: var(--ops-brand-text) !important;
}

/* --- Tab buttons: active state uses SOLID orange bg (kept high-contrast) --- */
main .ops-tab-btn {
  color: var(--ops-ink-2) !important;
}

main .ops-tab-btn.is-active,
main .ops-lightsection .ops-tab-btn.is-active {
  background: var(--ops-brand) !important;
  color: #ffffff !important;
  border-color: var(--ops-brand) !important;
}

/* --- Learn-more arrow link: darker orange text --- */
main .ops-learn-more {
  color: var(--ops-brand-text) !important;
}

main .ops-learn-more:hover {
  color: #8f2d0d !important;
}

/* --- Pill links inside showcase panels: dark ink, orange on hover --- */
main .ops-pill,
main .ops-pill-list a {
  color: #14161e !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.14) !important;
}

main .ops-pill:hover,
main .ops-pill-list a:hover {
  background: var(--ops-brand) !important;
  color: #ffffff !important;
  border-color: var(--ops-brand) !important;
}

/* --- Big display accents (h1/h2 large text) can KEEP bright orange —
       ≥18px bold text passes AA-Large 3.0. But h3/h4/small accents need dark orange. */
main h3 .ops-accent,
main h4 .ops-accent,
main h5 .ops-accent,
main .ops-cta-card-stat-num .ops-accent,
main .ops-cta-card-title .ops-accent,
main span.ops-accent:not(.ops-hero-accent) {
  color: var(--ops-brand-text) !important;
}

main h1 .ops-accent,
main h2 .ops-accent {
  color: var(--ops-brand) !important;
}

/* large display OK */

/* --- Home hero title accent: KEEP bright orange (huge display text) --- */
main .ops-home2-hero-title .ops-accent {
  color: var(--ops-brand) !important;
}

/* --- Article/blog post inline links --- */
main .ops-article-copy a,
main .ops-article-content a,
main .ops-legal-copy a {
  color: var(--ops-brand-text) !important;
}

main .ops-article-copy a:hover,
main .ops-article-content a:hover,
main .ops-legal-copy a:hover {
  color: #8f2d0d !important;
  text-decoration: underline;
}

/* --- Footer copyright / muted footer text --- */
.ops-footer-copy,
.ops-footer-legal,
.ops-footer-bottom,
.ops-footer-copy *,
.ops-footer-legal * {
  color: var(--ops-ink-2) !important;
}

.ops-footer-links a,
.ops-footer-contact-card a,
.ops-footer-contact-stack a {
  color: var(--ops-ink-2) !important;
}

.ops-footer-links a:hover,
.ops-footer-contact-card a:hover,
.ops-footer-contact-stack a:hover {
  color: var(--ops-brand-text) !important;
}

/* --- Trust strip eyebrow using new safe orange --- */
.ops-trust-eyebrow {
  color: var(--ops-brand-text) !important;
}

/* --- ops-service-link (used for phone links, product links, "View product →")
       These are small links in orange — must be darker orange for AA. */
main .ops-service-link,
main a.ops-service-link,
main .ops-service-link:hover,
main a.ops-service-link:hover,
main .ops-prod-go,
main .ops-blog-cta-link,
main .ops-portfolio-featured-link,
main .ops-social-link,
main .ops-service-summary .ops-service-link {
  color: var(--ops-brand-text) !important;
}

main .ops-service-link:hover,
main a.ops-service-link:hover,
main .ops-prod-go:hover,
main .ops-portfolio-featured-link:hover,
main .ops-social-link:hover {
  color: #8f2d0d !important;
}

/* --- Bare <strong> inside stat cards using orange (500+ etc.) — kept large --- */
main .ops-home-stat strong,
main .ops-history-stat strong {
  color: #0f1117 !important;
}

/* Except the accent inside big stat callouts stays bright */

/* --- <time> tag with orange color (blog dates) — small text = darken --- */
main time,
main .ops-article-date,
main .ops-portfolio-date {
  color: var(--ops-ink-2) !important;
}

/* --- ops-card-index decorative number (01, 02, 03…) — apply low alpha
       so it reads as a decorative watermark, not body text. This bypasses
       contrast checks correctly since the numeral is decorative. */
main .ops-card-index,
.ops-card-index {
  color: rgb(181 58 18) !important;
  font-weight: 800;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* --- .ops-service-link.w-100 (product cards - full-width link) --- */
main .ops-service-link.w-100 {
  color: var(--ops-brand-text) !important;
}

main .ops-service-link.w-100:hover {
  color: #8f2d0d !important;
}

/* --- Testimonial cards: if white text on orange bg, that's OK for large text
       but for small caption/roles, make sure bg is dark enough --- */
main .ops-testimonial,
main .ops-testimonial-item,
main .ops-testimonial-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.10) !important;
}

main .ops-testimonial *,
main .ops-testimonial-item *,
main .ops-testimonial-card * {
  /* color: inherit !important; */
}

main .ops-testimonial p,
main .ops-testimonial-item p {
  color: #14161e !important;
}

main .ops-testimonial .ops-testimonial-name,
main .ops-testimonial-item .ops-testimonial-name {
  color: #0f1117 !important;
  font-weight: 700;
}

main .ops-testimonial .ops-testimonial-role,
main .ops-testimonial-item .ops-testimonial-role {
  color: var(--ops-ink-2) !important;
}

/* --- Contact page hero "Contact Us" span with me-3 class --- */
main .ops-contact-hero-item .me-3,
main .ops-contact-hero .me-3 {
  color: var(--ops-brand-text) !important;
}

/* =============================================================
   PAGE-SPECIFIC POLISH
   Fixes surfaced by senior-designer visual walkthrough.
   ============================================================= */

/* --- About: founder card photo was unconstrained (3024x3195 image
       rendering huge). Force a clean 4:5 portrait crop. --- */
.ops-founder-photo {
  /* aspect-ratio: 4 / 5; */
  max-height: 460px;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 24px;
  background: #f5f6f9;
}

.ops-founder-photo img,
.ops-founder-photo picture,
.ops-founder-photo picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Founder card is now compact — remove h-100 stretch effect on the row */
.ops-founder-card.h-100 {
  height: auto !important;
  border-radius: 10px;
}

.ops-founder-card {
  padding: 24px !important;
}

/* Ensure right text card doesn't leave an empty column below when founder card is short */
.ops-text-card.h-100 {
  border-radius: 10px;
  height: auto !important;
}

/* --- History section trophy image (about-us) — constrain to card area --- */
.ops-history-image {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: #f5f6f9;
}

.ops-history-panel.h-100 {
  border-radius: 10px;
}

.ops-history-image img,
.ops-history-image picture,
.ops-history-image picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* --- About: legacy vendor dark testimonial slider (tp-testimonial-area) ---
   Flip to light and clip overflow so rotated cards don't escape viewport. */
.tp-testimonial-area,
.tp-testimonial-area.black-bg-3 {
  background: #f6f7f9 !important;
  overflow: hidden !important;
  padding: 80px 0 !important;
}

.tp-testimonial-area .tp-testimonial-global img,
.tp-testimonial-area .global-img,
.tp-testimonial-area .overlay-img {
  display: none !important;
}

.tp-testimonial-area .tp-testimonial-slider-wrap {
  overflow: hidden !important;
}

.tp-testimonial-area .tp-testimonial-title,
.tp-testimonial-area .tp-testimonial-subtitle,
.tp-testimonial-area .tp-testimonial-title-box * {
  color: #0f1117 !important;
}

.tp-testimonial-area .tp-testimonial-ratting-title,
.tp-testimonial-area .tp-testimonial-ratting-subtitle,
.tp-testimonial-area .tp-testimonial-ratting-title strong {
  color: #0f1117 !important;
}

.tp-testimonial-area .swiper-slide {
  transform: none !important;
}

.tp-testimonial-area .tp-testimonial-item {
  transform: none !important;
}

.tp-testimonial-area .swiper-container-testimonial-carousel {
  overflow: hidden !important;
}

/* --- About: legacy dark milestones band (tp-award-area) ---
   Convert to a clean light striped list with orange accents. */
.tp-award-area,
.tp-award-area.black-bg-3 {
  background: #ffffff !important;
  padding: 80px 0 !important;
}

.tp-award-subtitle,
.tp-award-area .tp-award-subtitle {
  color: #0f1117 !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  margin-bottom: 32px !important;
}

.tp-award-area .tp-award-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.08) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin-bottom: 12px !important;
  transition: border-color .25s ease, box-shadow .25s ease !important;
}

.tp-award-area .tp-award-item:hover {
  border-color: var(--ops-brand) !important;
  box-shadow: 0 10px 28px rgba(234, 85, 35, 0.10) !important;
}

.tp-award-area .tp-award-year {
  color: var(--ops-brand) !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  margin-right: 20px !important;
}

.tp-award-area .tp-award-text {
  color: #0f1117 !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
}

.tp-award-area .tp-award-position {
  color: var(--ops-ink-2) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Hide reveal-on-hover background images (legacy dark feature) */
.tp-award-area .tp-award-reveal-img {
  display: none !important;
}

.tp-award-area .hover-reveal-item::before,
.tp-award-area .hover-reveal-item::after {
  display: none !important;
}

/* --- About: team collage image — constrain size --- */
.ops-team-collage img {
  width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  object-fit: contain !important;
  display: block !important;
}

/* --- Suppress the "The process of working with a software company" bare
       image if any page still emits it. Bare img inside section without
       container/class = legacy leftover. --- */
main>section>img:only-child,
main section>img[src*="workflow.png"] {
  display: none !important;
}

/* --- About: contact/badge cards inside CTA row squishing to unreadable width.
       Force min-width so text wraps normally. --- */
.ops-office-card,
.ops-cta-card {
  min-width: 0 !important;
}

.ops-cta-card .row .col-md-6 {
  min-width: 260px !important;
}

.ops-badge-card {
  display: block !important;
  min-width: 240px !important;
  padding: 24px !important;
}

.ops-badge-card h3 {
  font-size: 1.1rem !important;
  margin: 8px 0 12px !important;
}

.ops-badge-card p {
  margin-bottom: 16px !important;
  line-height: 1.5 !important;
}

.ops-badge-card a {
  word-break: break-word;
}

/* --- About: testimonial swiper still overflowing — force strict containment */
.tp-testimonial-area {
  overflow: hidden !important;
}

.tp-testimonial-area .swiper-container,
.tp-testimonial-area .tp-testimonial-slider-active,
.tp-testimonial-area .tp-testimonial-slider-wrap,
.tp-testimonial-area .container {
  overflow: hidden !important;
}

.tp-testimonial-area .swiper-wrapper {
  transform: none !important;
}

.tp-testimonial-area .swiper-slide {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

.tp-testimonial-area .tp-testimonial-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, 0.10) !important;
  border-radius: 20px !important;
  padding: 32px 36px !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  box-shadow: 0 10px 30px rgba(15, 17, 23, 0.06) !important;
  transform: none !important;
}

.tp-testimonial-area .tp-testimonial-item * {
  color: #0f1117 !important;
}

.tp-testimonial-area .tp-testimonial-item p {
  color: var(--ops-ink-2) !important;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* --- Hide the massive workflow.png (was already dropped from source but if
       another page still emits it, cover) --- */
img[src*="workflow.png"] {
  display: none !important;
}

/* =========================================================
   MEGA-MENU FIXES — column overlap + auto-close behavior
   ========================================================= */
/* Allow long menu labels to wrap inside their column (no more spillover
   into the neighbouring column). */
.tp-megamenu-list ul li a {
  white-space: normal !important;
  line-height: 1.3 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
}

.tp-megamenu-list ul li {
  padding: 0 8px !important;
  margin-bottom: 4px !important;
}

/* Widen the mega-menu columns so 6 slots don't crush at ~250px each */
.tp-megamenu-wrapper.mega-menu {
  max-width: 1400px !important;
}

.tp-megamenu-list h4.tp-megamenu-title {
  padding: 12px 16px 8px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

/* --- Auto-close: vendor CSS shows menu on li:hover, but the transition-delay
   of 0.3s + focus persistence sometimes keeps it open after mouse leaves.
   Force snappy transitions and ensure hidden when NOT hovering ancestor. */
.tp-header-dropdown nav ul li:not(:hover)>.tp-megamenu-wrapper,
.tp-header-dropdown nav ul li:not(:hover)>.tp-submenu {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
  pointer-events: none !important;
}

.tp-header-dropdown nav ul li:hover>.tp-megamenu-wrapper,
.tp-header-dropdown nav ul li:hover>.tp-submenu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* --- Service detail: Working Process section — convert dark to light -------- */
.pp-service-details-process-ptb {
  background: #f8f9fa !important;
}

.pp-service-details-process-item {
  background: #ffffff !important;
  border: 1px solid #e9ebf0 !important;
  box-shadow: 0 8px 24px rgba(15, 17, 23, .04) !important;
}

.pp-service-details-process-bottom span {
  color: #565d6d !important;
  border-color: #e9ebf0 !important;
}

/* --- Service detail: dark 3D decorations don't fit light minimalist theme --- */
.pp-about-shape,
.pp-service-shape,
.service-details-shape,
.pp-about-shape img,
.pp-service-shape img {
  display: none !important;
}

/* --- Service detail: fix faded/low-opacity content cards (fade animation stall).
       Force any process/scope item to be fully visible even if the animation
       stalled between init and completion. --- */
.pp-service-details-process-item,
.pp-service-details-about-item,
.pp-service-details-overview-item {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.pp-service-details-process-item * {
  opacity: 1 !important;
}

/* =============================================================================
   KILL ALL SCROLL-TRIGGERED ANIMATIONS
   All animation classes are stripped from the HTML by the build pipeline.
   These rules are a CSS safety net: if any animated class survives (e.g. in a
   partial not processed by convert.php), force it visible immediately.
   ============================================================================= */

/* All fade / slide / bounce / text / scale animation classes */
.tp_fade_anim,
.tp_text_anim,
.tp_text_anim p,
.tp-text-invert,
.tp_text_invert_2,
.tp_text_invert_3,
.tp-title-anim,
.tp-char-animation,
.tp-text-bounce,
.tp-bounce,
.tp-scale-anim,
[data-fade-from],
[data-delay] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  visibility: visible !important;
}

/* GSAP image-reveal wrapper: main.css:821 hides it until a (stripped) JS
   animation reveals it — force visible or the Service Overview image on
   37/40 service detail pages is a blank white column. */
.tp_img_reveal,
.tp_img_reveal img {
  visibility: visible !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 3. SplitText fragments (GSAP splits text into spans) */
.tp_text_anim p div,
.tp_text_anim p span,
.tp-char-animation span,
.tp-text-invert div,
.tp-text-invert span {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 4. Pin-based scroll panels — unpin to normal flow */
.tp-service-panel,
.tp-panel-pin,
.des-portfolio-panel,
.tp-funfact-panel {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}

/* 5. Moving / marquee text */
.moving-text,
.moving-text span {
  transform: none !important;
  animation: none !important;
}

/* 6. Descendants — ensure nothing inside animated containers stays hidden */
.tp_fade_anim *,
.tp-bounce *,
.tp-text-bounce * {
  opacity: inherit !important;
  transform: none !important;
}

/* --- Industries We Serve — tabbed section --------------------------------- */
.ops-industry-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border: 1px solid #e9ebf0;
  border-radius: 14px;
  background: #fff;
  padding: 4px;
  margin-bottom: 32px;
}

.ops-industry-tabs::-webkit-scrollbar {
  display: none;
}

.ops-industry-tabs .ops-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 18px 12px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #565d6d;
  cursor: pointer;
  transition: all .2s;
  min-width: 0;
  flex: 1 0 auto;
  position: relative;
}

.ops-industry-tabs .ops-tab-btn i {
  font-size: 1.2rem;
  transition: color .2s;
}

.ops-industry-tabs .ops-tab-btn.is-active {
  background: var(--ops-brand) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(232, 89, 63, .15);
}

.ops-industry-tabs .ops-tab-btn.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  opacity: .5;
}

.ops-industry-tabs .ops-tab-btn.is-active i {
  color: #fff !important;
}

.ops-industry-tabs .ops-tab-btn:hover:not(.is-active) {
  background: #f8f9fa;
  color: #0f1117;
}

/* Industry tab panels */
.ops-ind-panel {
  display: none;
}

.ops-ind-panel.is-active {
  display: block;
}

.ops-ind-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e9ebf0;
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 8px 32px rgba(15, 17, 23, .04);
}

.ops-ind-text h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f1117;
  margin: 0 0 16px;
  font-family: 'Bricolage Grotesque', sans-serif;
}

.ops-ind-text p {
  color: #565d6d;
  font-size: .95rem;
  line-height: 1.7;
  margin: 0 0 24px;
}

.ops-ind-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.ops-ind-checks span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  font-weight: 600;
  color: #0f1117;
  background: #f8f9fa;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e9ebf0;
}

.ops-ind-checks span i {
  color: #e8593f;
  font-size: .95rem;
  flex-shrink: 0;
}

.ops-ind-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ops-ind-visual img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.ops-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e8593f;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: gap .2s;
}

.ops-learn-more:hover {
  gap: 12px;
  color: #c94830;
}

@media (max-width: 991px) {
  .ops-ind-content {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px;
  }

  .ops-ind-visual {
    order: -1;
  }
}

@media (max-width: 767px) {
  .ops-industry-tabs {
    gap: 0;
    padding: 3px;
    border-radius: 10px;
  }

  .ops-industry-tabs .ops-tab-btn {
    padding: 10px 12px 8px;
    font-size: .72rem;
  }

  .ops-industry-tabs .ops-tab-btn i {
    font-size: 1rem;
  }

  .ops-ind-content {
    padding: 24px;
  }

  .ops-ind-text h3 {
    font-size: 1.25rem;
  }

  .ops-ind-checks {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   BLANKET ANIMATION KILL — home page
   No scroll-triggered motion, no parallax, no fade-ins — EXCEPT inside the
   intentional looping visuals (.ops-cap-visual capability cards, .ops-indv
   industry cards), which are excluded so their CSS animations run natively.
   ============================================================================= */
.ops-home-main *:not(.ops-cap-visual *):not(.ops-cap-visual):not(.ops-indv *):not(.ops-indv):not(.ops-genai *):not(.ops-genai),
.ops-home-main *:not(.ops-cap-visual *):not(.ops-indv *):not(.ops-genai *)::before,
.ops-home-main *:not(.ops-cap-visual *):not(.ops-indv *):not(.ops-genai *)::after {
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

.ops-home-main .ops-btn,
.ops-home-main .ops-learn-more,
.ops-home-main .ops-tab-btn,
.ops-home-main a,
.ops-home-main .ops-card,
.ops-home-main .ops-portfolio-item,
.ops-home-main .ops-portfolio-thumb img,
.ops-home-main .ops-prod,
.ops-home-main .ops-post,
.ops-home-main .ops-post .ops-post-readmore i,
.ops-home-main .ops-pill,
.ops-home-main .ops-logostrip-cell img,
.ops-home-main .ops-cta-textlink,
.ops-home-main .ops-cta-textlink i,
.ops-home-main .ops-fab-toggle,
.ops-home-main .ops-fab-actions,
.ops-home-main .ops-back-to-top,
.ops-home-main .ops-stat,
.ops-home-main .ops-portfolio-slide,
.ops-home-main .ops-portfolio-slide-media img,
.ops-home-main .ops-portfolio-slide-play,
.ops-home-main .ops-why-card .ops-card-ic {
  transition-duration: .25s !important;
}

.ops-home-main .ops-tab-panel.is-active {
  animation-duration: .3s !important;
}

.ops-home-main .ops-ind-panel.is-active {
  animation: opsFade .3s ease both !important;
}

.tp-cursor {
  display: none !important;
}

/* =============================================================================
   HERO TYPEWRITER
   Ghost copy holds real text (SEO / a11y / no-JS). Live overlay is animated.
   No layout shift: ghost reserves the space, live is absolutely positioned.
   ============================================================================= */
.ops-home2-hero-title.ops-typewriter {
  position: relative;
}

.ops-typewriter .ops-tw-ghost {
  display: inline;
}

.ops-typewriter .ops-tw-live {
  display: none;
}

.ops-typewriter.is-typing .ops-tw-ghost {
  opacity: 0;
}

.ops-typewriter.is-typing .ops-tw-live {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.ops-tw-caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 5px;
  background: var(--ops-brand);
  border-radius: 2px;
  vertical-align: baseline;
  transform: translateY(0.08em);
}

.ops-home-main .ops-tw-caret {
  animation: opsCaretBlink 0.9s steps(1) infinite !important;
  animation-duration: 0.9s !important;
  animation-delay: 0s !important;
}

.ops-tw-caret.is-done {
  animation: none !important;
  opacity: 0;
  transition: opacity .4s ease;
}

@keyframes opsCaretBlink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/* =============================================================================
   BOOTSTRAP UTILITY BACKFILL
   This project's bootstrap.css is a partial build that omits the object-fit
   utilities — without these, .ratio images fall back to object-fit:fill and
   stretch (gallery grid distortion).
   ============================================================================= */
.object-fit-cover {
  object-fit: cover !important;
}

.object-fit-contain {
  object-fit: contain !important;
}

/* =============================================================================
   BACK-TO-TOP BUTTON
   ============================================================================= */
.ops-back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1050;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e9ebf0;
  background: #fff;
  color: #0f1117;
  box-shadow: 0 4px 16px rgba(15, 17, 23, .1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s, background .2s;
}

.ops-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.ops-back-to-top:hover {
  background: var(--ops-brand, #ea5523);
  color: #fff;
  border-color: var(--ops-brand, #ea5523);
}

/* =============================================================================
   FLOATING ACTION BUTTON (FAB) — consolidated widget
   ============================================================================= */
.ops-fab-wrap {
  position: fixed;
  bottom: 90px;
  right: 32px;
  z-index: 1040;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
  pointer-events: none;
}

.ops-fab-toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: var(--ops-brand, #ea5523);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(234, 85, 35, .35);
  display: flex;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  transition: transform .3s, box-shadow .3s;
  position: relative;
}

.ops-fab-toggle:hover {
  box-shadow: 0 8px 28px rgba(234, 85, 35, .45);
}

.ops-fab-wrap.is-open .ops-fab-toggle {
  transform: rotate(45deg);
}

.ops-fab-wrap.is-open .ops-fab-toggle i::before {
  content: "\f00d";
}

.ops-fab-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s, visibility .25s, transform .25s;
  pointer-events: auto;
}

.ops-fab-wrap.is-open .ops-fab-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ops-fab-action {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.ops-fab-action-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.ops-fab-action-icon.wa {
  background: #25D366;
}

.ops-fab-action-icon.call {
  background: #1a2744;
}

.ops-fab-action-icon.consult {
  background: var(--ops-brand, #ea5523);
}

.ops-fab-action-label {
  background: #fff;
  color: #0f1117;
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  pointer-events: none;
}

@media (max-width: 767px) {
  .ops-fab-wrap {
    bottom: 80px;
    right: 16px;
  }

  .ops-fab-toggle {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .ops-fab-action-label {
    display: none;
  }

  .ops-back-to-top {
    bottom: 24px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}

/* AI section — preserve dark island in the light theme */
.ops-ai-section {
  background: linear-gradient(135deg, #0f1117 0%, #1a1d2a 100%) !important;
}

.ops-ai-section .ops-section-title {
  color: #fff !important;
}

.ops-ai-section .ops-eyebrow {
  color: var(--ops-brand) !important;
}

.ops-ai-section p,
.ops-ai-section li,
.ops-ai-section span {
  color: rgba(255, 255, 255, .65) !important;
}

.ops-ai-section strong {
  color: #fff !important;
}

.ops-ai-section .ops-ai-lead {
  color: rgba(255, 255, 255, .72) !important;
}

.ops-ai-section .ops-accent {
  color: var(--ops-brand) !important;
}

/* =============================================================================
   ENHANCED "WHY CHOOSE US" CARDS — premium glassmorphism style
   ============================================================================= */
.ops-why-card {
  background: #fff !important;
  border: 1px solid rgba(var(--ops-brand-rgb), 0.1) !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}

.ops-why-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(var(--ops-brand-rgb), 0.12) !important;
  border-color: rgba(var(--ops-brand-rgb), 0.35) !important;
}

.ops-why-card .ops-card-ic {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  font-size: 24px !important;
  background: linear-gradient(135deg, rgba(var(--ops-brand-rgb), 0.12) 0%, rgba(var(--ops-brand-rgb), 0.06) 100%) !important;
}

.ops-why-card:hover .ops-card-ic {
  background: var(--ops-brand) !important;
  color: #fff !important;
}

.ops-why-num {
  font-size: 3rem !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, rgba(var(--ops-brand-rgb), 0.1) 0%, rgba(var(--ops-brand-rgb), 0.02) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.ops-why-card:hover .ops-why-num {
  background: linear-gradient(180deg, rgba(var(--ops-brand-rgb), 0.2) 0%, rgba(var(--ops-brand-rgb), 0.06) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.ops-why-card h3 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.ops-why-card p {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: #565d6d !important;
}

/* =============================================================================
   PORTFOLIO AUTOSCROLL SLIDER
   ============================================================================= */
.ops-portfolio-slider-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 -16px;
  padding: 0 16px;
}

.ops-portfolio-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 24px;
}

.ops-portfolio-slider::-webkit-scrollbar {
  display: none;
}

.ops-portfolio-slide {
  flex: 0 0 380px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--ops-hairline, #e9ebf0);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
  /* Fix rendering blink on sibling hover */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.ops-portfolio-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

.ops-portfolio-slide-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #f5f6fa;
}

.ops-portfolio-slide-media img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  transition: transform .4s ease;
}

.ops-portfolio-slide:hover .ops-portfolio-slide-media img {
  transform: scale(1.04);
}

.ops-portfolio-slide-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .25);
  opacity: 0;
  transition: opacity .3s;
}

.ops-portfolio-slide:hover .ops-portfolio-slide-play {
  opacity: 1;
}

.ops-portfolio-slide-play i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--ops-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

.ops-portfolio-slide-body {
  padding: 20px 24px 24px;
}

.ops-portfolio-slide-cat {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ops-brand);
  margin-bottom: 8px;
  display: block;
}

.ops-portfolio-slide-body h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ops-ink-1, #0f1117);
  margin: 0 0 8px;
}

.ops-portfolio-slide-body p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ops-ink-2, #565d6d);
  margin: 0;
}

.ops-portfolio-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.ops-portfolio-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: background .2s, transform .2s;
  padding: 0;
}

.ops-portfolio-slider-dot.is-active {
  background: var(--ops-brand);
  transform: scale(1.25);
}

@media (max-width: 767px) {
  .ops-portfolio-slide {
    flex: 0 0 85vw;
  }
}

/* =============================================================================
   SECTION SURFACE RHYTHM  (inner pages)
   Apply ONE surface class to a <section> so inner pages get depth instead of
   running flat white. Alternate down the page; use exactly ONE -ink band per
   page (like the home page's AI section). Appended last so it wins the cascade
   over the blanket #ffffff !important re-skin above.
   ============================================================================= */
.ops-surface-white {
  background: #ffffff !important;
}

.ops-surface-soft {
  background: #f6f7f9 !important;
}

.ops-surface-tint {
  background: linear-gradient(180deg, rgba(var(--ops-brand-rgb), .055) 0%, rgba(var(--ops-brand-rgb), .015) 100%) !important;
}

/* Hero wash — warm brand tint fading to white (replaces legacy dark PNG heroes) */
.ops-surface-herowash {
  background: linear-gradient(180deg, rgba(var(--ops-brand-rgb), .07) 0%, #ffffff 74%) !important;
}

/* Thin divider when two light surfaces must sit adjacent */
.ops-surface-hairline {
  border-top: 1px solid var(--ops-hairline) !important;
}

/* --- Dark contrast band: ONE per page. Flip text / eyebrow / cards to light --- */
.ops-surface-ink {
  background: linear-gradient(135deg, #0f1117 0%, #1a1d2a 100%) !important;
  color: rgba(255, 255, 255, .82) !important;
}

.ops-surface-ink h1,
.ops-surface-ink h2,
.ops-surface-ink h3,
.ops-surface-ink h4,
.ops-surface-ink h5,
.ops-surface-ink h6,
.ops-surface-ink .ops-section-title {
  color: #ffffff !important;
}

.ops-surface-ink p,
.ops-surface-ink li,
.ops-surface-ink .ops-section-lead {
  color: rgba(255, 255, 255, .70) !important;
}

.ops-surface-ink .ops-eyebrow,
.ops-surface-ink .ops-accent {
  color: #ff8a5c !important;
}

.ops-surface-ink .ops-eyebrow::before {
  background: #ff8a5c !important;
}

/* cards inside the ink band become translucent-dark tiles */
.ops-surface-ink .ops-card,
.ops-surface-ink .ops-stat {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .82) !important;
  box-shadow: none !important;
}

.ops-surface-ink .ops-card h3,
.ops-surface-ink .ops-card h4,
.ops-surface-ink .ops-stat-num,
.ops-surface-ink .ops-stat strong {
  color: #ffffff !important;
}

.ops-surface-ink .ops-card p,
.ops-surface-ink .ops-stat span {
  color: rgba(255, 255, 255, .66) !important;
}

.ops-surface-ink .ops-card-ic {
  background: rgba(var(--ops-brand-rgb), .22) !important;
  color: #ff8a5c !important;
}

/* Centered hero action row (About + other inner heroes) */
.ops-center-actions {
  justify-content: center;
}

/* About: review-platform badge cards */
.ops-review-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

@media (max-width: 767px) {
  .ops-review-badges {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ops-review-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 3vw, 36px) 20px;
  background: #fff;
  border: 1px solid #e9ebf0;
  border-radius: var(--r-md, 20px);
  box-shadow: 0 8px 24px rgba(15, 17, 23, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ops-review-badge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 17, 23, .10);
  border-color: rgba(var(--ops-brand-rgb), .3);
}

.ops-review-badge-card img {
  height: 56px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  margin-bottom: 16px;
}

.ops-review-badge-card .ops-review-platform {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ops-ink-1, #0f1117);
  margin-bottom: 4px;
}

.ops-review-badge-card .ops-review-rating {
  font-size: .85rem;
  color: var(--ops-ink-2, #4a5060);
}

.ops-review-badge-card .ops-review-stars {
  color: #f59e0b;
  font-size: 14px;
  margin-top: 8px;
  letter-spacing: 2px;
}

/* Small pill button variant */
.ops-btn.ops-btn-sm {
  padding: 9px 18px !important;
  font-size: 13px !important;
}

/* Internship: benefit icon cards */
.ops-benefit-card h4 {
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 0;
}

/* Internship: tracks table */
.ops-tracks-table {
  padding: 0 !important;
  overflow: hidden;
}

.ops-tracks-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.1fr;
  gap: 20px;
  align-items: center;
  padding: 20px clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--ops-hairline);
}

.ops-tracks-row:last-child {
  border-bottom: 0;
}

.ops-tracks-head {
  background: rgba(var(--ops-brand-rgb), .05);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 700;
  color: var(--ops-ink-2);
}

.ops-tracks-domain {
  font-weight: 700;
  color: var(--ops-ink-1);
  font-size: 1.05rem;
}

.ops-tracks-focus {
  color: var(--ops-ink-2);
}

.ops-tracks-dur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--ops-ink-2);
  font-weight: 600;
}

@media (max-width: 767px) {
  .ops-tracks-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 20px;
  }

  .ops-tracks-head {
    display: none;
  }

  .ops-tracks-domain {
    font-size: 1.1rem;
  }

  .ops-tracks-dur {
    justify-content: flex-start;
    margin-top: 8px;
  }
}

/* Contact: re-weight layout, form fineprint, quick-contact dark strip */
.ops-contact-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  align-items: start !important;
}

@media (max-width: 991px) {
  .ops-contact-layout {
    grid-template-columns: 1fr !important;
  }
}

.ops-form-fineprint {
  margin-top: 14px;
  font-size: 13px;
  color: #6b7280;
}

.ops-form-field input[type="date"] {
  color: #0f1117;
}

.ops-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}

.ops-cta-strip-copy .ops-section-title {
  margin: 6px 0 0;
}

.ops-cta-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Ghost buttons must read as light on any dark band */
.ops-surface-ink .ops-btn-ghost {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .35) !important;
}

.ops-surface-ink .ops-btn-ghost:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .60) !important;
}

/* =============================================================================
   GALLERY (our-gallery) — uniform crop grid + lightbox
   ============================================================================= */
.ops-gal-featured {
  display: block;
  border-radius: var(--r-lg, 24px);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: 0 12px 32px rgba(15, 17, 23, .08);
}

.ops-gal-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.ops-gal-featured:hover img {
  transform: scale(1.04);
}

.ops-gal-culture {
  display: flex;
  flex-direction: column;
}

.ops-gal-culture h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 10px 0 14px;
}

.ops-gal-culture-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.ops-gal-culture-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--ops-ink-2);
  line-height: 1.5;
}

.ops-gal-culture-list li i {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--ops-brand);
  font-size: 13px;
}

.ops-gal-culture .ops-btn {
  margin-top: auto;
  align-self: flex-start;
}

.ops-gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

@media (max-width: 991px) {
  .ops-gal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .ops-gal-grid {
    grid-template-columns: 1fr;
  }
}

.ops-gal-tile {
  display: block;
  background: #fff;
  border: 1px solid #e9ebf0;
  border-radius: var(--r-md, 20px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 17, 23, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ops-gal-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 17, 23, .10);
  border-color: rgba(var(--ops-brand-rgb), .35);
}

.ops-gal-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ops-gal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.ops-gal-tile:hover .ops-gal-media img {
  transform: scale(1.06);
}

.ops-gal-cap {
  padding: 16px 18px;
}

.ops-gal-cap h3 {
  font-size: 1.02rem;
  margin: 0 0 4px;
  color: var(--ops-ink-1);
}

.ops-gal-cap p {
  font-size: 13px;
  color: var(--ops-ink-2);
  margin: 0;
  line-height: 1.5;
}

/* Lightbox overlay */
.ops-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(10, 12, 18, .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vw;
}

.ops-lightbox.is-open {
  display: flex;
}

.ops-lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.ops-lightbox-close {
  position: absolute;
  top: 18px;
  right: 26px;
  width: 44px;
  height: 44px;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

/* =============================================================================
   BLOG INDEX — main column + right sidebar
   ============================================================================= */
.ops-blog-main-col {
  height: fit-content;
}

.ops-blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 991px) {
  .ops-blog-layout {
    grid-template-columns: 1fr;
  }
}

.ops-blog-cat {
  display: inline-block;
  background: var(--ops-brand);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

/* Featured post */
.ops-blog-featured {
  display: block;
  background: #fff;
  border: 1px solid #e9ebf0;
  border-radius: var(--r-lg, 24px);
  overflow: hidden;
  margin-bottom: clamp(24px, 3vw, 34px);
  box-shadow: 0 10px 30px rgba(15, 17, 23, .05);
  transition: transform .3s ease, box-shadow .3s ease;
}

.ops-blog-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 17, 23, .10);
}

.ops-blog-featured-media {
  position: relative;
  /* aspect-ratio: 16 / 7; */
  overflow: hidden;
}

.ops-blog-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ops-blog-featured-media .ops-blog-cat {
  position: absolute;
  top: 16px;
  left: 16px;
}

.ops-blog-featured-body {
  padding: clamp(22px, 3vw, 34px);
}

.ops-blog-featured-label {
  color: var(--ops-brand-text, #b53a12);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.ops-blog-featured-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 10px 0 12px;
  line-height: 1.2;
}

.ops-blog-featured-body p {
  color: var(--ops-ink-2);
  margin: 0 0 14px;
}

/* Post grid */
.ops-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
}

@media (max-width: 575px) {
  .ops-blog-grid {
    grid-template-columns: 1fr;
  }
}

.ops-blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e9ebf0;
  border-radius: var(--r-md, 20px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 17, 23, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ops-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 17, 23, .10);
  border-color: rgba(var(--ops-brand-rgb), .3);
}

.ops-blog-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
}

.ops-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.ops-blog-card:hover .ops-blog-card-media img {
  transform: scale(1.05);
}

.ops-blog-card-media .ops-blog-cat {
  position: absolute;
  top: 12px;
  left: 12px;
}

.ops-blog-card-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ops-blog-card-body h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 8px 0 10px;
}

.ops-blog-card-body h3 a {
  color: var(--ops-ink-1);
}

.ops-blog-card-body h3 a:hover {
  color: var(--ops-brand-text, #b53a12);
}

.ops-blog-card-body p {
  color: var(--ops-ink-2);
  font-size: .95rem;
  margin: 0 0 16px;
}

.ops-blog-meta {
  font-size: 12.5px;
  color: #6b7280;
}

.ops-blog-readmore {
  margin-top: auto;
  color: var(--ops-brand-text, #b53a12);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ops-blog-readmore i {
  transition: transform .2s ease;
}

.ops-blog-readmore:hover i {
  transform: translateX(4px);
}

.ops-blog-empty {
  grid-column: 1 / -1;
  color: var(--ops-ink-2);
  padding: 20px 0;
}

.ops-blog-filterbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--ops-ink-2);
}

.ops-blog-filterbar a {
  color: var(--ops-brand-text, #b53a12);
  font-weight: 600;
}

/* Pagination */
.ops-blog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.ops-blog-page {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ebf0;
  border-radius: 12px;
  background: #fff;
  color: var(--ops-ink-1);
  font-weight: 600;
  font-size: 14px;
  transition: all .2s ease;
}

.ops-blog-page:hover {
  border-color: var(--ops-brand);
  color: var(--ops-brand-text, #b53a12);
}

.ops-blog-page.is-active {
  background: var(--ops-brand);
  border-color: var(--ops-brand);
  color: #fff;
}

/* Sidebar */
.ops-blog-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

@media (max-width: 991px) {
  .ops-blog-sidebar {
    position: static;
  }
}

.ops-blog-widget {
  background: #fff;
  border: 1px solid #e9ebf0;
  border-radius: var(--r-md, 20px);
  padding: 22px;
  box-shadow: 0 8px 24px rgba(15, 17, 23, .04);
}

.ops-blog-widget-title {
  font-size: 1.05rem;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ops-hairline);
  position: relative;
}

.ops-blog-widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 42px;
  height: 2px;
  background: var(--ops-brand);
}

.ops-blog-search {
  position: relative;
}

.ops-blog-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  font-size: 14px;
}

.ops-blog-search input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid #e9ebf0;
  border-radius: 12px;
  background: #f8f9fb;
  color: var(--ops-ink-1);
  font-size: 14px;
}

.ops-blog-search input:focus {
  outline: none;
  border-color: var(--ops-brand);
  background: #fff;
}

.ops-blog-cats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ops-blog-cats li+li {
  margin-top: 4px;
}

.ops-blog-cats a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ops-ink-2);
  transition: all .2s ease;
}

.ops-blog-cats a:hover,
.ops-blog-cats a.is-active {
  background: rgba(var(--ops-brand-rgb), .07);
  color: var(--ops-brand-text, #b53a12);
}

.ops-blog-count {
  background: #f1f2f5;
  color: var(--ops-ink-2);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}

.ops-blog-cats a.is-active .ops-blog-count {
  background: var(--ops-brand);
  color: #fff;
}

.ops-blog-recent {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

.ops-blog-recent+.ops-blog-recent {
  border-top: 1px solid var(--ops-hairline);
}

.ops-blog-recent-media {
  flex: 0 0 60px;
}

.ops-blog-recent-media img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.ops-blog-recent-text {
  min-width: 0;
}

.ops-blog-recent-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ops-ink-1);
  line-height: 1.35;
}

.ops-blog-recent:hover .ops-blog-recent-title {
  color: var(--ops-brand-text, #b53a12);
}

.ops-blog-recent time {
  font-size: 12px;
  color: #6b7280;
}

.ops-blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ops-blog-tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #e9ebf0;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ops-ink-2);
  transition: all .2s ease;
}

.ops-blog-tag:hover {
  border-color: var(--ops-brand);
  color: var(--ops-brand-text, #b53a12);
}

.ops-blog-newsletter {
  background: linear-gradient(135deg, #0f1117, #1a1d2a) !important;
  border: 0 !important;
}

.ops-blog-newsletter h3 {
  color: #fff !important;
  font-size: 1.15rem;
  margin: 0 0 8px;
}

.ops-blog-newsletter p {
  color: rgba(255, 255, 255, .7) !important;
  font-size: .92rem;
  margin: 0 0 16px;
}

/* =============================================================================
   BLOG DETAIL (posts) — de-white + editorial typography (hits all 17 posts)
   ============================================================================= */
.ops-blog-post-main .ops-service-hero {
  background: linear-gradient(180deg, rgba(var(--ops-brand-rgb), .07) 0%, #ffffff 74%) !important;
  padding-top: clamp(44px, 6vw, 84px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.ops-blog-post-main .ops-service-hero .ops-service-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* max-width: 840px; */
}

.ops-service-shell {
  padding: 40px !important;
}

.ops-blog-post-main .ops-service-hero .ops-service-title {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.15;
}

.ops-blog-post-main .ops-service-hero .ops-service-lead {
  color: #6b7280;
  font-size: 13.5px;
}

.ops-blog-post-main .ops-service-section {
  background: #f6f7f9 !important;
}

.ops-blog-post-main .ops-article-hero-image {
  width: 100%;
  border-radius: var(--r-md, 20px);
  margin-bottom: 28px;
  /* aspect-ratio: 16 / 8; */
  object-fit: cover;
}

.ops-blog-post-main .ops-article-copy p {
  color: var(--ops-ink-2);
  line-height: 1.75;
  margin: 0 0 18px;
  font-size: 1.02rem;
}

.ops-blog-post-main .ops-article-copy p:empty {
  display: none;
}

.ops-blog-post-main .ops-article-copy h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin: 34px 0 14px;
  line-height: 1.25;
}

.ops-blog-post-main .ops-article-copy h3 {
  font-size: 1.2rem;
  margin: 26px 0 12px;
}

.ops-blog-post-main .ops-article-copy a {
  color: var(--ops-brand-text, #b53a12);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ops-blog-post-main .ops-article-copy ul,
.ops-blog-post-main .ops-article-copy ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--ops-ink-2);
  line-height: 1.7;
}

.ops-blog-post-main .ops-article-copy li {
  margin-bottom: 8px;
}

.ops-blog-post-main .ops-article-copy hr {
  border: 0;
  border-top: 1px solid var(--ops-hairline);
  margin: 30px 0;
}

.ops-blog-post-main .ops-article-copy blockquote {
  border-left: 3px solid var(--ops-brand);
  padding: 4px 0 4px 20px;
  margin: 22px 0;
  color: var(--ops-ink-1);
  font-style: italic;
}

/* Frontend & backend table styling */
.ops-blog-post-main .ops-article-copy table,
.ql-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95rem;
}

.ops-blog-post-main .ops-article-copy table td,
.ops-blog-post-main .ops-article-copy table th,
.ql-editor table td,
.ql-editor table th {
  padding: 12px 16px;
  border: 1px solid var(--ops-hairline, #e2e8f0);
  text-align: left;
  vertical-align: top;
  color: var(--ops-ink-2);
}

.ops-blog-post-main .ops-article-copy table th,
.ops-blog-post-main .ops-article-copy table tr:first-child td,
.ql-editor table th,
.ql-editor table tr:first-child td {
  background: var(--ops-surface, #f8f9fc);
  font-weight: 600;
  color: var(--ops-ink-1);
}

/* sidebar recent-post mini cards */
.ops-blog-post-main .ops-article-mini h3 {
  font-size: 13.5px;
  line-height: 1.35;
}

.ops-blog-post-main .ops-article-mini span {
  font-size: 12px;
  color: #6b7280;
}

/* =============================================================================
   PORTFOLIO DETAIL (project-details) — de-white hero + step band
   ============================================================================= */
.ops-portfolio-detail-main .tp-pd-2-ptb {
  padding-top: clamp(96px, 12vw, 150px) !important;
  background: linear-gradient(180deg, rgba(var(--ops-brand-rgb), .06) 0%, #ffffff 68%) !important;
}

.ops-portfolio-detail-main .tp-pd-2-step-ptb {
  background: #f6f7f9 !important;
}

.ops-portfolio-detail-main .tp-pd-2-step-item {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ops-portfolio-detail-main .tp-pd-2-step-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 17, 23, .10) !important;
  border-color: rgba(var(--ops-brand-rgb), .3) !important;
}

/* A Bootstrap .row keeps its -15px gutter margins even inside a padding-less
   .container-fluid.p-0, so the row bleeds 15px past the viewport → page-wide
   horizontal scroll on mobile. Zero the gutters here (safe: no sticky/swiper in
   this area) rather than overflow-x:hidden, which would break the sticky image
   columns used on the custom case-study pages. */
.ops-portfolio-detail-main .container-fluid.p-0>.row {
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Inner-page hero: tighter padding than content sections ---------- */
main>.ops-section.ops-surface-herowash:first-child {
  padding-top: clamp(40px, 5vw, 72px) !important;
  padding-bottom: clamp(40px, 5vw, 72px) !important;
}

/* ---------- Blog detail breadcrumb ---------- */
.ops-blog-breadcrumb {
  padding: 14px 0;
  font-size: 13px;
  color: var(--ops-ink-2, #4a5160);
  border-bottom: 1px solid var(--ops-hairline, rgba(15, 17, 23, .10));
}

.ops-blog-breadcrumb a {
  color: var(--ops-ink-2, #4a5160);
  text-decoration: none;
  transition: color .2s;
}

.ops-blog-breadcrumb a:hover {
  color: var(--ops-brand, #ea5523);
}

.ops-bc-sep {
  margin: 0 8px;
  opacity: .4;
}

.ops-bc-current {
  color: var(--ops-ink-1, #0f1117);
  font-weight: 500;
}

/* ---------- Blog detail share bar ---------- */
.ops-blog-share {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  margin-top: 32px;
  border-top: 1px solid var(--ops-hairline, rgba(15, 17, 23, .10));
}

.ops-share-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ops-ink-2, #4a5160);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ops-share-links {
  display: flex;
  gap: 12px;
}

.ops-share-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ops-page-alt, #f6f7f9);
  color: var(--ops-ink-1, #0f1117);
  font-size: 15px;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.ops-share-links a:hover {
  background: var(--ops-brand, #ea5523);
  color: #fff;
}

/* ---------- Blog related posts section ---------- */
.ops-blog-related-section .ops-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 991px) {
  .ops-blog-related-section .ops-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .ops-blog-related-section .ops-blog-grid {
    grid-template-columns: 1fr;
  }

  .ops-blog-share {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ---------- About-us: prevent horizontal overflow ---------- */
.ops-about-main {
  overflow-x: hidden;
}

/* ---------- Testimonials redesign — premium cards with logo + video ---------- */
.ops-testimonials-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(20px, 2.4vw, 28px) !important;
}

@media (max-width: 767px) {
  .ops-testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}

.ops-testimonial-card {
  position: relative;
  background: #fff !important;
  border: 1px solid #e9ebf0 !important;
  border-radius: var(--r-md, 20px) !important;
  padding: clamp(24px, 3vw, 36px) !important;
  box-shadow: 0 8px 24px rgba(15, 17, 23, .05) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}

.ops-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 17, 23, .10) !important;
  border-color: rgba(var(--ops-brand-rgb), .3) !important;
}

.ops-testimonial-card .ops-testimonial-quotemark {
  /* color: rgba(var(--ops-brand-rgb), .15); */
  margin-bottom: 12px;
}

.ops-testimonial-card .ops-testimonial-quote p {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--ops-ink-2, #4a5060) !important;
  font-style: normal !important;
  margin: 0 !important;
}

.ops-testimonial-meta {
  margin-top: auto;
  padding-top: 0px;
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex-direction: row !important;
}

.ops-testimonial-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #e9ebf0;
}

.ops-testimonial-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ops-testimonial-info strong {
  font-size: .95rem;
  color: var(--ops-ink-1, #0f1117) !important;
}

.ops-testimonial-info .ops-testimonial-company {
  font-size: .82rem;
  color: var(--ops-ink-2, #4a5060) !important;
}

.ops-testimonial-video-btn {
  display: block;
  align-items: center;
  gap: 8px;
  /* margin-left: auto; */
  text-align: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgb(248 89 36 / 90%) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}

.ops-testimonial-video-btn:hover {
  background: var(--ops-brand);
  color: #fff;
}

.ops-testimonial-video-btn i {
  font-size: 14px;
}

.ops-testimonial-link {
  font-size: 13px !important;
  margin-top: 10px !important;
}

/* ---------- Blog hero fix — ensure heading clears fixed header ---------- */
.ops-blog-main .ops-section.ops-surface-herowash:first-child {
  padding-top: clamp(100px, 12vw, 140px) !important;
}

/* ---------- Blog detail spacing corrections ---------- */
.ops-blog-post-main .ops-service-hero {
  padding-top: clamp(100px, 12vw, 140px) !important;
}

.ops-blog-post-main .ops-article-copy {
  max-width: 780px;
}

.ops-blog-related-section {
  margin-top: 0 !important;
}

.ops-blog-related-section .ops-section-head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* ====================================================================
   SERVICES INDEX — premium category layout
   ==================================================================== */
.ops-services-index-main {
  --sp-section: clamp(48px, 5vw, 72px) !important;
}

.ops-services-index-main .ops-services-stats {
  padding: clamp(32px, 4vw, 48px) 0;
}

.ops-services-category {
  margin-bottom: 0;
}

.ops-services-category-header {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
  flex-wrap: wrap;
}

.ops-services-category-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(234, 85, 35, .08);
  color: var(--ops-brand);
  font-size: 22px;
  flex-shrink: 0;
}

.ops-services-category-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 700 !important;
  color: #0f1117 !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}

.ops-services-category-desc {
  color: #565d6d !important;
  font-size: 15px !important;
  margin: 0 !important;
  max-width: 560px;
}

.ops-services-category-count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ops-brand) !important;
  background: rgba(234, 85, 35, .06);
  padding: 6px 14px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

/* --- service cards grid --- */
.ops-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.ops-services-card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 32px);
  background: #ffffff;
  border: 1px solid rgba(15, 17, 23, .10);
  border-radius: var(--r-md, 20px);
  box-shadow: 0 4px 16px rgba(15, 17, 23, .04);
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}

.ops-services-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ops-brand);
  opacity: 0;
  transition: opacity .25s ease;
}

.ops-services-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 17, 23, .08);
  border-color: rgba(234, 85, 35, .25);
}

.ops-services-card:hover::before {
  opacity: 1;
}

.ops-services-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(234, 85, 35, .06);
  color: var(--ops-brand);
  font-size: 18px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.ops-services-card h3 {
  font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
  font-weight: 700 !important;
  color: #0f1117 !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}

.ops-services-card p {
  color: #565d6d !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  flex: 1;
}

.ops-services-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(234, 85, 35, .06);
  color: var(--ops-brand);
  font-size: 13px;
  margin-top: 16px;
  align-self: flex-end;
  transition: background .25s ease, transform .25s ease;
}

.ops-services-card:hover .ops-services-card-arrow {
  background: var(--ops-brand);
  color: #fff;
  transform: translateX(3px);
}

/* --- responsive --- */
@media (max-width: 767px) {
  .ops-services-category-header {
    flex-direction: column;
    gap: 12px;
  }

  .ops-services-category-count {
    margin-left: 0;
    align-self: flex-start;
  }

  .ops-services-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ops-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ====================================================================
   PORTFOLIO INDEX — coverflow slider fix
   ==================================================================== */
.ops-portfolio-showcase-main .coverflow-slider-wrap {
  height: auto !important;
  min-height: 0;
}

.ops-portfolio-showcase-main .coverflow-slider-active {
  padding: 0 !important;
}

/* Give the coverflow a tight, uniform slide height so the mixed-aspect
   images don't leave a tall empty band under the slider. */
.ops-portfolio-showcase-main .coverflow-slider-active .swiper-wrapper {
  height: 370px !important;
  align-items: center !important;
}

.ops-portfolio-showcase-main .coverflow-slider-active .swiper-slide {
  height: 370px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ops-portfolio-showcase-main .coverflow-slider-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ops-portfolio-showcase-main .coverflow-slider-item img {
  max-height: 360px !important;
  width: auto !important;
  object-fit: contain !important;
}

.ops-portfolio-showcase-main .coverflow-slider-main {
  position: relative !important;
  background: #0f1117 !important;
  padding: 28px 0 84px !important;
}

.ops-portfolio-showcase-main .coverflow-slider-title-sm,
.ops-portfolio-showcase-main .coverflow-slider-title-sm a {
  color: #fff !important;
}

.ops-portfolio-showcase-main .coverflow-slider-arrow button {
  color: #fff !important;
}

/* Project name centered directly under the slider. `transform: none` removes
   a broken translateX(-50%) centering hack that shifted the full-width name
   block off to the left. */
.ops-portfolio-showcase-main .coverflow-slider-text-wrap {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 26px !important;
  transform: none !important;
  text-align: center !important;
}

/* ====================================================================
   PORTFOLIO DETAIL — TuringEdge-inspired case-study layout
   ==================================================================== */


/* -- page wrapper -- */
.ops-case-study {
  font-family: var(--ops-font-body, 'Plus Jakarta Sans', sans-serif);
}

/* -- deep-dive section (TuringEdge-style 2-col) -- */
.ops-cs-deep {
  padding: 112px 0 !important;
  border-bottom: 1px solid rgba(15, 17, 23, .06);
}

.ops-cs-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}

/* -- RIGHT column (order-2): image area — sticky -- */
.ops-cs-visual {
  position: sticky;
  top: 176px;
}

.ops-cs-visual-num {
  position: absolute;
  top: -64px;
  left: 0;
  font-size: 230px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, rgba(var(--ops-brand-rgb), .18), rgba(var(--ops-brand-rgb), .03));
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.ops-cs-visual-main {
  position: relative;
  z-index: 1;
  /* aspect-ratio: 16 / 10; */
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: #f6f7f9;
  box-shadow: 0 40px 120px -40px rgba(var(--ops-brand-rgb), .10);
}

.ops-cs-visual-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ops-cs-visual-thumb {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  width: 100%;
  /* aspect-ratio: 16 / 10; */
  overflow: hidden;
  border-radius: 24px;
  background: #f6f7f9;
  box-shadow: 0 30px 80px -20px rgba(15, 17, 23, .12);
}

.ops-cs-visual-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* -- LEFT column (order-1): content stack -- */
.ops-cs-content {
  padding-top: 48px;
}

.ops-cs-content>*+* {
  margin-top: 48px;
}

/* -- eyebrow label -- */
.ops-cs-eyebrow {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ops-brand, #e05320);
}

/* -- heading block -- */
.ops-cs-heading h1 {
  font-size: 48px !important;
  font-weight: 600 !important;
  color: #0f1117 !important;
  line-height: 1.05;
  letter-spacing: -1.2px !important;
  margin-top: 20px;
  margin-bottom: 0;
}

.ops-cs-tagline {
  margin-top: 24px;
  border-left: 2px solid rgba(var(--ops-brand-rgb), .7);
  padding-left: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: .3px;
  color: #2a2d35;
}

/* -- problem / solution text blocks -- */
.ops-cs-block-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: rgba(15, 17, 23, .45);
  margin-bottom: 12px;
}

.ops-cs-block-label.--brand {
  color: rgba(var(--ops-brand-rgb), .8);
}

.ops-cs-block p:not(.ops-cs-block-label) {
  font-size: 18px;
  line-height: 1.625;
  letter-spacing: .27px;
  color: #565d6d !important;
  margin: 0;
}

/* -- capabilities vertical list -- */
.ops-cs-caps-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: rgba(15, 17, 23, .45);
  margin-bottom: 16px;
}

.ops-cs-caps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(15, 17, 23, .08);
  border-bottom: 1px solid rgba(15, 17, 23, .08);
}

.ops-cs-caps-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(15, 17, 23, .06);
  transition: background .2s;
}

.ops-cs-caps-list li:last-child {
  border-bottom: none;
}

.ops-cs-caps-list li:hover {
  background: rgba(var(--ops-brand-rgb), .02);
}

.ops-cs-cap-badge {
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(var(--ops-brand-rgb), .12);
  font-size: 12px;
  font-weight: 600;
  color: var(--ops-brand, #e05320);
}

.ops-cs-caps-list h4 {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -.45px !important;
  color: #0f1117 !important;
  margin-bottom: 6px;
  transition: color .2s;
}

.ops-cs-caps-list li:hover h4 {
  color: var(--ops-brand, #e05320) !important;
}

.ops-cs-caps-list p {
  font-size: 18px;
  line-height: 1.625;
  color: rgba(15, 17, 23, .7) !important;
  margin: 0;
}

/* -- outcome cards (2-col at bottom) -- */
.ops-cs-outcome-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ops-cs-outcome-card {
  border-radius: 16px;
  padding: 24px;
}

.ops-cs-outcome-card.--text {
  border: 1px solid rgba(var(--ops-brand-rgb), .4);
  background: rgba(var(--ops-brand-rgb), .07);
}

.ops-cs-outcome-card.--stat {
  border: 1px solid rgba(15, 17, 23, .1);
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ops-cs-outcome-card .oc-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ops-brand, #e05320);
  margin-bottom: 12px;
}

.ops-cs-outcome-card .oc-text {
  font-size: 18px;
  line-height: 1.625;
  color: #2a2d35;
  margin: 0;
}

.ops-cs-outcome-card .oc-num {
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: #0f1117;
}

.ops-cs-outcome-card .oc-sub {
  font-size: 16px;
  line-height: 1.4;
  color: #565d6d;
  margin-top: 12px;
}

/* -- tech stack (below main grid) -- */
.ops-cs-tech {
  padding: 30px 0 !important;
  background: #f6f7f9 !important;
}

.ops-cs-tech .ops-cs-eyebrow {
  margin-bottom: 8px;
}

.ops-cs-tech h2 {
  font-size: 32px !important;
  font-weight: 600 !important;
  color: #0f1117 !important;
  margin-bottom: 40px;
}

.ops-cs-tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ops-cs-tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(15, 17, 23, .08);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #0f1117;
  transition: border-color .3s, box-shadow .3s;
}

.ops-cs-tech-pill:hover {
  border-color: rgba(var(--ops-brand-rgb), .3);
  box-shadow: 0 4px 12px rgba(15, 17, 23, .06);
}

/* -- bottom nav -- */
.ops-cs-nav {
  padding: 64px 0 !important;
  border-top: 1px solid rgba(15, 17, 23, .08);
}

.ops-cs-nav-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.ops-cs-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #0f1117;
  text-decoration: none;
  transition: color .3s;
}

.ops-cs-nav a:hover {
  color: var(--ops-brand, #e05320);
}

.ops-cs-nav a svg {
  width: 14px;
  height: 14px;
}

/* -- responsive -- */
@media (max-width: 991px) {
  .ops-cs-deep {
    padding: 80px 0 !important;
  }

  .ops-cs-grid {
    grid-template-columns: 1fr;
  }

  .ops-cs-visual {
    position: static;
    order: -1;
  }

  .ops-cs-visual-num {
    font-size: 100px;
    top: -32px;
  }

  .ops-cs-heading h1 {
    font-size: 36px !important;
  }

  .ops-cs-content {
    padding-top: 0;
  }

  .ops-cs-content>*+* {
    margin-top: 36px;
  }
}

@media (max-width: 575px) {
  .ops-cs-deep {
    padding: 60px 0 !important;
  }

  .ops-cs-outcome-row {
    grid-template-columns: 1fr;
  }

  .ops-cs-heading h1 {
    font-size: 28px !important;
  }

  .ops-cs-visual-thumb {
    display: none;
  }
}


/* ====================================================================
   SERVICE DETAIL — SEO subtitle
   ==================================================================== */
.ops-service-subtitle {
  font-size: clamp(14px, 1.4vw, 16px) !important;
  color: #565d6d !important;
  line-height: 1.6 !important;
  max-width: 720px;
  margin: 16px 0 0 !important;
  font-weight: 400 !important;
}

/* ====================================================================
   SCROLL ANIMATIONS — TuringEdge-style fade-in + slide-up
   Applied via IntersectionObserver on .ops-service-main elements
   ==================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .ops-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: blur(4px);
    will-change: opacity, transform, filter;
  }

  .ops-reveal.ops-in-view {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  .ops-reveal-delay-1 {
    transition-delay: .1s;
  }

  .ops-reveal-delay-2 {
    transition-delay: .2s;
  }

  .ops-reveal-delay-3 {
    transition-delay: .3s;
  }

  .ops-reveal-delay-4 {
    transition-delay: .4s;
  }

  .ops-reveal-delay-5 {
    transition-delay: .5s;
  }

  .ops-reveal-scale {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .ops-reveal-scale.ops-in-view {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  .ops-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .ops-reveal-left.ops-in-view {
    opacity: 1;
    transform: translateX(0);
  }

  .ops-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
      transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .ops-reveal-right.ops-in-view {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops-reveal,
  .ops-reveal-scale,
  .ops-reveal-left,
  .ops-reveal-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ====================================================================
   SERVICE DETAIL — Enhanced styling (TuringEdge-inspired)
   ==================================================================== */

/* -- Section numbering eyebrow -- */
.ops-sd-section-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ops-brand-text, #b53a12);
  margin-bottom: 16px;
}

/* -- Hero enhancements -- */
.ops-service-main .pp-service-details-heading {
  border-bottom: 1px solid rgba(15, 17, 23, .06) !important;
  /* padding-bottom: 48px !important;
  margin-bottom: 64px !important; */
}

.ops-service-main .pp-service-details-title {
  letter-spacing: -1.2px !important;
  line-height: 1.08 !important;
}

.ops-service-main .pp-service-details-title i {
  color: var(--ops-brand, #e05320) !important;
  font-style: italic;
}

/* -- Stat badges — glass effect -- */
.ops-service-main .pp-service-details-about-item {
  display: block !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.4s !important;
}

.ops-service-main .pp-service-details-about-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(var(--ops-brand-rgb), .10) !important;
  border-color: rgba(var(--ops-brand-rgb), .25) !important;
}

.ops-service-main .pp-service-details-about-item span {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  color: var(--ops-brand, #e05320) !important;
}

/* -- Capability cards — TuringEdge hover + glass -- */
.ops-service-main .ops-capability-card {
  border-radius: 24px !important;
  padding: 32px !important;
  border: 1px solid rgba(15, 17, 23, .08) !important;
  background: #ffffff !important;
  backdrop-filter: blur(8px);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.5s !important;
  position: relative;
  overflow: hidden;
}

.ops-service-main .ops-capability-card::after {
  content: '';
  position: absolute;
  inset-x: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--ops-brand-rgb), .4), transparent);
  opacity: 0;
  transition: opacity 0.5s;
}

.ops-service-main .ops-capability-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 64px rgba(15, 17, 23, .08) !important;
  border-color: rgba(var(--ops-brand-rgb), .2) !important;
}

.ops-service-main .ops-capability-card:hover::after {
  opacity: 1;
}

.ops-service-main .ops-capability-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ops-service-main .ops-capability-index {
  font-size: 13px !important;
  font-weight: 600 !important;
  background: rgba(var(--ops-brand-rgb), .08);
  width: 36px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ops-service-main .ops-capability-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(15, 17, 23, .08), transparent);
  margin: 20px 0 !important;
}

.ops-service-main .tp-service-4-solution-item-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

.ops-service-main .tp-service-4-solution-item-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ops-service-main .tp-service-4-solution-item-content ul li {
  padding: 10px 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid rgba(15, 17, 23, .05);
}

.ops-service-main .tp-service-4-solution-item-content ul li:last-child {
  border-bottom: none;
}

.ops-service-main .tp-service-4-solution-item-content ul li::before {
  content: '';
  position: static;
  /* override the legacy absolute rule so the check sits in-flow (flex gutter), not on top of the text */
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: rgba(var(--ops-brand-rgb), .10);
  flex-shrink: 0;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 11 10' fill='none'%3E%3Cpath d='M9.506.887L4.268 6.126 1.494 3.352 0 4.845l4.268 4.268L11 2.381 9.506.887z' fill='%23e05320'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

/* -- Process section — enhanced dark band -- */
.ops-service-main .pp-service-details-process-ptb {
  background: #0f1117 !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
}

.ops-service-main .pp-service-details-process-ptb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--ops-brand-rgb), .08), transparent);
  pointer-events: none;
}

.ops-service-main .pp-service-details-process-subtitle {
  color: var(--ops-brand, #e05320) !important;
}

.ops-service-main .pp-service-details-process-title {
  color: #ffffff !important;
}

.ops-service-main .pp-service-details-process-item {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 24px !important;
  padding: 32px 24px !important;
  backdrop-filter: blur(8px);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.5s,
    background 0.5s !important;
}

.ops-service-main .pp-service-details-process-item:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(var(--ops-brand-rgb), .3) !important;
  background: rgba(255, 255, 255, .06) !important;
}

.ops-service-main .pp-service-details-process-item span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #e05320, #f2854a) !important;
  box-shadow: 0 8px 20px rgba(224, 83, 32, .35);
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.ops-service-main .pp-service-details-process-item h4 {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.ops-service-main .pp-service-details-process-item p {
  color: rgba(255, 255, 255, .65) !important;
  font-size: 15px !important;
}

.ops-service-main .pp-service-details-process-bottom span {
  color: rgba(255, 255, 255, .7) !important;
}

.ops-service-main .ops-service-inline-cta {
  color: var(--ops-brand, #e05320) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  font-weight: 600;
}

/* -- Industry panels — hover lift -- */
.ops-service-main .ops-industry-panel {
  border-radius: 20px !important;
  padding: 28px 24px !important;
  border: 1px solid rgba(15, 17, 23, .08) !important;
  background: #ffffff !important;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.5s !important;
}

.ops-service-main .ops-industry-panel:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 56px rgba(15, 17, 23, .07) !important;
  border-color: rgba(var(--ops-brand-rgb), .2) !important;
}

.ops-service-main .ops-industry-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ops-brand-text, #b53a12) !important;
  margin-bottom: 12px !important;
  display: block;
}

.ops-service-main .ops-industry-name {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #0f1117 !important;
  margin-bottom: 10px !important;
  letter-spacing: -.02em !important;
}

/* -- Overview section — image reveal -- */
.ops-service-main .pp-service-details-overview-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .015em !important;
  text-transform: uppercase !important;
  color: var(--ops-brand-text, #b53a12) !important;
  margin-bottom: 32px !important;
}

.ops-service-main .pp-service-details-overview-wrapper p {
  font-size: 18px !important;
  line-height: 1.625 !important;
}

.ops-service-main .pp-service-details-overview-wrapper h4 {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-top: 28px !important;
  margin-bottom: 16px !important;
}

.ops-service-main .pp-service-details-overview-thumb img {
  border-radius: 24px !important;
  box-shadow: 0 32px 80px rgba(15, 17, 23, .10) !important;
}

/* -- On-page section nav (hero) -- */
/* Offset anchor jumps so a section title never lands hidden under the 64px fixed header */
#overview,
#capabilities,
#process,
#industries,
#faq,
#modules,
#interface,
#why {
  scroll-margin-top: 96px;
}

.ops-sd-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.ops-sd-page-nav a {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #4b5563 !important;
  background: rgba(15, 17, 23, .04);
  border: 1px solid rgba(15, 17, 23, .08);
  text-decoration: none !important;
  transition: background .3s, color .3s, border-color .3s;
}

.ops-sd-page-nav a:hover {
  background: rgba(var(--ops-brand-rgb), .08);
  color: var(--ops-brand, #e05320) !important;
  border-color: rgba(var(--ops-brand-rgb), .2);
}

/* -- Section header block (used by capabilities, FAQ, CTA) -- */
.ops-sd-section-header {
  max-width: 680px;
}

.ops-sd-section-title {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  color: #0f1117 !important;
  margin: 0 0 16px !important;
}

.ops-sd-section-desc {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #6b7280 !important;
  max-width: 600px;
}

/* -- Checklist icon fix (was fill="white", now currentColor) -- */
.ops-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ops-brand, #e05320);
  color: #ffffff;
  flex-shrink: 0;
  margin-right: 10px;
}

.ops-check-icon svg {
  width: 10px;
  height: 10px;
}

/* -- FAQ section -- */
.ops-sd-faq-section {
  padding: clamp(64px, 8vw, 40px) 0 !important;
}

.ops-sd-faq-section .ops-sd-section-header {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.ops-sd-faq-section .ops-sd-section-desc {
  margin-inline: auto;
}

.ops-sd-faq-grid {
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ops-sd-faq-item {
  border-bottom: 1px solid rgba(15, 17, 23, .08);
}

.ops-sd-faq-item:first-child {
  border-top: 1px solid rgba(15, 17, 23, .08);
}

.ops-sd-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: #0f1117;
  line-height: 1.45;
  transition: color .3s;
}

.ops-sd-faq-trigger:hover {
  color: var(--ops-brand, #e05320);
}

.ops-sd-faq-trigger svg {
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #9ca3af;
}

.ops-sd-faq-item.is-open .ops-sd-faq-trigger svg {
  transform: rotate(180deg);
  color: var(--ops-brand, #e05320);
}

.ops-sd-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity .3s;
  opacity: 0;
}

.ops-sd-faq-item.is-open .ops-sd-faq-answer {
  max-height: 600px;
  opacity: 1;
}

.ops-sd-faq-answer p {
  padding: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
  color: #4b5563;
  max-width: 720px;
}

/* -- CTA band -- */
.ops-sd-cta-band {
  padding: clamp(64px, 8vw, 100px) 0 !important;
  background: #0f1117 !important;
  position: relative;
  overflow: hidden;
}

.ops-sd-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 30% 100%, rgba(var(--ops-brand-rgb), .12), transparent);
  pointer-events: none;
}

.ops-sd-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  position: relative;
  z-index: 1;
}

.ops-sd-cta-band .ops-sd-section-num {
  color: var(--ops-brand, #e05320) !important;
}

.ops-sd-cta-title {
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  margin: 0 0 16px !important;
}

.ops-sd-cta-desc {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .6) !important;
  max-width: 480px;
}

.ops-sd-cta-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ops-sd-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .3s, box-shadow .3s, background .3s, border-color .3s;
}

.ops-sd-cta-btn.--primary {
  background: var(--ops-brand, #e05320) !important;
  color: #ffffff !important;
}

.ops-sd-cta-btn.--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--ops-brand-rgb), .3);
}

.ops-sd-cta-btn.--outline {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .2);
}

.ops-sd-cta-btn.--outline:hover {
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-2px);
}

/* -- CTA band responsive -- */
@media (max-width: 768px) {
  .ops-sd-cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }

  .ops-sd-cta-desc {
    max-width: 100%;
  }

  .ops-sd-cta-actions {
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ops-sd-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .ops-sd-page-nav {
    gap: 6px;
  }

  .ops-sd-page-nav a {
    padding: 6px 14px;
    font-size: 12px;
  }
}

/* ============================================================================
   HOMEPAGE REFINEMENTS (Aug 29) — alignment, spacing, button contrast
   ============================================================================ */

/* 1. Primary buttons: the inner <span> was inheriting dark ink, so the label read
   dark on the orange fill (e.g. "Explore all articles"). Force it to white. */
.ops-btn-primary span,
.ops-home-main .ops-btn-primary span,
main .ops-btn-primary span,
.ops-btn-primary i,
.ops-home-main .ops-btn-primary i,
main .ops-btn-primary i {
  color: #ffffff !important;
}

/* 2. Align the "Recognised by" trust strip + the footer to the same content width
   and left edge as the page's .ops-container (1300px), instead of the wider
   container-1430 that made them bleed ~65px past the content column. */
.ops-trust-strip>.container,
footer .tp-footer-area>.container,
footer .tp-copyright-area>.container {
  max-width: 1300px;
}

/* 3. "Trusted by Leading Brands" logo wall: lay the logos out as a centred
   flex wall that spans ~3 rows on desktop (was a flat 2-row grid). */
/* .ops-logostrip-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px !important;
  grid-template-columns: none !important;
} */

.ops-logostrip-cell {
  flex: 0 1 calc(33.333% - 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  background: #ffffff !important;
  border: 1px solid rgba(15, 17, 23, .08) !important;
  border-radius: 16px;
  /* transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.ops-logostrip-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 17, 23, .10);
  border-color: rgba(var(--ops-brand-rgb), .3) !important;
}

.ops-logostrip-cell img {
  max-height: 60px;
  max-width: 200px;
  width: auto;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 767px) {
  .ops-logostrip-cell {
    flex-basis: calc(50% - 16px);
    min-height: 76px;
  }

  .ops-logostrip-cell img {
    max-width: 42vw;
  }
}

/* ============================================================================
   CAPABILITY TAB VISUALS — animated "process" panels (pure CSS, no video)
   Left column gets a paragraph; right column an on-brand looping animation.
   ============================================================================ */
.ops-showcase-text {
  color: #4a5060 !important;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 460px;
}

.ops-cap-visual {
  position: relative;
  min-height: 360px;
  border-radius: 22px;
  background: radial-gradient(130% 120% at 82% 0%, #1b1f2b 0%, #0f1117 62%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 34px 80px rgba(15, 17, 23, .20);
  overflow: hidden;
  padding: 26px;
  display: flex;
  flex-direction: column;
}

.ops-cap-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* --- AI & Automation: pulsing core + sequential flow steps --- */
.ops-cap-ai {
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.ops-cap-ai-core {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #fff;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  animation: opsCapPulse 2.4s ease-in-out infinite;
}

@keyframes opsCapPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--ops-brand-rgb), .5);
  }

  50% {
    box-shadow: 0 0 0 20px rgba(var(--ops-brand-rgb), 0);
  }
}

.ops-cap-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.ops-cap-flow li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .62);
  font-size: 13.5px;
  font-weight: 500;
  animation: opsCapStep 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .5s);
}

.ops-cap-flow li i {
  color: var(--ops-brand, #e05320);
  width: 16px;
  text-align: center;
}

@keyframes opsCapStep {

  0%,
  20%,
  100% {
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .6);
    border-color: rgba(255, 255, 255, .08);
    transform: translateX(0);
  }

  8% {
    background: rgba(var(--ops-brand-rgb), .2);
    color: #fff;
    border-color: rgba(var(--ops-brand-rgb), .55);
    transform: translateX(5px);
  }
}

/* --- Web & Software: code editor that types itself --- */
.ops-cap-code {
  padding: 0;
  background: #0c0e15;
}

.ops-cap-code-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: relative;
  z-index: 1;
}

.ops-cap-code-bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.ops-cap-code-bar .d1 {
  background: #ff5f56;
}

.ops-cap-code-bar .d2 {
  background: #ffbd2e;
}

.ops-cap-code-bar .d3 {
  background: #27c93f;
}

.ops-cap-code-bar em {
  margin-left: 10px;
  color: rgba(255, 255, 255, .4);
  font-style: normal;
  font-size: 12px;
  font-family: ui-monospace, Menlo, monospace;
}

.ops-cap-code-body {
  margin: 0;
  padding: 24px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13.5px;
  line-height: 2.05;
  color: rgba(255, 255, 255, .9);
  position: relative;
  z-index: 1;
}

.ops-cap-code-body .ln {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  opacity: 0;
  animation: opsCapType 7s steps(28) infinite;
  animation-delay: calc(var(--i) * .55s);
}

.ops-cap-code-body .k {
  color: #ff8a5c;
}

.ops-cap-code-body .fn {
  color: #6ea8ff;
}

.ops-cap-code-body .s {
  color: #7ee0a0;
}

.ops-cap-code-body .c {
  color: rgba(255, 255, 255, .4);
  font-style: italic;
}

@keyframes opsCapType {
  0% {
    width: 0;
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  12% {
    width: 100%;
    opacity: 1;
  }

  88% {
    width: 100%;
    opacity: 1;
  }

  96%,
  100% {
    width: 0;
    opacity: 0;
  }
}

/* --- Mobile Apps: phone builds its UI on loop --- */
.ops-cap-mobile {
  align-items: center;
  justify-content: center;
}

.ops-cap-phone {
  width: 168px;
  height: 306px;
  border-radius: 30px;
  background: #0c0e15;
  border: 2px solid rgba(255, 255, 255, .14);
  padding: 12px;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .03);
}

.ops-cap-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 15px;
  border-radius: 0 0 12px 12px;
  background: rgba(255, 255, 255, .16);
  z-index: 2;
}

.ops-cap-phone-screen {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(180deg, #161a24, #0f1117);
  padding: 26px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.ops-cap-ui {
  border-radius: 8px;
  opacity: 0;
  transform: translateY(14px);
  animation: opsCapUiIn 5s ease infinite;
  animation-delay: calc(var(--i) * .35s);
}

.ops-cap-ui.bar {
  height: 13px;
  width: 55%;
  background: rgba(255, 255, 255, .22);
}

.ops-cap-ui.hero {
  height: 72px;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
}

.ops-cap-ui.card {
  height: 30px;
  background: rgba(255, 255, 255, .09);
}

.ops-cap-ui.btn {
  height: 34px;
  margin-top: auto;
  background: var(--ops-brand, #e05320);
  border-radius: 10px;
}

@keyframes opsCapUiIn {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }

  14%,
  84% {
    opacity: 1;
    transform: translateY(0);
  }

  96%,
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

.ops-cap-mobile-chip {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #0f1117;
  font-size: 19px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
  animation: opsCapFloat 3s ease-in-out infinite;
}

.ops-cap-mobile-chip.os1 {
  top: 46px;
  right: 34px;
}

.ops-cap-mobile-chip.os2 {
  bottom: 56px;
  left: 32px;
  animation-delay: .7s;
}

@keyframes opsCapFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

/* --- Digital Marketing: growth chart --- */
.ops-cap-chart {
  justify-content: space-between;
}

.ops-cap-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ops-cap-chart-metric {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.ops-cap-chart-metric b {
  color: var(--ops-brand, #e05320);
  font-size: 30px;
  font-weight: 700;
}

.ops-cap-chart-trend {
  color: #27c93f;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(39, 201, 63, .13);
  padding: 6px 12px;
  border-radius: 100px;
}

.ops-cap-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 190px;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}

.ops-cap-chart-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--ops-brand, #e05320), rgba(var(--ops-brand-rgb), .25));
  transform: scaleY(.08);
  transform-origin: bottom;
  animation: opsCapBar 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .12s);
}

@keyframes opsCapBar {
  0% {
    transform: scaleY(.08);
  }

  42%,
  72% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(.08);
  }
}

/* --- Design & Video: morphing canvas + swatches + timeline --- */
.ops-cap-design {
  gap: 16px;
}

.ops-cap-design-canvas {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 150px;
  border-radius: 16px;
  background: linear-gradient(135deg, #161a24, #0f1117);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ops-cap-design-shape {
  position: absolute;
}

.ops-cap-design-shape.s1 {
  width: 88px;
  height: 88px;
  top: 28px;
  left: 34px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  animation: opsCapMorph 5s ease-in-out infinite;
}

.ops-cap-design-shape.s2 {
  width: 58px;
  height: 58px;
  bottom: 24px;
  right: 48px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  animation: opsCapMorph2 5s ease-in-out infinite;
}

@keyframes opsCapMorph {

  0%,
  100% {
    border-radius: 16px;
    transform: rotate(0);
  }

  50% {
    border-radius: 50%;
    transform: rotate(45deg);
  }
}

@keyframes opsCapMorph2 {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-14px) scale(1.18);
  }
}

.ops-cap-design-pen {
  position: absolute;
  z-index: 2;
  color: #fff;
  font-size: 18px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4));
  animation: opsCapPen 5.5s ease-in-out infinite;
}

@keyframes opsCapPen {
  0% {
    top: 28%;
    left: 30%;
  }

  25% {
    top: 60%;
    left: 56%;
  }

  50% {
    top: 40%;
    left: 72%;
  }

  75% {
    top: 66%;
    left: 38%;
  }

  100% {
    top: 28%;
    left: 30%;
  }
}

.ops-cap-swatches {
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.ops-cap-swatches span {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  transform-origin: bottom;
  animation: opsCapSwatch 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .2s);
}

.ops-cap-swatches span:nth-child(1) {
  background: var(--ops-brand, #e05320);
}

.ops-cap-swatches span:nth-child(2) {
  background: #ff8a5c;
}

.ops-cap-swatches span:nth-child(3) {
  background: #6ea8ff;
}

.ops-cap-swatches span:nth-child(4) {
  background: #7ee0a0;
}

.ops-cap-swatches span:nth-child(5) {
  background: #c084fc;
}

@keyframes opsCapSwatch {

  0%,
  100% {
    transform: scaleY(1);
    opacity: .85;
  }

  50% {
    transform: scaleY(1.28);
    opacity: 1;
  }
}

.ops-cap-timeline {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ops-cap-timeline-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ops-brand, #e05320);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  flex-shrink: 0;
}

.ops-cap-timeline-bar {
  flex: 1;
  height: 6px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .12);
  position: relative;
  overflow: hidden;
}

.ops-cap-timeline-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 32%;
  background: var(--ops-brand, #e05320);
  border-radius: 100px;
  animation: opsCapScrub 4s linear infinite;
}

@keyframes opsCapScrub {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(420%);
  }
}

@media (max-width: 991px) {
  .ops-cap-visual {
    min-height: 320px;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops-cap-ai-core,
  .ops-cap-flow li,
  .ops-cap-code-body .ln,
  .ops-cap-ui,
  .ops-cap-mobile-chip,
  .ops-cap-chart-bars span,
  .ops-cap-design-shape,
  .ops-cap-design-pen,
  .ops-cap-swatches span,
  .ops-cap-timeline-bar::after {
    animation: none !important;
  }

  .ops-cap-code-body .ln {
    width: 100%;
    opacity: 1;
  }

  .ops-cap-ui {
    opacity: 1;
    transform: none;
  }

  .ops-cap-chart-bars span {
    transform: scaleY(1);
  }
}

/* Exempt the capability visuals from the home-page "blanket animation kill"
   (.ops-home-main * sets animation-duration:0s). Re-state each duration/delay
   with higher specificity + !important so the looping visuals actually run. */
.ops-home-main .ops-cap-ai-core {
  animation-duration: 2.4s !important;
}

.ops-home-main .ops-cap-flow li {
  animation-duration: 4s !important;
  animation-delay: calc(var(--i) * .5s) !important;
}

.ops-home-main .ops-cap-code-body .ln {
  animation-duration: 7s !important;
  animation-delay: calc(var(--i) * .55s) !important;
}

.ops-home-main .ops-cap-mobile .ops-cap-ui {
  animation-duration: 5s !important;
  animation-delay: calc(var(--i) * .35s) !important;
}

.ops-home-main .ops-cap-mobile-chip {
  animation-duration: 3s !important;
}

.ops-home-main .ops-cap-mobile-chip.os2 {
  animation-delay: .7s !important;
}

.ops-home-main .ops-cap-chart-bars span {
  animation-duration: 4.2s !important;
  animation-delay: calc(var(--i) * .12s) !important;
}

.ops-home-main .ops-cap-design-shape.s1 {
  animation-duration: 5s !important;
}

.ops-home-main .ops-cap-design-shape.s2 {
  animation-duration: 5s !important;
}

.ops-home-main .ops-cap-design-pen {
  animation-duration: 5.5s !important;
}

.ops-home-main .ops-cap-swatches span {
  animation-duration: 4s !important;
  animation-delay: calc(var(--i) * .2s) !important;
}

.ops-home-main .ops-cap-timeline-bar::after {
  animation-duration: 4s !important;
}

@media (prefers-reduced-motion: reduce) {

  .ops-home-main .ops-cap-ai-core,
  .ops-home-main .ops-cap-flow li,
  .ops-home-main .ops-cap-code-body .ln,
  .ops-home-main .ops-cap-mobile .ops-cap-ui,
  .ops-home-main .ops-cap-mobile-chip,
  .ops-home-main .ops-cap-chart-bars span,
  .ops-home-main .ops-cap-design-shape.s1,
  .ops-home-main .ops-cap-design-shape.s2,
  .ops-home-main .ops-cap-design-pen,
  .ops-home-main .ops-cap-swatches span,
  .ops-home-main .ops-cap-timeline-bar::after {
    animation-duration: 0s !important;
  }
}

/* ============================================================================
   TESTIMONIAL SLIDER (home "What our clients say") — auto-rotating
   ============================================================================ */
.ops-testi {
  max-width: 1200px;
  margin: 8px auto 0;
}

.ops-testi-viewport {
  overflow: hidden;
  padding: 10px 6px;
  margin: -10px -6px;
}

.ops-testi-track {
  display: flex;
  gap: 24px;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.ops-testi-slide {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: calc((100% - 48px) / 3);
  margin: 0;
  box-sizing: border-box;
  padding: 30px 28px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(15, 17, 23, .08);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(15, 17, 23, .06);
}

.ops-testi-mark {
  position: absolute;
  top: 14px;
  right: 24px;
  font-size: 60px;
  line-height: 1;
  font-family: Georgia, serif;
  color: rgba(var(--ops-brand-rgb), .14);
  pointer-events: none;
}

.ops-testi-quote {
  position: relative;
  z-index: 1;
  margin: 6px 0 22px;
  border: 0;
  padding: 0;
  flex: 1;
  font-size: 15px;
  line-height: 1.62;
  font-weight: 500;
  color: #2a2f3a;
}

.ops-testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ops-testi-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  background: var(--c, #e05320);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c, #e05320) 38%, transparent);
}

.ops-testi-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.ops-testi-meta b {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f1117;
}

.ops-testi-meta em {
  font-size: 12px;
  font-style: normal;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-testi-stars {
  margin-left: auto;
  display: inline-flex;
  gap: 2px;
  color: #f5a623;
  font-size: 12px;
  flex-shrink: 0;
}

.ops-testi-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 30px;
}

.ops-testi-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 17, 23, .12);
  background: #fff;
  color: #0f1117;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.ops-testi-arrow:hover {
  background: var(--ops-brand, #e05320);
  color: #fff;
  border-color: var(--ops-brand, #e05320);
  transform: translateY(-2px);
}

.ops-testi-dots {
  display: inline-flex;
  gap: 8px;
}

.ops-testi-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(15, 17, 23, .16);
  cursor: pointer;
  transition: width .3s, background .3s;
}

.ops-testi-dot.is-active {
  width: 26px;
  border-radius: 100px;
  background: var(--ops-brand, #e05320);
}

@media (max-width: 991px) {
  .ops-testi-slide {
    flex-basis: calc((100% - 24px) / 2);
    min-width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 640px) {
  .ops-testi-track {
    gap: 16px;
  }

  .ops-testi-slide {
    flex-basis: 100%;
    min-width: 100%;
  }
}

/* ============================================================================
   AI & AUTOMATION — deep-dive automation pipeline (replaces the flow list)
   Sources -> AI core -> Actions, with data packets flowing through, looping.
   ============================================================================ */
.ops-cap-visual.ops-cap-ai {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

.ops-cap-auto {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.ops-cap-auto-flow {
  position: relative;
  flex: 1;
  min-height: 250px;
}

.ops-cap-auto-col {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
}

.ops-cap-auto-src {
  left: 0;
}

.ops-cap-auto-act {
  right: 0;
}

.ops-cap-auto-chip {
  position: absolute;
  top: calc(18% + var(--i) * 32%);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .85);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  animation: opsCapChip 5.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .5s);
}

.ops-cap-auto-src .ops-cap-auto-chip {
  left: 0;
}

.ops-cap-auto-act .ops-cap-auto-chip {
  right: 0;
}

.ops-cap-auto-chip i {
  font-size: 12px;
  color: var(--ops-brand, #e05320);
}

.ops-cap-auto-act .ops-cap-auto-chip {
  animation-name: opsCapChipAct;
}

.ops-cap-auto-act .ops-cap-auto-chip i {
  color: #7ee0a0;
}

@keyframes opsCapChip {

  0%,
  100% {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
  }

  45% {
    background: rgba(var(--ops-brand-rgb), .16);
    border-color: rgba(var(--ops-brand-rgb), .45);
  }
}

@keyframes opsCapChipAct {

  0%,
  100% {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .1);
  }

  55% {
    background: rgba(126, 224, 160, .14);
    border-color: rgba(126, 224, 160, .45);
  }
}

.ops-cap-auto-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  z-index: 4;
}

.ops-cap-auto-core-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 25px;
  color: #fff;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  box-shadow: 0 10px 30px rgba(var(--ops-brand-rgb), .55);
  z-index: 2;
  animation: opsCapCore 2.2s ease-in-out infinite;
}

@keyframes opsCapCore {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07);
  }
}

.ops-cap-auto-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--ops-brand-rgb), .5);
  animation: opsCapCoreRing 2.4s ease-out infinite;
}

.ops-cap-auto-core-ring.r2 {
  animation-delay: 1.2s;
}

@keyframes opsCapCoreRing {
  0% {
    transform: scale(.7);
    opacity: .7;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.ops-cap-auto-core-tag {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .6);
}

.ops-cap-auto-wires {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ops-cap-auto-wire {
  position: absolute;
  height: 2px;
  top: calc(18% + var(--l) * 32%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
  animation: opsCapWire .55s linear infinite;
}

.ops-cap-auto-wire:not(.out) {
  left: 15%;
  right: 55%;
}

.ops-cap-auto-wire.out {
  left: 55%;
  right: 13%;
}

@keyframes opsCapWire {
  to {
    background-position: 12px 0;
  }
}

.ops-cap-auto-pkt {
  position: absolute;
  top: calc(18% + var(--l) * 32%);
  margin-top: -4.5px;
  left: 15%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(var(--ops-brand-rgb), .9);
  animation: opsCapPkt 2.7s cubic-bezier(.5, 0, .5, 1) infinite;
  animation-delay: var(--d);
}

@keyframes opsCapPkt {
  0% {
    left: 15%;
    opacity: 0;
    transform: scale(.4);
  }

  8% {
    opacity: 1;
    transform: scale(1);
  }

  46% {
    left: 47%;
    transform: scale(1);
    box-shadow: 0 0 10px 2px rgba(var(--ops-brand-rgb), .9);
  }

  50% {
    left: 50%;
    transform: scale(1.7);
    box-shadow: 0 0 18px 5px rgba(var(--ops-brand-rgb), 1);
  }

  54% {
    left: 53%;
    transform: scale(1);
  }

  92% {
    opacity: 1;
  }

  100% {
    left: 87%;
    opacity: 0;
    transform: scale(.4);
  }
}

.ops-cap-auto-status {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .65);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 13px;
}

.ops-cap-auto-status b {
  color: #fff;
  font-weight: 700;
}

.ops-cap-auto-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ee0a0;
  animation: opsCapLive 1.6s ease-out infinite;
}

@keyframes opsCapLive {
  0% {
    box-shadow: 0 0 0 0 rgba(126, 224, 160, .6);
  }

  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(126, 224, 160, 0);
  }
}

/* re-enable the automation animations past the home blanket-kill */
.ops-home-main .ops-cap-auto-chip {
  animation-duration: 5.4s !important;
  animation-delay: calc(var(--i) * .5s) !important;
}

.ops-home-main .ops-cap-auto-core-badge {
  animation-duration: 2.2s !important;
}

.ops-home-main .ops-cap-auto-core-ring {
  animation-duration: 2.4s !important;
}

.ops-home-main .ops-cap-auto-core-ring.r2 {
  animation-delay: 1.2s !important;
}

.ops-home-main .ops-cap-auto-wire {
  animation-duration: .55s !important;
}

.ops-home-main .ops-cap-auto-pkt {
  animation-duration: 2.7s !important;
  animation-delay: var(--d) !important;
}

.ops-home-main .ops-cap-auto-live {
  animation-duration: 1.6s !important;
}

@media (max-width: 991px) {
  .ops-cap-auto-flow {
    min-height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops-home-main .ops-cap-auto-chip,
  .ops-home-main .ops-cap-auto-core-badge,
  .ops-home-main .ops-cap-auto-core-ring,
  .ops-home-main .ops-cap-auto-wire,
  .ops-home-main .ops-cap-auto-pkt,
  .ops-home-main .ops-cap-auto-live {
    animation-duration: 0s !important;
  }

  .ops-cap-auto-pkt {
    display: none;
  }
}

/* ============================================================================
   INDUSTRIES "we serve" — active-tab text white + animated visual shell
   ============================================================================ */
/* the tab label lives in a <span> that was inheriting dark ink on the orange pill */
.ops-industry-tabs .ops-tab-btn.is-active span,
.ops-industry-tabs .ops-tab-btn.is-active {
  color: #ffffff !important;
}

.ops-industry-tabs .ops-tab-btn span {
  transition: color .2s;
}

/* shared dark card shell that each per-industry animated visual drops into */
.ops-indv {
  position: relative;
  width: 100%;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(130% 120% at 82% 0%, #1b1f2b 0%, #0f1117 62%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 28px 66px rgba(15, 17, 23, .2);
}

.ops-indv::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 78%);
}

.ops-indv>* {
  position: relative;
  z-index: 1;
}

/* the industry visual is the whole right column now — kill the old image framing */
.ops-ind-visual {
  display: block;
}

@media (max-width: 991px) {
  .ops-indv {
    min-height: 300px;
  }
}


/* ============================================================================
   INDUSTRIES — per-industry animated visuals (workflow-designed, pure CSS)
   ============================================================================ */

/* --- health --- */
.ops-indv-health .oih-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  font-family: inherit;
}

/* ---------- top bar ---------- */
.ops-indv-health .oih-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 700;
}

.ops-indv-health .oih-live {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
}

.ops-indv-health .oih-ldot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ops-brand, #e05320);
  box-shadow: 0 0 0 0 rgba(224, 83, 32, .6);
  animation: opsIndvHealthLive 1.6s ease-out infinite !important;
}

.ops-indv-health .oih-call {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(110, 168, 255, .12);
  border: 1px solid rgba(110, 168, 255, .3);
  color: #bcd3ff;
  font-size: 10px;
  letter-spacing: .06em;
}

.ops-indv-health .oih-call i {
  font-size: 9px;
  color: #6ea8ff;
}

.ops-indv-health .oih-cdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7ee0a0;
  animation: opsIndvHealthBlink 1.8s ease-in-out infinite !important;
}

/* ---------- ECG panel ---------- */
.ops-indv-health .oih-ecg {
  position: relative;
  flex: 1 1 auto;
  min-height: 132px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .08);
}

.ops-indv-health .oih-grid {
  position: absolute;
  inset: 0;
  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: 26px 26px, 26px 26px;
  animation: opsIndvHealthGrid 6s linear infinite !important;
}

.ops-indv-health .oih-wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(180deg, rgba(224, 83, 32, .62), rgba(224, 83, 32, .04));
  filter: drop-shadow(0 0 6px rgba(255, 138, 92, .55));
  clip-path: polygon(0% 62%, 4.5% 62%, 5.5% 55%, 6% 62%, 6.5% 62%, 7% 20%, 7.5% 80%, 8% 62%, 12% 62%,
      12.5% 62%, 17% 62%, 18% 55%, 18.5% 62%, 19% 62%, 19.5% 20%, 20% 80%, 20.5% 62%, 24.5% 62%,
      25% 62%, 29.5% 62%, 30.5% 55%, 31% 62%, 31.5% 62%, 32% 20%, 32.5% 80%, 33% 62%, 37% 62%,
      37.5% 62%, 42% 62%, 43% 55%, 43.5% 62%, 44% 62%, 44.5% 20%, 45% 80%, 45.5% 62%, 49.5% 62%,
      50% 62%, 54.5% 62%, 55.5% 55%, 56% 62%, 56.5% 62%, 57% 20%, 57.5% 80%, 58% 62%, 62% 62%,
      62.5% 62%, 67% 62%, 68% 55%, 68.5% 62%, 69% 62%, 69.5% 20%, 70% 80%, 70.5% 62%, 74.5% 62%,
      75% 62%, 79.5% 62%, 80.5% 55%, 81% 62%, 81.5% 62%, 82% 20%, 82.5% 80%, 83% 62%, 87% 62%,
      87.5% 62%, 92% 62%, 93% 55%, 93.5% 62%, 94% 62%, 94.5% 20%, 95% 80%, 95.5% 62%, 99.5% 62%,
      100% 62%, 100% 100%, 0% 100%);
  animation: opsIndvHealthWave 2.4s linear infinite !important;
}

.ops-indv-health .oih-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 60%, rgba(255, 138, 92, .55));
  border-right: 1px solid rgba(255, 138, 92, .6);
  animation: opsIndvHealthSweep 3.2s linear infinite !important;
}

.ops-indv-health .oih-tag {
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
}

.ops-indv-health .oih-tag i {
  color: var(--ops-brand, #e05320);
}

/* heart + rings */
.ops-indv-health .oih-mon {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
}

.ops-indv-health .oih-heart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ops-brand, #e05320);
  font-size: 26px;
  filter: drop-shadow(0 0 8px rgba(224, 83, 32, .6));
  animation: opsIndvHealthBeat 1.2s ease-in-out infinite !important;
}

.ops-indv-health .oih-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(224, 83, 32, .55);
  animation: opsIndvHealthRing 1.2s ease-out infinite !important;
}

.ops-indv-health .oih-ring-b {
  border-color: rgba(255, 138, 92, .4);
  animation: opsIndvHealthRing 1.2s ease-out .6s infinite !important;
}

/* ---------- cards ---------- */
.ops-indv-health .oih-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.ops-indv-health .oih-card {
  position: relative;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.ops-indv-health .oih-ic {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ops-brand, #e05320);
  background: rgba(224, 83, 32, .14);
  animation: opsIndvHealthPop 1.2s ease-in-out infinite !important;
}

.ops-indv-health .oih-ic-b {
  color: #6ea8ff;
  background: rgba(110, 168, 255, .14);
  animation: opsIndvHealthPop 2.6s ease-in-out infinite !important;
}

.ops-indv-health .oih-ic-c {
  color: #f5a623;
  background: rgba(245, 166, 35, .14);
  animation: opsIndvHealthPop 2.6s ease-in-out .4s infinite !important;
}

.ops-indv-health .oih-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ops-indv-health .oih-lbl {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
}

.ops-indv-health .oih-sub {
  font-size: 7px;
}

.ops-indv-health .oih-read {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.ops-indv-health .oih-unit {
  font-size: 9px;
  color: rgba(255, 255, 255, .45);
  font-weight: 600;
}

.ops-indv-health .oih-unit i {
  color: #7ee0a0;
}

/* odometer */
.ops-indv-health .oih-odo {
  display: inline-block;
  height: 22px;
  overflow: hidden;
  line-height: 22px;
}

.ops-indv-health .oih-odo-w {
  min-width: 34px;
}

.ops-indv-health .oih-roll {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: .01em;
}

.ops-indv-health .oih-roll b {
  height: 22px;
  font-weight: 800;
}

.ops-indv-health .oih-r1 {
  animation: opsIndvHealthRoll 5.2s steps(4) infinite !important;
}

.ops-indv-health .oih-r2 {
  animation: opsIndvHealthRoll 6s steps(4) .3s infinite !important;
}

.ops-indv-health .oih-r3 {
  animation: opsIndvHealthRoll 4.6s steps(4) .6s infinite !important;
}

/* mini equalizer */
.ops-indv-health .oih-eq {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
}

.ops-indv-health .oih-eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  transform-origin: bottom;
  background: var(--ops-brand, #e05320);
  animation: opsIndvHealthBar 1s ease-in-out infinite !important;
}

.ops-indv-health .oih-eq i:nth-child(2) {
  animation-delay: .15s !important;
}

.ops-indv-health .oih-eq i:nth-child(3) {
  animation-delay: .3s !important;
}

.ops-indv-health .oih-eq i:nth-child(4) {
  animation-delay: .45s !important;
}

.ops-indv-health .oih-eq-b i {
  background: #6ea8ff;
}

.ops-indv-health .oih-eq-c i {
  background: #f5a623;
}

/* ---------- keyframes ---------- */
@keyframes opsIndvHealthWave {
  to {
    transform: translateX(-50%);
  }
}

@keyframes opsIndvHealthSweep {
  0% {
    transform: translateX(-80px);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateX(340px);
    opacity: 0;
  }
}

@keyframes opsIndvHealthGrid {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 26px 0, 0 26px;
  }
}

@keyframes opsIndvHealthBeat {

  0%,
  100% {
    transform: scale(1);
  }

  12% {
    transform: scale(1.22);
  }

  24% {
    transform: scale(.98);
  }

  38% {
    transform: scale(1.12);
  }

  52% {
    transform: scale(1);
  }
}

@keyframes opsIndvHealthRing {
  0% {
    transform: scale(.55);
    opacity: .7;
  }

  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

@keyframes opsIndvHealthLive {
  0% {
    box-shadow: 0 0 0 0 rgba(224, 83, 32, .6);
  }

  100% {
    box-shadow: 0 0 0 9px rgba(224, 83, 32, 0);
  }
}

@keyframes opsIndvHealthBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .25;
  }
}

@keyframes opsIndvHealthRoll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-88px);
  }
}

@keyframes opsIndvHealthBar {

  0%,
  100% {
    transform: scaleY(.3);
    opacity: .55;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes opsIndvHealthPop {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.12);
  }
}

/* --- startup --- */
.ops-indv-startup .su-stage {
  position: absolute;
  inset: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: inherit;
  color: #fff
}

/* ---------- KPI ROW ---------- */
.ops-indv-startup .su-kpis {
  display: flex;
  gap: 12px;
  flex: 0 0 auto
}

.ops-indv-startup .su-kpi {
  flex: 1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 9px 12px;
  position: relative;
  overflow: hidden
}

.ops-indv-startup .su-kpi-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  font-weight: 600
}

.ops-indv-startup .su-kpi-ic {
  color: var(--ops-brand, #e05320);
  font-size: 11px;
  animation: opsIndvStartupGlow 2.6s ease-in-out infinite !important
}

.ops-indv-startup .su-ic-blue {
  color: #6ea8ff
}

.ops-indv-startup .su-kpi-val {
  display: flex;
  align-items: flex-end;
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  margin-top: 2px;
  color: #fff
}

.ops-indv-startup .su-val-green {
  color: #7ee0a0
}

.ops-indv-startup .su-reel {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  vertical-align: bottom
}

.ops-indv-startup .su-reel-strip {
  display: block
}

.ops-indv-startup .su-reel-strip b {
  display: block;
  height: 24px;
  line-height: 24px;
  font-weight: 800
}

.ops-indv-startup .su-reel-mrr {
  animation: opsIndvStartupReel 5s steps(5) infinite !important
}

.ops-indv-startup .su-reel-usr {
  animation: opsIndvStartupReel 5s steps(5) .6s infinite !important
}

@keyframes opsIndvStartupReel {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-120px)
  }
}

@keyframes opsIndvStartupGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(224, 83, 32, 0));
    opacity: .85
  }

  50% {
    filter: drop-shadow(0 0 6px rgba(224, 83, 32, .8));
    opacity: 1
  }
}

/* ---------- LAUNCH + CHART ---------- */
.ops-indv-startup .su-launch {
  flex: 1 1 auto;
  display: flex;
  gap: 14px;
  position: relative;
  min-height: 0
}

/* stars */
.ops-indv-startup .su-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: .5
}

.ops-indv-startup .su-s1 {
  top: 8%;
  left: 10%;
  animation: opsIndvStartupTwinkle 3s ease-in-out infinite !important
}

.ops-indv-startup .su-s2 {
  top: 22%;
  left: 30%;
  animation: opsIndvStartupTwinkle 2.4s ease-in-out .5s infinite !important
}

.ops-indv-startup .su-s3 {
  top: 5%;
  left: 44%;
  animation: opsIndvStartupTwinkle 3.4s ease-in-out .9s infinite !important
}

.ops-indv-startup .su-s4 {
  top: 40%;
  left: 6%;
  animation: opsIndvStartupTwinkle 2.8s ease-in-out .3s infinite !important
}

.ops-indv-startup .su-s5 {
  top: 16%;
  left: 60%;
  animation: opsIndvStartupTwinkle 3.1s ease-in-out 1.2s infinite !important
}

.ops-indv-startup .su-s6 {
  top: 34%;
  left: 52%;
  animation: opsIndvStartupTwinkle 2.2s ease-in-out .7s infinite !important
}

@keyframes opsIndvStartupTwinkle {

  0%,
  100% {
    opacity: .15;
    transform: scale(.7)
  }

  50% {
    opacity: .9;
    transform: scale(1.2)
  }
}

/* left rocket column */
.ops-indv-startup .su-left {
  position: relative;
  flex: 0 0 38%;
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.ops-indv-startup .su-glow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 96px;
  height: 96px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 83, 32, .38), rgba(224, 83, 32, 0) 68%);
  animation: opsIndvStartupPulse 2.6s ease-in-out infinite !important
}

@keyframes opsIndvStartupPulse {

  0%,
  100% {
    opacity: .5;
    transform: translateX(-50%) scale(.85)
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1)
  }
}

.ops-indv-startup .su-rocket {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  animation: opsIndvStartupBob 3.2s ease-in-out infinite !important
}

@keyframes opsIndvStartupBob {

  0%,
  100% {
    transform: translateY(0) rotate(0deg)
  }

  25% {
    transform: translateY(-8px) rotate(-2.5deg)
  }

  50% {
    transform: translateY(-12px) rotate(0deg)
  }

  75% {
    transform: translateY(-8px) rotate(2.5deg)
  }
}

.ops-indv-startup .su-rk-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -16px 0 0 -16px;
  font-size: 32px;
  color: #fff;
  transform: rotate(-45deg);
  text-shadow: 0 0 10px rgba(224, 83, 32, .5)
}

.ops-indv-startup .su-flame {
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 14px;
  height: 26px;
  margin-left: -7px;
  border-radius: 50% 50% 50% 50%/38% 38% 62% 62%;
  background: linear-gradient(to bottom, #fff, #ff8a5c 32%, var(--ops-brand, #e05320) 70%, rgba(224, 83, 32, 0));
  filter: blur(.4px);
  transform-origin: 50% 0%;
  animation: opsIndvStartupFlame .28s ease-in-out infinite !important
}

@keyframes opsIndvStartupFlame {

  0%,
  100% {
    transform: scaleY(1) scaleX(1);
    opacity: .95
  }

  50% {
    transform: scaleY(.6) scaleX(1.25);
    opacity: .7
  }
}

.ops-indv-startup .su-spark {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #ff8a5c;
  opacity: 0
}

.ops-indv-startup .su-sp1 {
  animation: opsIndvStartupSpark 1.1s linear infinite !important
}

.ops-indv-startup .su-sp2 {
  animation: opsIndvStartupSparkB 1.3s linear .2s infinite !important
}

.ops-indv-startup .su-sp3 {
  animation: opsIndvStartupSpark 1s linear .45s infinite !important
}

.ops-indv-startup .su-sp4 {
  animation: opsIndvStartupSparkB 1.4s linear .65s infinite !important
}

.ops-indv-startup .su-sp5 {
  animation: opsIndvStartupSpark 1.2s linear .9s infinite !important
}

@keyframes opsIndvStartupSpark {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1
  }

  100% {
    transform: translate(-10px, 42px) scale(.2);
    opacity: 0
  }
}

@keyframes opsIndvStartupSparkB {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1
  }

  100% {
    transform: translate(11px, 46px) scale(.2);
    opacity: 0
  }
}

.ops-indv-startup .su-smoke {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  filter: blur(2px);
  opacity: 0
}

.ops-indv-startup .su-sm1 {
  animation: opsIndvStartupSmoke 2.2s ease-out infinite !important
}

.ops-indv-startup .su-sm2 {
  animation: opsIndvStartupSmoke 2.2s ease-out 1.1s infinite !important
}

@keyframes opsIndvStartupSmoke {
  0% {
    transform: translate(-50%, 0) scale(.4);
    opacity: .5
  }

  100% {
    transform: translate(-140%, -6px) scale(1.6);
    opacity: 0
  }
}

.ops-indv-startup .su-pad {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 70px;
  height: 9px;
  margin-left: -35px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%)
}

/* right chart column */
.ops-indv-startup .su-chart {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px
}

.ops-indv-startup .su-trend-ic {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 15px;
  color: #7ee0a0;
  animation: opsIndvStartupGlow 2.4s ease-in-out infinite !important
}

.ops-indv-startup .su-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  height: 118px
}

.ops-indv-startup .su-bar {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(to top, var(--ops-brand, #e05320), #ff8a5c);
  transform-origin: 50% 100%;
  box-shadow: 0 0 10px rgba(224, 83, 32, .25)
}

.ops-indv-startup .su-b1 {
  height: 34%;
  animation: opsIndvStartupBar 3s ease-in-out infinite !important
}

.ops-indv-startup .su-b2 {
  height: 46%;
  background: linear-gradient(to top, #e0632a, #ffa06c);
  animation: opsIndvStartupBar 3s ease-in-out .18s infinite !important
}

.ops-indv-startup .su-b3 {
  height: 60%;
  animation: opsIndvStartupBar 3s ease-in-out .36s infinite !important
}

.ops-indv-startup .su-b4 {
  height: 72%;
  background: linear-gradient(to top, #e0842a, #f5a623);
  animation: opsIndvStartupBar 3s ease-in-out .54s infinite !important
}

.ops-indv-startup .su-b5 {
  height: 86%;
  animation: opsIndvStartupBar 3s ease-in-out .72s infinite !important
}

.ops-indv-startup .su-b6 {
  height: 100%;
  background: linear-gradient(to top, #3fae6a, #7ee0a0);
  box-shadow: 0 0 12px rgba(126, 224, 160, .4);
  animation: opsIndvStartupBar 3s ease-in-out .9s infinite !important
}

@keyframes opsIndvStartupBar {
  0% {
    transform: scaleY(.35);
    opacity: .65
  }

  45% {
    transform: scaleY(1);
    opacity: 1
  }

  100% {
    transform: scaleY(.35);
    opacity: .65
  }
}

.ops-indv-startup .su-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7ee0a0;
  box-shadow: 0 0 9px 2px rgba(126, 224, 160, .8);
  animation: opsIndvStartupTrend 3s ease-in-out infinite !important
}

@keyframes opsIndvStartupTrend {
  0% {
    left: 2%;
    top: 74%;
    opacity: 0
  }

  12% {
    opacity: 1
  }

  88% {
    opacity: 1
  }

  100% {
    left: 94%;
    top: 6%;
    opacity: 0
  }
}

/* ---------- FUNDING ---------- */
.ops-indv-startup .su-fund {
  flex: 0 0 auto
}

.ops-indv-startup .su-fund-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .72);
  font-weight: 600
}

.ops-indv-startup .su-fund-ic {
  color: #7ee0a0;
  margin-right: 4px
}

.ops-indv-startup .su-fund-live {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #7ee0a0;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px
}

.ops-indv-startup .su-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7ee0a0;
  animation: opsIndvStartupBlink 1.4s ease-in-out infinite !important
}

@keyframes opsIndvStartupBlink {

  0%,
  100% {
    opacity: .25;
    transform: scale(.8)
  }

  50% {
    opacity: 1;
    transform: scale(1.25)
  }
}

.ops-indv-startup .su-fund-track {
  height: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
  position: relative
}

.ops-indv-startup .su-fund-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ops-brand, #e05320), #ff8a5c 55%, #f5a623);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgba(224, 83, 32, .5);
  width: 52%;
  animation: opsIndvStartupFill 4.5s ease-in-out infinite, opsIndvStartupShimmer 1.6s linear infinite !important
}

@keyframes opsIndvStartupFill {

  0%,
  100% {
    width: 52%
  }

  50% {
    width: 93%
  }
}

@keyframes opsIndvStartupShimmer {
  0% {
    background-position: 0% 0
  }

  100% {
    background-position: 200% 0
  }
}

/* --- hotel --- */
.ops-indv-hotel .oih-stage {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  height: 300px;
}

/* ---- MAP + FLIGHT PATH ---- */
.ops-indv-hotel .oih-map {
  position: relative;
  width: 100%;
  height: 150px;
}

.ops-indv-hotel .oih-flow {
  position: absolute;
  inset: 0;
}

.ops-indv-hotel .oih-fdot {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #ff8a5c;
  box-shadow: 0 0 6px rgba(255, 138, 92, .85);
  offset-path: path('M 30 122 Q 165 6 288 58');
  offset-distance: 0%;
  opacity: 0;
  animation: opsIndvHotelDot 4.5s linear infinite !important;
}

.ops-indv-hotel .oih-fdot:nth-child(1) {
  animation-delay: 0s;
}

.ops-indv-hotel .oih-fdot:nth-child(2) {
  animation-delay: -.32s;
}

.ops-indv-hotel .oih-fdot:nth-child(3) {
  animation-delay: -.64s;
}

.ops-indv-hotel .oih-fdot:nth-child(4) {
  animation-delay: -.96s;
}

.ops-indv-hotel .oih-fdot:nth-child(5) {
  animation-delay: -1.29s;
}

.ops-indv-hotel .oih-fdot:nth-child(6) {
  animation-delay: -1.61s;
}

.ops-indv-hotel .oih-fdot:nth-child(7) {
  animation-delay: -1.93s;
}

.ops-indv-hotel .oih-fdot:nth-child(8) {
  animation-delay: -2.25s;
}

.ops-indv-hotel .oih-fdot:nth-child(9) {
  animation-delay: -2.57s;
}

.ops-indv-hotel .oih-fdot:nth-child(10) {
  animation-delay: -2.89s;
}

.ops-indv-hotel .oih-fdot:nth-child(11) {
  animation-delay: -3.21s;
}

.ops-indv-hotel .oih-fdot:nth-child(12) {
  animation-delay: -3.54s;
}

.ops-indv-hotel .oih-fdot:nth-child(13) {
  animation-delay: -3.86s;
}

.ops-indv-hotel .oih-fdot:nth-child(14) {
  animation-delay: -4.18s;
}

.ops-indv-hotel .oih-plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ops-brand, #e05320);
  font-size: 19px;
  offset-path: path('M 30 122 Q 165 6 288 58');
  offset-rotate: auto -45deg;
  offset-distance: 0%;
  filter: drop-shadow(0 0 5px rgba(224, 83, 32, .6));
  animation: opsIndvHotelFly 4.5s linear infinite, opsIndvHotelGlow 2.2s ease-in-out infinite !important;
}

.ops-indv-hotel .oih-pin {
  position: absolute;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

.ops-indv-hotel .oih-pin-a {
  left: 30px;
  top: 122px;
  color: #6ea8ff;
}

.ops-indv-hotel .oih-pin-b {
  left: 288px;
  top: 58px;
  color: var(--ops-brand, #e05320);
}

.ops-indv-hotel .oih-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: opsIndvHotelRing 2.4s ease-out infinite !important;
}

.ops-indv-hotel .oih-pin-b::after {
  animation-delay: -1.2s;
}

/* ---- BOOKING PANELS ---- */
.ops-indv-hotel .oih-bottom {
  position: absolute;
  left: 0;
  right: 0;
  top: 160px;
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.ops-indv-hotel .oih-cal {
  flex: 1.35;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 9px;
}

.ops-indv-hotel .oih-cal-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.ops-indv-hotel .oih-cal-head i {
  color: var(--ops-brand, #e05320);
  font-size: 12px;
}

.ops-indv-hotel .oih-hbar {
  height: 6px;
  width: 58px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .4), rgba(255, 255, 255, .12));
  background-size: 200% 100%;
  animation: opsIndvHotelShine 3s linear infinite !important;
}

.ops-indv-hotel .oih-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 5px;
}

.ops-indv-hotel .oih-week span {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .2);
}

.ops-indv-hotel .oih-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.ops-indv-hotel .oih-c {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
}

.ops-indv-hotel .oih-c.b {
  animation: opsIndvHotelBook 4.5s ease-in-out infinite !important;
}

.ops-indv-hotel .oih-c.b1 {
  animation-delay: 0s;
}

.ops-indv-hotel .oih-c.b2 {
  animation-delay: .16s;
}

.ops-indv-hotel .oih-c.b3 {
  animation-delay: .32s;
}

.ops-indv-hotel .oih-c.b4 {
  animation-delay: .48s;
}

.ops-indv-hotel .oih-c.b5 {
  animation-delay: .64s;
}

.ops-indv-hotel .oih-c.b6 {
  animation-delay: .8s;
}

.ops-indv-hotel .oih-c.b7 {
  animation-delay: .96s;
}

.ops-indv-hotel .oih-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ops-indv-hotel .oih-room {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 8px;
}

.ops-indv-hotel .oih-ic {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: rgba(224, 83, 32, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ops-brand, #e05320);
  font-size: 12px;
}

.ops-indv-hotel .oih-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ops-indv-hotel .oih-ln {
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .4), rgba(255, 255, 255, .12));
  background-size: 200% 100%;
  animation: opsIndvHotelShine 3s linear infinite !important;
}

.ops-indv-hotel .oih-ln.s {
  width: 65%;
  animation-delay: -1.5s;
}

.ops-indv-hotel .oih-room:nth-child(2) .oih-ln {
  animation-delay: -.9s;
}

.ops-indv-hotel .oih-room:nth-child(2) .oih-ln.s {
  animation-delay: -2.1s;
}

.ops-indv-hotel .oih-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #7ee0a0;
  animation: opsIndvHotelPulse 2s ease-out infinite !important;
}

.ops-indv-hotel .oih-room:nth-child(2) .oih-dot {
  animation-delay: -1s;
}

.ops-indv-hotel .oih-occ {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  padding: 9px;
  margin-top: auto;
}

.ops-indv-hotel .oih-occ-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.ops-indv-hotel .oih-occ-head i {
  color: #f5a623;
  font-size: 11px;
}

.ops-indv-hotel .oih-occ-head span {
  height: 5px;
  width: 38px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .2);
}

.ops-indv-hotel .oih-occ-track {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.ops-indv-hotel .oih-occ-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ops-brand, #e05320), #ff8a5c);
  transform-origin: left center;
  transform: scaleX(.28);
  animation: opsIndvHotelOcc 4.5s ease-in-out infinite !important;
}

/* ---- KEYFRAMES ---- */
@keyframes opsIndvHotelFly {
  0% {
    offset-distance: 0%;
    opacity: 0
  }

  6% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    offset-distance: 100%;
    opacity: 0
  }
}

@keyframes opsIndvHotelDot {
  0% {
    offset-distance: 0%;
    opacity: 0
  }

  10% {
    opacity: 1
  }

  88% {
    opacity: 1
  }

  100% {
    offset-distance: 100%;
    opacity: 0
  }
}

@keyframes opsIndvHotelGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(224, 83, 32, .5))
  }

  50% {
    filter: drop-shadow(0 0 10px rgba(255, 138, 92, .95))
  }
}

@keyframes opsIndvHotelRing {
  0% {
    transform: scale(.5);
    opacity: .7
  }

  100% {
    transform: scale(1.95);
    opacity: 0
  }
}

@keyframes opsIndvHotelShine {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

@keyframes opsIndvHotelBook {
  0% {
    background: rgba(255, 255, 255, .06);
    transform: scale(1);
    box-shadow: none
  }

  10% {
    background: var(--ops-brand, #e05320);
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(224, 83, 32, .6)
  }

  20% {
    transform: scale(1)
  }

  62% {
    background: var(--ops-brand, #e05320);
    box-shadow: 0 0 6px rgba(224, 83, 32, .35)
  }

  80% {
    background: rgba(255, 255, 255, .06);
    box-shadow: none
  }

  100% {
    background: rgba(255, 255, 255, .06);
    transform: scale(1)
  }
}

@keyframes opsIndvHotelPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(126, 224, 160, .55);
    transform: scale(1)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(126, 224, 160, 0);
    transform: scale(1.18)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(126, 224, 160, 0);
    transform: scale(1)
  }
}

@keyframes opsIndvHotelOcc {
  0% {
    transform: scaleX(.28)
  }

  45% {
    transform: scaleX(.9)
  }

  55% {
    transform: scaleX(.9)
  }

  100% {
    transform: scaleX(.28)
  }
}

/* --- realestate --- */
.ops-indv-realestate .re-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  font-family: inherit;
  overflow: hidden
}

.ops-indv-realestate .re-glow {
  position: absolute;
  top: -14px;
  right: -8px;
  width: 250px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle at 68% 30%, rgba(224, 83, 32, .34), transparent 62%);
  filter: blur(4px);
  animation: opsIndvRealestateGlow 6s ease-in-out infinite !important
}

@keyframes opsIndvRealestateGlow {

  0%,
  100% {
    opacity: .5;
    transform: scale(.96)
  }

  50% {
    opacity: .95;
    transform: scale(1.04)
  }
}

.ops-indv-realestate .re-scan {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 195px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 138, 92, .16) 50%, transparent 100%);
  background-size: 42% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: opsIndvRealestateScan 5.5s linear infinite !important
}

@keyframes opsIndvRealestateScan {
  0% {
    background-position: -45% 0
  }

  100% {
    background-position: 145% 0
  }
}

.ops-indv-realestate .re-skyline {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 9px
}

.ops-indv-realestate .re-bldg {
  width: 50px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .09);
  border-bottom: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 9px;
  box-sizing: border-box
}

.ops-indv-realestate .re-b1 {
  height: 118px
}

.ops-indv-realestate .re-b2 {
  height: 166px
}

.ops-indv-realestate .re-b3 {
  height: 94px
}

.ops-indv-realestate .re-b4 {
  height: 138px
}

.ops-indv-realestate .re-win {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .07)
}

.ops-indv-realestate .re-b1 .re-win {
  animation: opsIndvRealestateWindow 3.4s ease-in-out infinite !important
}

.ops-indv-realestate .re-b2 .re-win {
  animation: opsIndvRealestateWindow 4.2s ease-in-out infinite !important
}

.ops-indv-realestate .re-b3 .re-win {
  animation: opsIndvRealestateWindow 3s ease-in-out infinite !important
}

.ops-indv-realestate .re-b4 .re-win {
  animation: opsIndvRealestateWindow 3.8s ease-in-out infinite !important
}

.ops-indv-realestate .re-bldg .re-win:nth-child(1) {
  animation-delay: 0s !important
}

.ops-indv-realestate .re-bldg .re-win:nth-child(2) {
  animation-delay: .22s !important
}

.ops-indv-realestate .re-bldg .re-win:nth-child(3) {
  animation-delay: .44s !important
}

.ops-indv-realestate .re-bldg .re-win:nth-child(4) {
  animation-delay: .66s !important
}

.ops-indv-realestate .re-bldg .re-win:nth-child(5) {
  animation-delay: .88s !important
}

.ops-indv-realestate .re-bldg .re-win:nth-child(6) {
  animation-delay: 1.1s !important
}

@keyframes opsIndvRealestateWindow {

  0%,
  100% {
    background: rgba(255, 255, 255, .07);
    box-shadow: none
  }

  45% {
    background: var(--ops-brand, #e05320);
    box-shadow: 0 0 8px rgba(224, 83, 32, .85)
  }

  58% {
    background: #ff8a5c;
    box-shadow: 0 0 10px rgba(255, 138, 92, .9)
  }
}

.ops-indv-realestate .re-pin {
  position: absolute;
  width: 26px;
  height: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  transform-origin: center bottom
}

.ops-indv-realestate .re-pin i {
  font-size: 23px;
  color: var(--ops-brand, #e05320);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5))
}

.ops-indv-realestate .re-pin1 {
  left: 64px;
  top: 66px;
  animation: opsIndvRealestatePin 5s ease-in-out infinite !important
}

.ops-indv-realestate .re-pin2 {
  left: 150px;
  top: 34px;
  animation: opsIndvRealestatePin 5s ease-in-out 1.5s infinite !important
}

.ops-indv-realestate .re-pin3 {
  left: 104px;
  top: 120px;
  animation: opsIndvRealestatePin 5s ease-in-out 3s infinite !important
}

@keyframes opsIndvRealestatePin {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(.5)
  }

  8% {
    opacity: 1;
    transform: translateY(6px) scale(1.05)
  }

  13% {
    transform: translateY(0) scale(1)
  }

  17% {
    transform: translateY(3px)
  }

  21% {
    transform: translateY(0)
  }

  84% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }

  93% {
    opacity: 0;
    transform: translateY(-8px) scale(.8)
  }

  100% {
    opacity: 0;
    transform: translateY(-30px) scale(.5)
  }
}

.ops-indv-realestate .re-ring {
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 18px;
  height: 7px;
  border-radius: 50%;
  background: rgba(224, 83, 32, .55);
  transform: translateX(-50%) scale(.4);
  animation: opsIndvRealestatePulse 2s ease-out infinite !important
}

@keyframes opsIndvRealestatePulse {
  0% {
    transform: translateX(-50%) scale(.4);
    opacity: .7
  }

  100% {
    transform: translateX(-50%) scale(2.3);
    opacity: 0
  }
}

.ops-indv-realestate .re-cards {
  position: absolute;
  top: 14px;
  right: 2px;
  width: 196px;
  height: 152px
}

.ops-indv-realestate .re-card {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 32, 36, .94), rgba(20, 20, 24, .95));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  opacity: 0
}

.ops-indv-realestate .re-card1 {
  animation: opsIndvRealestateCard 9s ease-in-out infinite !important
}

.ops-indv-realestate .re-card2 {
  animation: opsIndvRealestateCard 9s ease-in-out 3s infinite !important
}

.ops-indv-realestate .re-card3 {
  animation: opsIndvRealestateCard 9s ease-in-out 6s infinite !important
}

@keyframes opsIndvRealestateCard {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(.94)
  }

  4% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }

  29% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }

  34% {
    opacity: 0;
    transform: translateY(-22px) scale(.94)
  }

  100% {
    opacity: 0;
    transform: translateY(-22px) scale(.94)
  }
}

.ops-indv-realestate .re-thumb {
  position: relative;
  height: 74px;
  background: linear-gradient(135deg, rgba(224, 83, 32, .4), rgba(255, 138, 92, .14));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.ops-indv-realestate .re-thumb i {
  font-size: 29px;
  color: rgba(255, 255, 255, .88)
}

.ops-indv-realestate .re-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .28) 50%, transparent 68%);
  transform: translateX(-120%);
  animation: opsIndvRealestateShine 3.6s ease-in-out infinite !important
}

@keyframes opsIndvRealestateShine {
  0% {
    transform: translateX(-120%)
  }

  50%,
  100% {
    transform: translateX(120%)
  }
}

.ops-indv-realestate .re-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #0c2a17;
  background: #7ee0a0;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase
}

.ops-indv-realestate .re-tag-rent {
  color: #0b2036;
  background: #6ea8ff
}

.ops-indv-realestate .re-body {
  padding: 9px 11px
}

.ops-indv-realestate .re-price {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  line-height: 1
}

.ops-indv-realestate .re-price small {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55)
}

.ops-indv-realestate .re-addr {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, .62);
  margin-top: 6px
}

.ops-indv-realestate .re-addr i {
  font-size: 9px;
  color: #ff8a5c
}

.ops-indv-realestate .re-stats {
  display: flex;
  gap: 11px;
  margin-top: 8px;
  font-size: 9px;
  color: rgba(255, 255, 255, .55)
}

.ops-indv-realestate .re-stats i {
  color: #6ea8ff;
  margin-right: 3px;
  font-size: 9px
}

/* --- education --- */
@property --opsEduFill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.ops-indv-education .edu-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

/* ===== Video player card ===== */
.ops-indv-education .edu-video {
  position: relative;
  flex: 0 0 118px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(224, 83, 32, .24), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .09);
}

.ops-indv-education .edu-vid-glow {
  position: absolute;
  inset: -45%;
  background: radial-gradient(circle at 32% 34%, rgba(255, 138, 92, .42), transparent 58%);
  animation: opsIndvEducationGlow 7s ease-in-out infinite !important;
}

.ops-indv-education .edu-badge {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 3px 8px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ops-indv-education .edu-badge i {
  color: var(--ops-brand, #e05320);
  font-size: 10px;
}

.ops-indv-education .edu-time {
  position: absolute;
  right: 12px;
  bottom: 9px;
  z-index: 2;
  font-size: 10px;
  color: rgba(255, 255, 255, .62);
  letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
}

.ops-indv-education .edu-play {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  z-index: 2;
  background: var(--ops-brand, #e05320);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(224, 83, 32, .55);
  animation: opsIndvEducationPlay 3.4s ease-in-out infinite !important;
}

.ops-indv-education .edu-play i {
  font-size: 16px;
  margin-left: 3px;
}

.ops-indv-education .edu-play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 138, 92, .65);
  animation: opsIndvEducationPing 3.4s ease-out infinite !important;
}

.ops-indv-education .edu-scrub {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 26px;
  z-index: 2;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .18);
}

.ops-indv-education .edu-scrub-fill {
  height: 100%;
  width: 20%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff8a5c, var(--ops-brand, #e05320));
  animation: opsIndvEducationScrub 6s cubic-bezier(.5, 0, .5, 1) infinite !important;
}

.ops-indv-education .edu-scrub-knob {
  position: absolute;
  top: 50%;
  left: 20%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(255, 255, 255, .65);
  animation: opsIndvEducationKnob 6s cubic-bezier(.5, 0, .5, 1) infinite !important;
}

/* ===== Bottom row: ring + checklist ===== */
.ops-indv-education .edu-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 0;
}

/* progress ring */
.ops-indv-education .edu-ring {
  position: relative;
  flex: 0 0 98px;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  --opsEduFill: 0%;
  background: conic-gradient(from -90deg,
      var(--ops-brand, #e05320) 0 var(--opsEduFill),
      rgba(255, 255, 255, .12) var(--opsEduFill) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 61%, #000 62%);
  mask: radial-gradient(farthest-side, transparent 61%, #000 62%);
  filter: drop-shadow(0 0 8px rgba(224, 83, 32, .35));
  animation: opsIndvEducationFill 9s cubic-bezier(.55, 0, .35, 1) infinite !important;
}

.ops-indv-education .edu-ring-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: opsIndvEducationOrbit 4.5s linear infinite !important;
}

.ops-indv-education .edu-ring-dot::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff8a5c;
  box-shadow: 0 0 10px #ff8a5c;
}

.ops-indv-education .edu-ring-core {
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask: none;
  mask: none;
}

.ops-indv-education .edu-ring-core i {
  font-size: 25px;
  color: #ff8a5c;
  animation: opsIndvEducationCap 3.2s ease-in-out infinite !important;
}

/* checklist */
.ops-indv-education .edu-list {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  padding: 2px 2px 2px 4px;
}

.ops-indv-education .edu-scan {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 8px;
  height: 26px;
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(255, 138, 92, .16), rgba(255, 138, 92, .04) 60%, transparent);
  pointer-events: none;
  animation: opsIndvEducationScan 9s ease-in-out infinite !important;
}

.ops-indv-education .edu-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
}

.ops-indv-education .edu-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, .24);
  background: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ops-indv-education .edu-check i {
  font-size: 10px;
  color: inherit;
}

.ops-indv-education .edu-label {
  height: 9px;
  border-radius: 6px;
  flex: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .07), rgba(255, 255, 255, .24));
  background-size: 200% 100%;
  animation: opsIndvEducationShimmer 2.6s linear infinite !important;
}

.ops-indv-education .edu-l1 {
  max-width: 100%;
}

.ops-indv-education .edu-l2 {
  max-width: 76%;
}

.ops-indv-education .edu-l3 {
  max-width: 90%;
}

.ops-indv-education .edu-l4 {
  max-width: 64%;
}

.ops-indv-education .edu-l2 {
  animation-delay: -.5s !important;
}

.ops-indv-education .edu-l3 {
  animation-delay: -1s !important;
}

.ops-indv-education .edu-l4 {
  animation-delay: -1.5s !important;
}

.ops-indv-education .edu-c1 {
  animation: opsIndvEducationTick1 9s ease-in-out infinite !important;
}

.ops-indv-education .edu-c2 {
  animation: opsIndvEducationTick2 9s ease-in-out infinite !important;
}

.ops-indv-education .edu-c3 {
  animation: opsIndvEducationTick3 9s ease-in-out infinite !important;
}

.ops-indv-education .edu-c4 {
  animation: opsIndvEducationTick4 9s ease-in-out infinite !important;
}

/* ===== Keyframes ===== */
@keyframes opsIndvEducationFill {
  0% {
    --opsEduFill: 0%
  }

  68% {
    --opsEduFill: 100%
  }

  88% {
    --opsEduFill: 100%
  }

  100% {
    --opsEduFill: 0%
  }
}

@keyframes opsIndvEducationOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes opsIndvEducationCap {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-4px) rotate(-5deg);
  }
}

@keyframes opsIndvEducationGlow {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(11%, 7%);
  }
}

@keyframes opsIndvEducationPlay {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.07);
  }
}

@keyframes opsIndvEducationPing {
  0% {
    transform: scale(.7);
    opacity: .75;
  }

  70%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes opsIndvEducationScrub {
  0% {
    width: 6%;
  }

  88% {
    width: 100%;
  }

  100% {
    width: 6%;
  }
}

@keyframes opsIndvEducationKnob {
  0% {
    left: 6%;
  }

  88% {
    left: 100%;
  }

  100% {
    left: 6%;
  }
}

@keyframes opsIndvEducationShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: 0 0;
  }
}

@keyframes opsIndvEducationScan {

  0%,
  6% {
    transform: translateY(0);
    opacity: 0;
  }

  11% {
    transform: translateY(0);
    opacity: 1;
  }

  30% {
    transform: translateY(31px);
  }

  50% {
    transform: translateY(62px);
  }

  68% {
    transform: translateY(93px);
    opacity: 1;
  }

  86% {
    transform: translateY(93px);
    opacity: 1;
  }

  96%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes opsIndvEducationTick1 {

  0%,
  8% {
    transform: scale(.8);
    background: transparent;
    border-color: rgba(255, 255, 255, .24);
    color: transparent;
  }

  11% {
    transform: scale(1.2);
    background: #7ee0a0;
    border-color: #7ee0a0;
    color: #0b1220;
  }

  15%,
  86% {
    transform: scale(1);
    background: #7ee0a0;
    border-color: #7ee0a0;
    color: #0b1220;
  }

  92%,
  100% {
    transform: scale(.8);
    background: transparent;
    border-color: rgba(255, 255, 255, .24);
    color: transparent;
  }
}

@keyframes opsIndvEducationTick2 {

  0%,
  24% {
    transform: scale(.8);
    background: transparent;
    border-color: rgba(255, 255, 255, .24);
    color: transparent;
  }

  27% {
    transform: scale(1.2);
    background: #7ee0a0;
    border-color: #7ee0a0;
    color: #0b1220;
  }

  31%,
  86% {
    transform: scale(1);
    background: #7ee0a0;
    border-color: #7ee0a0;
    color: #0b1220;
  }

  92%,
  100% {
    transform: scale(.8);
    background: transparent;
    border-color: rgba(255, 255, 255, .24);
    color: transparent;
  }
}

@keyframes opsIndvEducationTick3 {

  0%,
  40% {
    transform: scale(.8);
    background: transparent;
    border-color: rgba(255, 255, 255, .24);
    color: transparent;
  }

  43% {
    transform: scale(1.2);
    background: #7ee0a0;
    border-color: #7ee0a0;
    color: #0b1220;
  }

  47%,
  86% {
    transform: scale(1);
    background: #7ee0a0;
    border-color: #7ee0a0;
    color: #0b1220;
  }

  92%,
  100% {
    transform: scale(.8);
    background: transparent;
    border-color: rgba(255, 255, 255, .24);
    color: transparent;
  }
}

@keyframes opsIndvEducationTick4 {

  0%,
  56% {
    transform: scale(.8);
    background: transparent;
    border-color: rgba(255, 255, 255, .24);
    color: transparent;
  }

  59% {
    transform: scale(1.2);
    background: #7ee0a0;
    border-color: #7ee0a0;
    color: #0b1220;
  }

  63%,
  86% {
    transform: scale(1);
    background: #7ee0a0;
    border-color: #7ee0a0;
    color: #0b1220;
  }

  92%,
  100% {
    transform: scale(.8);
    background: transparent;
    border-color: rgba(255, 255, 255, .24);
    color: transparent;
  }
}

/* --- ecommerce --- */
.ops-indv-ecommerce .ec-stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: inherit;
  color: #fff;
}

/* ---------- top bar ---------- */
.ops-indv-ecommerce .ec-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  overflow: hidden;
}

.ops-indv-ecommerce .ec-store {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ops-indv-ecommerce .ec-logo {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  box-shadow: 0 4px 12px rgba(224, 83, 32, .45);
}

.ops-indv-ecommerce .ec-store-t {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.ops-indv-ecommerce .ec-store-t b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}

.ops-indv-ecommerce .ec-store-t i {
  font-size: 9px;
  font-style: normal;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .5px;
}

.ops-indv-ecommerce .ec-cart {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  animation: opsIndvEcommerceCartBump 9s ease-in-out infinite !important;
}

.ops-indv-ecommerce .ec-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  box-shadow: 0 3px 8px rgba(224, 83, 32, .55);
  border: 1.5px solid #14171f;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  animation: opsIndvEcommerceBadge 9s ease-in-out infinite !important;
}

.ops-indv-ecommerce .ec-count {
  display: block;
  height: 11px;
  overflow: hidden;
}

.ops-indv-ecommerce .ec-count b {
  display: block;
  height: 11px;
  line-height: 11px;
  text-align: center;
  animation: opsIndvEcommerceCount 9s steps(1, end) infinite !important;
}

.ops-indv-ecommerce .ec-scan {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--ops-brand, #e05320), #ff8a5c, transparent);
  filter: blur(.3px);
  animation: opsIndvEcommerceScan 3.4s ease-in-out infinite !important;
}

/* ---------- product grid ---------- */
.ops-indv-ecommerce .ec-grid {
  display: flex;
  gap: 10px;
  height: 120px;
}

.ops-indv-ecommerce .ec-tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}

.ops-indv-ecommerce .ec-t1 {
  animation: opsIndvEcommerceTile 9s ease-in-out infinite !important;
}

.ops-indv-ecommerce .ec-t2 {
  animation: opsIndvEcommerceTile 9s ease-in-out -3s infinite !important;
}

.ops-indv-ecommerce .ec-t3 {
  animation: opsIndvEcommerceTile 9s ease-in-out -6s infinite !important;
}

.ops-indv-ecommerce .ec-thumb {
  height: 60px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: rgba(255, 255, 255, .9);
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
}

.ops-indv-ecommerce .ec-t1 .ec-thumb {
  color: #6ea8ff;
}

.ops-indv-ecommerce .ec-t2 .ec-thumb {
  color: #c084fc;
}

.ops-indv-ecommerce .ec-t3 .ec-thumb {
  color: #7ee0a0;
}

.ops-indv-ecommerce .ec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ops-indv-ecommerce .ec-price {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}

.ops-indv-ecommerce .ec-add {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  box-shadow: 0 3px 9px rgba(224, 83, 32, .5);
}

.ops-indv-ecommerce .ec-t1 .ec-add {
  animation: opsIndvEcommerceAdd 9s ease-in-out infinite !important;
}

.ops-indv-ecommerce .ec-t2 .ec-add {
  animation: opsIndvEcommerceAdd 9s ease-in-out -3s infinite !important;
}

.ops-indv-ecommerce .ec-t3 .ec-add {
  animation: opsIndvEcommerceAdd 9s ease-in-out -6s infinite !important;
}

/* ---------- flying items ---------- */
.ops-indv-ecommerce .ec-fly {
  position: absolute;
  top: 96px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #fff;
  z-index: 5;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  box-shadow: 0 8px 20px rgba(224, 83, 32, .5);
  opacity: 0;
}

.ops-indv-ecommerce .ec-fly1 {
  left: 36px;
  animation: opsIndvEcommerceFly1 9s ease-in-out infinite !important;
}

.ops-indv-ecommerce .ec-fly2 {
  left: 146px;
  animation: opsIndvEcommerceFly2 9s ease-in-out infinite !important;
}

.ops-indv-ecommerce .ec-fly3 {
  left: 256px;
  animation: opsIndvEcommerceFly3 9s ease-in-out infinite !important;
}

/* ---------- order total ---------- */
.ops-indv-ecommerce .ec-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(224, 83, 32, .30);
  background: linear-gradient(180deg, rgba(224, 83, 32, .14), rgba(224, 83, 32, .05));
}

.ops-indv-ecommerce .ec-total-l {
  font-size: 11px;
  color: rgba(255, 255, 255, .72);
  font-weight: 600;
}

.ops-indv-ecommerce .ec-total-l i {
  color: var(--ops-brand, #e05320);
  margin-right: 3px;
}

.ops-indv-ecommerce .ec-total-v {
  display: block;
  height: 17px;
  overflow: hidden;
}

.ops-indv-ecommerce .ec-roll {
  display: block;
}

.ops-indv-ecommerce .ec-roll b {
  display: block;
  height: 17px;
  line-height: 17px;
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  animation: opsIndvEcommerceRoll 9s cubic-bezier(.7, 0, .2, 1) infinite !important;
}

/* ---------- stepper ---------- */
.ops-indv-ecommerce .ec-steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 6px 0;
}

.ops-indv-ecommerce .ec-track {
  position: absolute;
  top: 19px;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.ops-indv-ecommerce .ec-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 8%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ops-brand, #e05320), #ff8a5c);
  animation: opsIndvEcommerceFill 9s cubic-bezier(.65, 0, .35, 1) infinite !important;
}

.ops-indv-ecommerce .ec-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 52px;
}

.ops-indv-ecommerce .ec-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  background: #14171f;
  border: 1.5px solid rgba(255, 255, 255, .16);
}

.ops-indv-ecommerce .ec-s1 .ec-dot {
  animation: opsIndvEcommerceDot 9s ease-in-out infinite !important;
}

.ops-indv-ecommerce .ec-s2 .ec-dot {
  animation: opsIndvEcommerceDot 9s ease-in-out -3s infinite !important;
}

.ops-indv-ecommerce .ec-s3 .ec-dot {
  animation: opsIndvEcommerceDot 9s ease-in-out -6s infinite !important;
}

.ops-indv-ecommerce .ec-lab {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: rgba(255, 255, 255, .55);
}

/* ===================== keyframes ===================== */
@keyframes opsIndvEcommerceScan {
  0% {
    transform: translateX(-40%);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(320%);
    opacity: 0;
  }
}

@keyframes opsIndvEcommerceCartBump {

  0%,
  13% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.24) rotate(-6deg);
  }

  18% {
    transform: scale(1);
  }

  47%,
  47.9% {
    transform: scale(1);
  }

  49% {
    transform: scale(1.24) rotate(-6deg);
  }

  52% {
    transform: scale(1);
  }

  80% {
    transform: scale(1);
  }

  82% {
    transform: scale(1.24) rotate(-6deg);
  }

  85% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes opsIndvEcommerceBadge {

  0%,
  13% {
    opacity: 0;
    transform: scale(.2);
  }

  16% {
    opacity: 1;
    transform: scale(1.15);
  }

  19% {
    transform: scale(1);
  }

  48% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.28);
  }

  53% {
    transform: scale(1);
  }

  81% {
    transform: scale(1);
  }

  83% {
    transform: scale(1.28);
  }

  86% {
    transform: scale(1);
  }

  95% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.2);
  }
}

@keyframes opsIndvEcommerceCount {

  0%,
  48.9% {
    transform: translateY(0);
  }

  49%,
  81.9% {
    transform: translateY(-11px);
  }

  82%,
  100% {
    transform: translateY(-22px);
  }
}

@keyframes opsIndvEcommerceTile {
  0% {
    transform: translateY(0);
    border-color: rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: none;
  }

  3% {
    transform: translateY(-4px);
    border-color: var(--ops-brand, #e05320);
    background: linear-gradient(180deg, rgba(224, 83, 32, .20), rgba(224, 83, 32, .06));
    box-shadow: 0 10px 24px rgba(224, 83, 32, .28);
  }

  14% {
    transform: translateY(-3px);
    border-color: rgba(224, 83, 32, .85);
    background: linear-gradient(180deg, rgba(224, 83, 32, .16), rgba(224, 83, 32, .05));
    box-shadow: 0 8px 20px rgba(224, 83, 32, .22);
  }

  20% {
    transform: translateY(0);
    border-color: rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: none;
  }

  100% {
    transform: translateY(0);
    border-color: rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: none;
  }
}

@keyframes opsIndvEcommerceAdd {
  0% {
    transform: scale(1);
  }

  3% {
    transform: scale(1.35) rotate(90deg);
  }

  7% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes opsIndvEcommerceFly1 {

  0%,
  2% {
    opacity: 0;
    transform: translate(0, 0) scale(.4);
  }

  4% {
    opacity: 1;
    transform: translate(6px, -10px) scale(1);
  }

  9% {
    opacity: 1;
    transform: translate(150px, -150px) scale(.85);
  }

  14% {
    opacity: 1;
    transform: translate(246px, -84px) scale(.35);
  }

  15.5% {
    opacity: 0;
    transform: translate(246px, -84px) scale(.15);
  }

  100% {
    opacity: 0;
    transform: translate(0, 0) scale(.4);
  }
}

@keyframes opsIndvEcommerceFly2 {

  0%,
  36% {
    opacity: 0;
    transform: translate(0, 0) scale(.4);
  }

  38% {
    opacity: 1;
    transform: translate(6px, -10px) scale(1);
  }

  43% {
    opacity: 1;
    transform: translate(80px, -152px) scale(.85);
  }

  48% {
    opacity: 1;
    transform: translate(136px, -84px) scale(.35);
  }

  49.5% {
    opacity: 0;
    transform: translate(136px, -84px) scale(.15);
  }

  100% {
    opacity: 0;
    transform: translate(0, 0) scale(.4);
  }
}

@keyframes opsIndvEcommerceFly3 {

  0%,
  69% {
    opacity: 0;
    transform: translate(0, 0) scale(.4);
  }

  71% {
    opacity: 1;
    transform: translate(-4px, -10px) scale(1);
  }

  76% {
    opacity: 1;
    transform: translate(12px, -152px) scale(.85);
  }

  81% {
    opacity: 1;
    transform: translate(26px, -84px) scale(.35);
  }

  82.5% {
    opacity: 0;
    transform: translate(26px, -84px) scale(.15);
  }

  100% {
    opacity: 0;
    transform: translate(0, 0) scale(.4);
  }
}

@keyframes opsIndvEcommerceRoll {

  0%,
  46% {
    transform: translateY(0);
  }

  49%,
  79% {
    transform: translateY(-17px);
  }

  82%,
  100% {
    transform: translateY(-34px);
  }
}

@keyframes opsIndvEcommerceFill {

  0%,
  8% {
    width: 8%;
  }

  40% {
    width: 50%;
  }

  74% {
    width: 92%;
  }

  90%,
  100% {
    width: 92%;
  }
}

@keyframes opsIndvEcommerceDot {
  0% {
    color: rgba(255, 255, 255, .55);
    background: #14171f;
    border-color: rgba(255, 255, 255, .16);
    transform: scale(1);
  }

  3% {
    color: #fff;
    background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(224, 83, 32, .45);
    transform: scale(1.18);
  }

  8% {
    transform: scale(1);
  }

  30% {
    color: #fff;
    background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(224, 83, 32, .45);
    transform: scale(1);
  }

  33% {
    color: rgba(255, 255, 255, .55);
    background: #14171f;
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
    transform: scale(1);
  }

  100% {
    color: rgba(255, 255, 255, .55);
    background: #14171f;
    border-color: rgba(255, 255, 255, .16);
    transform: scale(1);
  }
}

/* --- logistics --- */
.ops-indv-logistics .opl-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 14px
}

.ops-indv-logistics .opl-map {
  position: relative;
  flex: 0 0 auto;
  height: 206px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden
}

.ops-indv-logistics .opl-grid {
  position: absolute;
  inset: 0;
  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: 26px 26px;
  animation: opsIndvLogisticsGrid 9s linear infinite !important
}

.ops-indv-logistics .opl-route {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 56%;
  height: 3px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--ops-brand, #e05320) 0 8px, transparent 8px 18px);
  background-size: 18px 100%;
  opacity: .6;
  animation: opsIndvLogisticsDash 1s linear infinite !important
}

.ops-indv-logistics .opl-road {
  position: absolute;
  left: 7%;
  right: 7%;
  top: calc(56% + 1px);
  height: 1px;
  background: rgba(255, 255, 255, .1)
}

.ops-indv-logistics .opl-wp {
  position: absolute;
  top: calc(56% - 8px);
  width: 17px;
  height: 17px;
  margin-left: -8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16)
}

.ops-indv-logistics .opl-wp1 {
  left: 24%;
  animation: opsIndvLogisticsWp 8s ease-in-out 1.1s infinite !important
}

.ops-indv-logistics .opl-wp2 {
  left: 48%;
  animation: opsIndvLogisticsWp 8s ease-in-out 3.2s infinite !important
}

.ops-indv-logistics .opl-wp3 {
  left: 70%;
  animation: opsIndvLogisticsWp 8s ease-in-out 5.3s infinite !important
}

.ops-indv-logistics .opl-dest {
  position: absolute;
  left: 89%;
  top: calc(56% - 13px);
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #7ee0a0;
  background: rgba(126, 224, 160, .12);
  border: 1px solid rgba(126, 224, 160, .4)
}

.ops-indv-logistics .opl-ping {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #7ee0a0;
  animation: opsIndvLogisticsPing 2.2s ease-out infinite !important
}

.ops-indv-logistics .opl-truck {
  position: absolute;
  top: calc(56% - 21px);
  left: 4%;
  font-size: 20px;
  color: var(--ops-brand, #e05320);
  filter: drop-shadow(0 4px 8px rgba(224, 83, 32, .5));
  animation: opsIndvLogisticsTruck 8s ease-in-out infinite !important
}

.ops-indv-logistics .opl-truck i {
  display: block;
  animation: opsIndvLogisticsBob 1.1s ease-in-out infinite !important
}

.ops-indv-logistics .opl-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase
}

.ops-indv-logistics .opl-badge .opl-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7ee0a0;
  animation: opsIndvLogisticsBlink 1.6s ease-in-out infinite !important
}

.ops-indv-logistics .opl-eta {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(224, 83, 32, .14);
  border: 1px solid rgba(224, 83, 32, .35);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ff8a5c
}

.ops-indv-logistics .opl-steps {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 2px 0
}

.ops-indv-logistics .opl-bar {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 24px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden
}

.ops-indv-logistics .opl-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ops-brand, #e05320), #ff8a5c);
  box-shadow: 0 0 10px rgba(224, 83, 32, .6);
  animation: opsIndvLogisticsFill 8s ease-in-out infinite !important
}

.ops-indv-logistics .opl-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 25%
}

.ops-indv-logistics .opl-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .16)
}

.ops-indv-logistics .opl-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  text-align: center;
  line-height: 1.25
}

.ops-indv-logistics .opl-s1 .opl-dot {
  animation: opsIndvLogisticsDot 8s ease-in-out .5s infinite !important
}

.ops-indv-logistics .opl-s2 .opl-dot {
  animation: opsIndvLogisticsDot 8s ease-in-out 2.5s infinite !important
}

.ops-indv-logistics .opl-s3 .opl-dot {
  animation: opsIndvLogisticsDot 8s ease-in-out 4.5s infinite !important
}

.ops-indv-logistics .opl-s4 .opl-dot {
  animation: opsIndvLogisticsDotDone 8s ease-in-out 6.3s infinite !important
}

.ops-indv-logistics .opl-s1 .opl-lbl {
  animation: opsIndvLogisticsLbl 8s ease-in-out .5s infinite !important
}

.ops-indv-logistics .opl-s2 .opl-lbl {
  animation: opsIndvLogisticsLbl 8s ease-in-out 2.5s infinite !important
}

.ops-indv-logistics .opl-s3 .opl-lbl {
  animation: opsIndvLogisticsLbl 8s ease-in-out 4.5s infinite !important
}

.ops-indv-logistics .opl-s4 .opl-lbl {
  animation: opsIndvLogisticsLblDone 8s ease-in-out 6.3s infinite !important
}

@keyframes opsIndvLogisticsGrid {
  from {
    background-position: 0 0, 0 0
  }

  to {
    background-position: 26px 26px, 26px 26px
  }
}

@keyframes opsIndvLogisticsDash {
  from {
    background-position: 0 0
  }

  to {
    background-position: -18px 0
  }
}

@keyframes opsIndvLogisticsTruck {
  0% {
    left: 4%;
    opacity: 0
  }

  6% {
    opacity: 1
  }

  86% {
    left: 83%;
    opacity: 1
  }

  93% {
    left: 85%;
    opacity: 0
  }

  100% {
    left: 4%;
    opacity: 0
  }
}

@keyframes opsIndvLogisticsBob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }
}

@keyframes opsIndvLogisticsWp {

  0%,
  9% {
    color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    transform: scale(.9);
    box-shadow: none
  }

  16% {
    color: #fff;
    background: var(--ops-brand, #e05320);
    border-color: var(--ops-brand, #e05320);
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(224, 83, 32, .18), 0 0 14px rgba(224, 83, 32, .6)
  }

  30% {
    color: #ff8a5c;
    background: rgba(224, 83, 32, .18);
    border-color: rgba(224, 83, 32, .5);
    transform: scale(1)
  }

  45%,
  100% {
    color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    transform: scale(.9)
  }
}

@keyframes opsIndvLogisticsPing {
  0% {
    transform: scale(.6);
    opacity: .9
  }

  100% {
    transform: scale(1.8);
    opacity: 0
  }
}

@keyframes opsIndvLogisticsBlink {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(126, 224, 160, .5)
  }

  50% {
    opacity: .4;
    box-shadow: 0 0 0 4px rgba(126, 224, 160, 0)
  }
}

@keyframes opsIndvLogisticsFill {
  0% {
    width: 4%;
    opacity: 0
  }

  4% {
    opacity: 1
  }

  86% {
    width: 100%;
    opacity: 1
  }

  96% {
    width: 100%;
    opacity: 0
  }

  100% {
    width: 4%;
    opacity: 0
  }
}

@keyframes opsIndvLogisticsDot {

  0%,
  7% {
    color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .16);
    transform: scale(1);
    box-shadow: none
  }

  14% {
    color: #fff;
    background: var(--ops-brand, #e05320);
    border-color: var(--ops-brand, #e05320);
    transform: scale(1.16);
    box-shadow: 0 0 0 4px rgba(224, 83, 32, .16), 0 0 16px rgba(224, 83, 32, .55)
  }

  28% {
    color: #ff8a5c;
    background: rgba(224, 83, 32, .16);
    border-color: rgba(224, 83, 32, .55);
    transform: scale(1.04)
  }

  44%,
  100% {
    color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .16);
    transform: scale(1)
  }
}

@keyframes opsIndvLogisticsDotDone {

  0%,
  7% {
    color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .16);
    transform: scale(1);
    box-shadow: none
  }

  14% {
    color: #0f1216;
    background: #7ee0a0;
    border-color: #7ee0a0;
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(126, 224, 160, .16), 0 0 16px rgba(126, 224, 160, .55)
  }

  30% {
    color: #7ee0a0;
    background: rgba(126, 224, 160, .16);
    border-color: rgba(126, 224, 160, .55);
    transform: scale(1.05)
  }

  48%,
  100% {
    color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .16);
    transform: scale(1)
  }
}

@keyframes opsIndvLogisticsLbl {

  0%,
  9% {
    color: rgba(255, 255, 255, .45)
  }

  16% {
    color: #fff
  }

  30% {
    color: rgba(255, 255, 255, .8)
  }

  46%,
  100% {
    color: rgba(255, 255, 255, .45)
  }
}

@keyframes opsIndvLogisticsLblDone {

  0%,
  9% {
    color: rgba(255, 255, 255, .45)
  }

  16% {
    color: #7ee0a0
  }

  34% {
    color: rgba(126, 224, 160, .8)
  }

  50%,
  100% {
    color: rgba(255, 255, 255, .45)
  }
}

/* --- jewellery --- */
.ops-indv-jewellery .opsjw-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* soft radial glow behind gem */
.ops-indv-jewellery .opsjw-halo {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 230px;
  height: 230px;
  margin: -115px 0 0 -115px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 83, 32, .42) 0%, rgba(255, 138, 92, .18) 38%, rgba(224, 83, 32, 0) 70%);
  filter: blur(6px);
  animation: opsIndvJewelleryHalo 4.6s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryHalo {

  0%,
  100% {
    transform: scale(.9);
    opacity: .55;
  }

  50% {
    transform: scale(1.12);
    opacity: .95;
  }
}

/* orbiting rings */
.ops-indv-jewellery .opsjw-ring {
  position: absolute;
  top: 44%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
}

.ops-indv-jewellery .opsjw-ring1 {
  width: 184px;
  height: 184px;
  margin: -92px 0 0 -92px;
  border-top-color: rgba(255, 138, 92, .75);
  border-right-color: rgba(224, 83, 32, .35);
  animation: opsIndvJewellerySpin 9s linear infinite !important;
}

.ops-indv-jewellery .opsjw-ring2 {
  width: 236px;
  height: 236px;
  margin: -118px 0 0 -118px;
  border-bottom-color: rgba(192, 132, 252, .5);
  border-left-color: rgba(110, 168, 255, .4);
  animation: opsIndvJewellerySpinRev 13s linear infinite !important;
}

@keyframes opsIndvJewellerySpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes opsIndvJewellerySpinRev {
  to {
    transform: rotate(-360deg);
  }
}

/* the gem */
.ops-indv-jewellery .opsjw-gem {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 96px;
  height: 104px;
  margin: -52px 0 0 -48px;
  transform-style: preserve-3d;
  animation: opsIndvJewelleryFloat 5.2s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-9px) rotate(3deg);
  }
}

/* crown (top faceted part) */
.ops-indv-jewellery .opsjw-gem-crown {
  position: absolute;
  top: 0;
  left: 8px;
  width: 80px;
  height: 54px;
  clip-path: polygon(50% 0, 82% 0, 100% 44%, 50% 100%, 0 44%, 18% 0);
  background: linear-gradient(160deg, #ffd7c4 0%, var(--ops-brand, #e05320) 46%, #ff8a5c 100%);
  overflow: hidden;
  animation: opsIndvJewelleryHue 6s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryHue {

  0%,
  100% {
    filter: brightness(1) saturate(1);
  }

  50% {
    filter: brightness(1.25) saturate(1.2);
  }
}

/* facet plates catching light at different times */
.ops-indv-jewellery .opsjw-facet {
  position: absolute;
  display: block;
  animation: opsIndvJewelleryFacet 3.4s ease-in-out infinite !important;
}

.ops-indv-jewellery .opsjw-f1 {
  top: 0;
  left: 0;
  width: 40px;
  height: 54px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 60%);
  animation-delay: 0s !important;
}

.ops-indv-jewellery .opsjw-f2 {
  top: 0;
  right: 0;
  width: 40px;
  height: 54px;
  background: linear-gradient(240deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%);
  animation-delay: .7s !important;
}

.ops-indv-jewellery .opsjw-f3 {
  top: 0;
  left: 24px;
  width: 32px;
  height: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  animation-delay: 1.4s !important;
}

.ops-indv-jewellery .opsjw-f4 {
  bottom: 0;
  left: 20px;
  width: 40px;
  height: 30px;
  background: linear-gradient(0deg, rgba(255, 214, 196, .7), rgba(255, 255, 255, 0));
  animation-delay: 2.1s !important;
}

@keyframes opsIndvJewelleryFacet {

  0%,
  100% {
    opacity: .12;
  }

  45% {
    opacity: .9;
  }
}

/* diagonal shine sweep across the crown */
.ops-indv-jewellery .opsjw-shine {
  position: absolute;
  top: -20%;
  left: -120%;
  width: 70%;
  height: 140%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  animation: opsIndvJewelleryScan 3.6s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryScan {
  0% {
    left: -120%;
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  55% {
    left: 150%;
    opacity: .15;
  }

  100% {
    left: 150%;
    opacity: 0;
  }
}

/* pavilion (bottom point) via the gem icon */
.ops-indv-jewellery .opsjw-gem-pav {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 56px;
  line-height: 1;
  color: var(--ops-brand, #e05320);
  text-shadow: 0 6px 18px rgba(224, 83, 32, .55), 0 0 10px rgba(255, 138, 92, .6);
  animation: opsIndvJewelleryGlow 3.6s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryGlow {

  0%,
  100% {
    filter: brightness(1);
    text-shadow: 0 6px 18px rgba(224, 83, 32, .5), 0 0 8px rgba(255, 138, 92, .5);
  }

  50% {
    filter: brightness(1.4);
    text-shadow: 0 6px 22px rgba(224, 83, 32, .8), 0 0 18px rgba(255, 255, 255, .7);
  }
}

/* twinkling sparkles */
.ops-indv-jewellery .opsjw-spark {
  position: absolute;
  color: #fff;
  font-size: 10px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .85));
  animation: opsIndvJewelleryTwinkle 2.6s ease-in-out infinite !important;
}

.ops-indv-jewellery .opsjw-spark i {
  display: block;
}

.ops-indv-jewellery .opsjw-s1 {
  top: 24%;
  left: 32%;
  font-size: 12px;
  animation-delay: 0s !important;
}

.ops-indv-jewellery .opsjw-s2 {
  top: 30%;
  right: 30%;
  color: #ff8a5c;
  animation-delay: .5s !important;
}

.ops-indv-jewellery .opsjw-s3 {
  top: 58%;
  left: 26%;
  font-size: 8px;
  animation-delay: 1s !important;
}

.ops-indv-jewellery .opsjw-s4 {
  top: 52%;
  right: 27%;
  font-size: 13px;
  color: #ffd7c4;
  animation-delay: 1.5s !important;
}

.ops-indv-jewellery .opsjw-s5 {
  top: 18%;
  left: 52%;
  font-size: 9px;
  animation-delay: .8s !important;
}

.ops-indv-jewellery .opsjw-s6 {
  top: 63%;
  right: 44%;
  color: #c084fc;
  font-size: 11px;
  animation-delay: 1.9s !important;
}

@keyframes opsIndvJewelleryTwinkle {

  0%,
  100% {
    transform: scale(.3) rotate(0deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.15) rotate(90deg);
    opacity: 1;
  }
}

/* product cards floating on the sides */
.ops-indv-jewellery .opsjw-card {
  position: absolute;
  width: 120px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

.ops-indv-jewellery .opsjw-cardA {
  top: 20%;
  left: 5%;
  animation: opsIndvJewelleryDriftA 6s ease-in-out infinite !important;
}

.ops-indv-jewellery .opsjw-cardB {
  bottom: 18%;
  right: 5%;
  animation: opsIndvJewelleryDriftB 6.8s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryDriftA {

  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
    opacity: .85;
  }

  50% {
    transform: translateY(-12px) rotate(-3deg);
    opacity: 1;
  }
}

@keyframes opsIndvJewelleryDriftB {

  0%,
  100% {
    transform: translateY(0) rotate(3deg);
    opacity: .85;
  }

  50% {
    transform: translateY(10px) rotate(3deg);
    opacity: 1;
  }
}

.ops-indv-jewellery .opsjw-card-ic {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  box-shadow: 0 0 12px rgba(224, 83, 32, .5);
  animation: opsIndvJewelleryPulseIc 3s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryPulseIc {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(224, 83, 32, .4);
  }

  50% {
    box-shadow: 0 0 16px rgba(255, 138, 92, .85);
  }
}

.ops-indv-jewellery .opsjw-card-lines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ops-indv-jewellery .opsjw-ln {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
  background-size: 200% 100%;
  animation: opsIndvJewelleryShimmer 2.8s linear infinite !important;
}

.ops-indv-jewellery .opsjw-ln-lg {
  width: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .18) 100%);
}

.ops-indv-jewellery .opsjw-ln-sm {
  width: 60%;
  background-image: linear-gradient(90deg, rgba(255, 138, 92, .25) 0%, rgba(255, 138, 92, .7) 50%, rgba(255, 138, 92, .25) 100%);
  animation-delay: .6s !important;
}

@keyframes opsIndvJewelleryShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.ops-indv-jewellery .opsjw-card-price {
  flex: 0 0 auto;
  font-size: 11px;
  color: #ff8a5c;
  animation: opsIndvJewelleryBeat 2.4s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryBeat {

  0%,
  100% {
    transform: scale(1);
    opacity: .8;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

/* reflective pedestal under the gem */
.ops-indv-jewellery .opsjw-pedestal {
  position: absolute;
  top: 63%;
  left: 50%;
  width: 150px;
  height: 26px;
  margin-left: -75px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 138, 92, .32) 0%, rgba(224, 83, 32, 0) 70%);
  filter: blur(3px);
  animation: opsIndvJewelleryPed 5.2s ease-in-out infinite !important;
}

@keyframes opsIndvJewelleryPed {

  0%,
  100% {
    transform: scaleX(.85);
    opacity: .5;
  }

  50% {
    transform: scaleX(1.05);
    opacity: .85;
  }
}

/* ============================================================================
   AI & GENERATIVE AI section — animated right-side visual (neural core + gen chat)
   Section is dark, so this is a light-on-dark bordered panel. Excluded from the
   home blanket animation-kill via the :not(.ops-genai *) clause above.
   ============================================================================ */
.ops-genai {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ops-genai::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 35%, transparent 80%);
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 35%, transparent 80%);
}

.ops-genai>* {
  position: relative;
  z-index: 1;
}

/* head */
.ops-genai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ops-ai-section .ops-genai .ops-genai-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: #fff !important;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
}

.ops-genai-badge i {
  font-size: 11px;
}

.ops-ai-section .ops-genai .ops-genai-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, .5) !important;
}

.ops-genai-livedot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee0a0;
  animation: opsGenLive 1.6s ease-out infinite;
}

@keyframes opsGenLive {
  0% {
    box-shadow: 0 0 0 0 rgba(126, 224, 160, .6);
  }

  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(126, 224, 160, 0);
  }
}

/* neural net */
.ops-genai-net {
  position: relative;
  height: 168px;
}

.ops-genai-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #fff;
  z-index: 5;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
  box-shadow: 0 8px 28px rgba(var(--ops-brand-rgb), .6);
  animation: opsGenCore 2.4s ease-in-out infinite;
}

@keyframes opsGenCore {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.ops-genai-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2px solid rgba(var(--ops-brand-rgb), .5);
  z-index: 4;
  animation: opsGenRing 2.6s ease-out infinite;
}

.ops-genai-ring.r2 {
  animation-delay: 1.3s;
}

@keyframes opsGenRing {
  0% {
    transform: scale(.8);
    opacity: .7;
  }

  100% {
    transform: scale(2.7);
    opacity: 0;
  }
}

.ops-genai-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 2px;
  transform-origin: left center;
  transform: rotate(var(--a));
  z-index: 2;
}

.ops-genai-wire {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--ops-brand-rgb), .1), rgba(var(--ops-brand-rgb), .5));
}

.ops-genai-flow {
  position: absolute;
  top: 50%;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px 2px rgba(var(--ops-brand-rgb), .95);
  animation: opsGenFlow 2.4s linear infinite;
  animation-delay: var(--d, 0s);
}

@keyframes opsGenFlow {
  0% {
    left: 92%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    left: -4%;
    opacity: 0;
  }
}

.ops-genai-node {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
  z-index: 3;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  animation: opsGenNode 2.4s ease-in-out infinite;
}

.ops-genai-node i {
  color: var(--ops-brand, #e05320);
}

.ops-genai-spoke:nth-child(2) .ops-genai-node {
  animation-delay: .4s;
}

.ops-genai-spoke:nth-child(3) .ops-genai-node {
  animation-delay: .8s;
}

.ops-genai-spoke:nth-child(4) .ops-genai-node {
  animation-delay: 1.2s;
}

.ops-genai-spoke:nth-child(5) .ops-genai-node {
  animation-delay: 1.6s;
}

.ops-genai-spoke:nth-child(6) .ops-genai-node {
  animation-delay: 2s;
}

@keyframes opsGenNode {

  0%,
  100% {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
  }

  50% {
    border-color: rgba(var(--ops-brand-rgb), .55);
    background: rgba(var(--ops-brand-rgb), .16);
  }
}

/* generative chat */
.ops-genai-chat {
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ops-ai-section .ops-genai .ops-genai-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6) !important;
}

.ops-genai-prompt i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: grid;
  place-items: center;
  font-size: 9px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, .7);
}

.ops-genai-answer {
  display: flex;
  gap: 10px;
}

.ops-genai-ava {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--ops-brand, #e05320), #ff8a5c);
}

.ops-genai-gen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 5px;
  min-width: 0;
}

.ops-genai-txt {
  height: 8px;
  border-radius: 5px;
  width: 0;
  background: linear-gradient(90deg, rgba(var(--ops-brand-rgb), .55), rgba(255, 255, 255, .16));
  animation: opsGenType 6s steps(26) infinite;
  animation-delay: calc(var(--i) * .55s);
}

.ops-genai-gen .ops-genai-txt:nth-child(1) {
  --w: 100%;
}

.ops-genai-gen .ops-genai-txt:nth-child(2) {
  --w: 84%;
}

.ops-genai-gen .ops-genai-txt:nth-child(3) {
  --w: 56%;
}

@keyframes opsGenType {
  0% {
    width: 0;
  }

  20% {
    width: var(--w, 100%);
  }

  84% {
    width: var(--w, 100%);
  }

  95%,
  100% {
    width: 0;
  }
}

.ops-ai-section .ops-genai .ops-genai-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, .45) !important;
}

.ops-genai-foot i {
  color: var(--ops-brand, #e05320);
}

.ops-ai-section .ops-genai .ops-genai-foot b {
  color: #fff !important;
}

.ops-genai-tok {
  color: rgba(255, 255, 255, .7) !important;
}

/* show on mobile too (section previously hid the visual under 575px) */
@media (max-width: 575px) {
  .ops-ai-section .ops-ai-visual {
    display: flex !important;
  }

  .ops-genai {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-genai-flow {
    display: none;
  }

  .ops-genai-txt {
    width: var(--w, 100%);
  }
}

/* =============================================================================
   SERVICE DETAIL — bespoke animated visuals (per-page, in the Service Overview)
   Shared shell (.ops-svc-visual) + Android app "live build" phone (.ops-android-visual).
   Pure CSS/JS loops; service pages have NO blanket animation-kill so these run natively.
   ============================================================================= */
.ops-svc-visual {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  padding: 26px 0 30px;
  text-align: left;
  vertical-align: top;
}

/* Floating tech chips around the device */
.ops-av-chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f1117;
  background: #ffffff;
  border: 1px solid #eceef3;
  border-radius: 100px;
  box-shadow: 0 12px 30px rgba(15, 17, 23, .12);
  white-space: nowrap;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-av-chip i {
  color: #3ddc84;
  font-size: 13px;
}

.ops-av-chip-2 i {
  color: #e05320;
}

.ops-av-chip-3 i {
  color: #7c5cff;
}

.ops-av-chip-1 {
  top: 40px;
  left: -6px;
  animation-delay: 0s;
}

.ops-av-chip-2 {
  top: 168px;
  right: -10px;
  animation-delay: .9s;
}

.ops-av-chip-3 {
  bottom: 96px;
  left: -2px;
  animation-delay: 1.8s;
}

@keyframes opsAvFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-11px);
  }
}

/* Phone frame */
.ops-phone {
  position: relative;
  z-index: 3;
  width: min(252px, 72vw);
  aspect-ratio: 250 / 512;
  margin: 0 auto;
  padding: 12px 11px;
  background: linear-gradient(160deg, #191c24, #0d0f15);
  border-radius: 34px;
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32), inset 0 0 0 2px rgba(255, 255, 255, .04);
}

.ops-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 20px;
  background: #0d0f15;
  border-radius: 0 0 14px 14px;
  z-index: 5;
}

.ops-phone-screen {
  position: relative;
  height: 100%;
  background: #f5f6fa;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ops-ph-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  color: #0f1117;
}

.ops-ph-sys {
  display: inline-flex;
  gap: 5px;
}

.ops-ph-sys i {
  font-size: 9px;
}

.ops-ph-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(135deg, #e05320, #f0803f);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ops-ph-appbar i {
  font-size: 12px;
  opacity: .92;
}

.ops-ph-body {
  position: relative;
  flex: 1;
  padding: 12px 12px 6px;
}

/* One-time staggered entrance, then the data STAYS visible (real content, not skeletons) */
.ops-ph-body>* {
  opacity: 0;
  animation: opsPhIn .55s ease-out forwards;
  animation-delay: calc(var(--s) * .12s + .25s);
}

@keyframes opsPhIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hero KPI card with a live growing bar chart */
.ops-ph-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 13px;
  margin-bottom: 13px;
  border-radius: 14px;
  background: linear-gradient(135deg, #e05320, #f2854a);
  box-shadow: 0 10px 22px rgba(224, 83, 32, .28);
}

.ops-ph-hero-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ops-ph-hero-cap {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .02em;
}

.ops-ph-hero-val {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.ops-ph-hero-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
}

.ops-ph-hero-trend i {
  font-size: 9px;
}

.ops-ph-hero-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.ops-ph-hero-chart span {
  width: 6px;
  height: var(--h);
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  transform-origin: bottom;
  animation: opsPhBar 2.8s ease-in-out infinite;
}

.ops-ph-hero-chart span:nth-child(2) {
  animation-delay: .25s;
}

.ops-ph-hero-chart span:nth-child(3) {
  animation-delay: .5s;
}

.ops-ph-hero-chart span:nth-child(4) {
  animation-delay: .75s;
}

.ops-ph-hero-chart span:nth-child(5) {
  animation-delay: 1s;
}

@keyframes opsPhBar {

  0%,
  100% {
    transform: scaleY(.5);
  }

  50% {
    transform: scaleY(1);
  }
}

/* Section label */
.ops-ph-sec {
  display: block;
  margin: 0 2px 9px;
  font-size: 10px;
  font-weight: 700;
  color: #8b90a0;
}

/* Activity rows — real data with icons + amounts */
.ops-ph-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ops-ph-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.ops-ph-ic-g {
  background: linear-gradient(135deg, #3ddc84, #1fb865);
}

.ops-ph-ic-b {
  background: linear-gradient(135deg, #4f8cff, #2f6bd8);
}

.ops-ph-ic-p {
  background: linear-gradient(135deg, #a06bff, #7c47e6);
}

.ops-ph-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ops-ph-tx b {
  font-size: 10.5px;
  font-weight: 700;
  color: #1a1d26;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-ph-tx i {
  font-size: 9px;
  font-style: normal;
  color: #9aa0b0;
}

.ops-ph-amt {
  font-size: 10.5px;
  font-weight: 800;
  color: #1fb865;
  flex-shrink: 0;
}

/* Floating action button */
.ops-ph-fab {
  position: absolute;
  right: 14px;
  bottom: 52px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(135deg, #3ddc84, #1fb865);
  box-shadow: 0 8px 20px rgba(31, 184, 101, .45);
  animation: opsPhFab 2.4s ease-in-out infinite;
}

@keyframes opsPhFab {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(31, 184, 101, .45);
  }

  50% {
    transform: scale(1.09);
    box-shadow: 0 10px 26px rgba(31, 184, 101, .6);
  }
}

/* Bottom navigation with a moving indicator */
.ops-ph-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 11px 6px 13px;
  background: #fff;
  border-top: 1px solid #eceef3;
  color: #b7bcc8;
  font-size: 13px;
}

.ops-ph-nav i {
  position: relative;
  z-index: 2;
  animation: opsPhNav 6s steps(1) infinite;
}

.ops-ph-nav i:nth-child(1) {
  animation-delay: 0s;
}

.ops-ph-nav i:nth-child(2) {
  animation-delay: 1.5s;
}

.ops-ph-nav i:nth-child(3) {
  animation-delay: 3s;
}

.ops-ph-nav i:nth-child(4) {
  animation-delay: 4.5s;
}

@keyframes opsPhNav {

  0%,
  25% {
    color: #e05320;
    transform: translateY(-1px);
  }

  25.01%,
  100% {
    color: #b7bcc8;
    transform: translateY(0);
  }
}

.ops-ph-nav-ind {
  position: absolute;
  top: 6px;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(224, 83, 32, .12);
  left: 12.5%;
  transform: translateX(-50%);
  animation: opsPhNavInd 6s ease-in-out infinite;
}

@keyframes opsPhNavInd {

  0%,
  20% {
    left: 12.5%;
  }

  25%,
  45% {
    left: 37.5%;
  }

  50%,
  70% {
    left: 62.5%;
  }

  75%,
  95% {
    left: 87.5%;
  }

  100% {
    left: 12.5%;
  }
}

/* Build / deploy toast */
.ops-av-toast {
  position: absolute;
  left: 50%;
  bottom: -4px;
  z-index: 6;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 700;
  color: #0f1117;
  background: #fff;
  border: 1px solid #eceef3;
  border-radius: 100px;
  box-shadow: 0 14px 34px rgba(15, 17, 23, .16);
  white-space: nowrap;
  animation: opsAvToast 6s ease-in-out infinite;
}

.ops-av-toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
  animation: opsAvToastDot 1.5s ease-out infinite;
}

@keyframes opsAvToastDot {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
  }

  100% {
    box-shadow: 0 0 0 8px rgba(61, 220, 132, 0);
  }
}

@keyframes opsAvToast {

  0%,
  8% {
    opacity: 0;
    transform: translate(-50%, 12px);
  }

  16%,
  84% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  94%,
  100% {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops-svc-visual *,
  .ops-svc-visual {
    animation: none !important;
  }

  .ops-svc-visual .ops-ph-body>* {
    opacity: 1 !important;
  }
}

@media (max-width: 991px) {
  .ops-svc-visual {
    margin-top: 30px;
  }
}

/* ==========================================================================
   WordPress Editor Animation (.ops-wpd-visual)
   ========================================================================== */
.ops-wpd-visual {
  max-width: 440px;
  margin-inline: auto;
  padding-top: 10px;
}

.ops-wpd {
  position: relative;
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(15, 17, 23, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #1e1e1e;
  height: 340px;
  display: flex;
  flex-direction: column;
}

.ops-wpd-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e0e4eb;
  font-size: 13px;
  font-weight: 500;
}

.ops-wpd-file i {
  margin-right: 6px;
}

.ops-wpd-status-wrap {
  display: flex;
  align-items: center;
  position: relative;
  width: 60px;
  height: 20px;
}

.ops-wpd-status {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  right: 0;
  top: 0;
}

.ops-wpd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
}

.ops-wpd-dot-live {
  background: #3ddc84;
}

.ops-wpd-status-draft {
  animation: opsWpdDraft 6s infinite;
}

.ops-wpd-status-live {
  opacity: 0;
  animation: opsWpdLive 6s infinite;
}

.ops-wpd-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f0f0f1;
  border-bottom: 1px solid #e0e4eb;
}

.ops-wpd-tool {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #fff;
  color: #1e1e1e;
  font-size: 13px;
  border: 1px solid #e0e4eb;
}

.ops-wpd-plus {
  background: #1e1e1e;
  color: #fff;
  border-color: #1e1e1e;
}

.ops-wpd-spacer {
  flex-grow: 1;
}

.ops-wpd-plug {
  position: relative;
}

.ops-wpd-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e05320;
  color: #fff;
  font-size: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.ops-wpd-publish {
  background: #007cba;
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  animation: opsWpdBtn 6s infinite;
}

.ops-wpd-stage {
  display: flex;
  flex-grow: 1;
  background: #f0f0f1;
  overflow: hidden;
}

.ops-wpd-canvas {
  flex-grow: 1;
  padding: 24px;
  background: #fff;
  margin: 12px;
  border: 1px solid #e0e4eb;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.ops-wpd-panel {
  width: 130px;
  background: #fff;
  border-left: 1px solid #e0e4eb;
  padding: 12px;
  font-size: 11px;
}

.ops-wpd-ptabs {
  display: flex;
  border-bottom: 1px solid #e0e4eb;
  margin-bottom: 12px;
}

.ops-wpd-ptab {
  flex: 1;
  text-align: center;
  padding-bottom: 6px;
  color: #757575;
  border-bottom: 2px solid transparent;
}

.ops-wpd-ptab-on {
  color: #1e1e1e;
  border-color: #1e1e1e;
  font-weight: 500;
}

.ops-wpd-prow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: #1e1e1e;
}

.ops-wpd-prow i {
  margin-right: 6px;
  color: #757575;
}

.ops-wpd-slider {
  height: 4px;
  background: #e0e4eb;
  border-radius: 2px;
  margin-bottom: 16px;
  position: relative;
}

.ops-wpd-knob {
  position: absolute;
  left: 40%;
  top: -3px;
  width: 10px;
  height: 10px;
  background: #1e1e1e;
  border-radius: 50%;
}

.ops-wpd-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.ops-wpd-swatches span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #e0e4eb;
}

.ops-wpd-swatches span:nth-child(1) {
  background: #e05320;
}

.ops-wpd-swatches span:nth-child(2) {
  background: #1e1e1e;
}

.ops-wpd-swatches span:nth-child(3) {
  background: #007cba;
}

.ops-wpd-swatches span:nth-child(4) {
  background: #fff;
}

.ops-wpd-switch {
  width: 24px;
  height: 12px;
  border-radius: 6px;
  background: #007cba;
  position: relative;
}

.ops-wpd-switch::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}

.ops-wpd-b-head {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
}

.ops-wpd-htext {
  position: relative;
}

.ops-wpd-htext::after {
  content: '|';
  position: absolute;
  right: -8px;
  top: -1px;
  animation: opsWpdBlink 1s infinite;
}

.ops-wpd-b-para {
  margin-bottom: 16px;
}

.ops-wpd-line {
  height: 6px;
  background: #e0e4eb;
  border-radius: 3px;
  margin-bottom: 8px;
  width: 100%;
  display: block;
}

.ops-wpd-line-2 {
  width: 60%;
}

.ops-wpd-b-img {
  margin-bottom: 16px;
}

.ops-wpd-imgbox {
  height: 50px;
  background: #f0f0f1;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #a1a5b0;
  border: 1px dashed #c3c4c7;
}

.ops-wpd-b-btn {
  display: inline-block;
}

.ops-wpd-cta {
  background: #e05320;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.ops-wpd-footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 11px;
  color: #757575;
  border-top: 1px solid #e0e4eb;
  background: #fff;
}

.ops-wpd-fsave i {
  color: #3ddc84;
}

.ops-wpd-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: #1e1e1e;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: opsWpdCursor 6s infinite ease-in-out;
}

.ops-wpd-toast {
  position: absolute;
  bottom: 40px;
  left: 20px;
  background: #1e1e1e;
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: opsWpdToast 6s infinite;
  opacity: 0;
  pointer-events: none;
}

.ops-wpd-toast i {
  color: #3ddc84;
}

.ops-wpd-toast-link {
  text-decoration: underline;
  margin-left: 12px;
}

@keyframes opsWpdBlink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes opsWpdCursor {

  0%,
  15% {
    transform: translate(150px, 140px);
  }

  25%,
  35% {
    transform: translate(70px, 170px);
  }

  50%,
  60% {
    transform: translate(320px, 50px);
  }

  75%,
  100% {
    transform: translate(150px, 140px);
  }
}

@keyframes opsWpdBtn {

  0%,
  45% {
    background: #007cba;
  }

  50%,
  65% {
    background: #005a87;
  }

  70%,
  100% {
    background: #007cba;
  }
}

@keyframes opsWpdDraft {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

@keyframes opsWpdLive {

  0%,
  50% {
    opacity: 0;
  }

  51%,
  100% {
    opacity: 1;
  }
}

@keyframes opsWpdToast {

  0%,
  55% {
    opacity: 0;
    transform: translateY(10px);
  }

  60%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }

  85%,
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (max-width: 575px) {
  .ops-wpd-panel {
    display: none;
  }
}

/* ==========================================================================
   Static Web Development Visual (.ops-stcw-visual)
   ========================================================================== */
.ops-stcw-visual {
  max-width: 440px;
  margin-inline: auto;
  padding-top: 10px;
}

.ops-stcw {
  position: relative;
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(15, 17, 23, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e1e1e;
  height: 350px;
  display: flex;
  flex-direction: column;
}

.ops-stcw-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e4eb;
  font-size: 13px;
}

.ops-stcw-dots {
  display: flex;
  gap: 6px;
}

.ops-stcw-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0e4eb;
}

.ops-stcw-dots i:nth-child(1) {
  background: #ff5f56;
}

.ops-stcw-dots i:nth-child(2) {
  background: #ffbd2e;
}

.ops-stcw-dots i:nth-child(3) {
  background: #27c93f;
}

.ops-stcw-url {
  background: #fff;
  border: 1px solid #e0e4eb;
  border-radius: 16px;
  padding: 4px 20px;
  font-size: 11px;
  color: #757575;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ops-stcw-live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #3ddc84;
  font-weight: 600;
}

.ops-stcw-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsStcwPulse 2s infinite;
}

.ops-stcw-stage {
  flex-grow: 1;
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ops-stcw-scan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to bottom, rgba(61, 220, 132, 0.3) 0%, rgba(61, 220, 132, 0) 100%);
  animation: opsStcwScan 4s infinite ease-in-out;
  border-top: 1px solid rgba(61, 220, 132, 0.6);
}

.ops-stcw-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.ops-stcw-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 12px;
}

.ops-stcw-gauge {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.ops-stcw-track {
  fill: none;
  stroke: #f0f0f1;
  stroke-width: 8;
}

.ops-stcw-arc {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  animation: opsStcwFill 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.ops-stcw-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.ops-stcw-num-win {
  height: 36px;
  overflow: hidden;
  font-size: 32px;
  font-weight: 700;
  color: #3ddc84;
  line-height: 36px;
  text-align: center;
}

.ops-stcw-num-strip {
  display: flex;
  flex-direction: column;
  animation: opsStcwCount 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.ops-stcw-num-strip span {
  height: 36px;
  display: block;
}

.ops-stcw-glabel {
  font-size: 13px;
  font-weight: 600;
  color: #1e1e1e;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ops-stcw-glabel i {
  color: #3ddc84;
  font-size: 14px;
}

.ops-stcw-metrics {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  z-index: 1;
}

.ops-stcw-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.ops-stcw-mk {
  width: 30px;
  font-weight: 600;
  color: #757575;
}

.ops-stcw-mb {
  flex-grow: 1;
  height: 6px;
  background: #f0f0f1;
  border-radius: 3px;
  overflow: hidden;
}

.ops-stcw-mb i {
  display: block;
  height: 100%;
  background: #3ddc84;
  border-radius: 3px;
  transform-origin: left;
  transform: scaleX(0);
}

.ops-stcw-m1 .ops-stcw-mb i {
  animation: opsStcwBar1 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.ops-stcw-m2 .ops-stcw-mb i {
  animation: opsStcwBar2 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.1s;
}

.ops-stcw-m3 .ops-stcw-mb i {
  animation: opsStcwBar3 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 0.2s;
}

.ops-stcw-mv {
  width: 30px;
  text-align: right;
  font-weight: 600;
  color: #1e1e1e;
  opacity: 0;
  animation: opsStcwFade 4s infinite;
}

.ops-stcw-toast {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e1e1e;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  animation: opsStcwToast 4s infinite;
}

.ops-stcw-toast i {
  color: #3ddc84;
}

.ops-stcw-ping {
  background: #333;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  color: #3ddc84;
}

.ops-stcw-files {
  display: flex;
  background: #f8f9fa;
  border-top: 1px solid #e0e4eb;
}

.ops-stcw-file {
  flex: 1;
  padding: 12px 10px;
  font-size: 11px;
  color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid #e0e4eb;
}

.ops-stcw-file:last-child {
  border-right: none;
}

.ops-stcw-file i {
  font-size: 14px;
  color: #007cba;
}

.ops-stcw-file b {
  color: #757575;
  font-weight: 400;
  font-size: 10px;
  background: #fff;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #e0e4eb;
}

@keyframes opsStcwPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

@keyframes opsStcwScan {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    transform: translateY(220px);
    opacity: 1;
  }

  60% {
    opacity: 0;
  }
}

@keyframes opsStcwFill {

  0%,
  20% {
    stroke-dashoffset: 326.7;
  }

  60%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes opsStcwCount {

  0%,
  20% {
    transform: translateY(0);
  }

  60%,
  100% {
    transform: translateY(-360px);
  }
}

@keyframes opsStcwBar1 {

  0%,
  20% {
    transform: scaleX(0);
  }

  60%,
  100% {
    transform: scaleX(0.15);
  }
}

@keyframes opsStcwBar2 {

  0%,
  20% {
    transform: scaleX(0);
  }

  60%,
  100% {
    transform: scaleX(0.25);
  }
}

@keyframes opsStcwBar3 {

  0%,
  20% {
    transform: scaleX(0);
  }

  60%,
  100% {
    transform: scaleX(0.05);
  }
}

@keyframes opsStcwFade {

  0%,
  40% {
    opacity: 0;
  }

  60%,
  100% {
    opacity: 1;
  }
}

@keyframes opsStcwToast {

  0%,
  65% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  75%,
  90% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* ==========================================================================
   Classified Web Development Visual (.ops-clsf-visual)
   ========================================================================== */
.ops-clsf-visual {
  max-width: 440px;
  margin-inline: auto;
  padding-top: 10px;
}

.ops-clsf {
  position: relative;
  background: #f4f6f8;
  border: 1px solid #e0e4eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(15, 17, 23, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e1e1e;
  height: 380px;
  display: flex;
  flex-direction: column;
}

.ops-clsf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e0e4eb;
  font-size: 13px;
  font-weight: 500;
}

.ops-clsf-file i {
  color: #007cba;
  margin-right: 6px;
}

.ops-clsf-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #3ddc84;
  font-size: 11px;
}

.ops-clsf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsClsfPulse 2s infinite;
}

.ops-clsf-stage {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.ops-clsf-searchrow {
  display: flex;
  gap: 8px;
}

.ops-clsf-search {
  flex-grow: 1;
  background: #fff;
  border: 1px solid #e0e4eb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #757575;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ops-clsf-caret::after {
  content: '';
  display: block;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #757575;
}

.ops-clsf-post {
  background: #e05320;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ops-clsf-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ops-clsf-cats::-webkit-scrollbar {
  display: none;
}

.ops-clsf-cat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e0e4eb;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  color: #757575;
}

.ops-clsf-cat-on {
  background: #1e1e1e;
  color: #fff;
  border-color: #1e1e1e;
}

.ops-clsf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-grow: 1;
}

.ops-clsf-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e0e4eb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: opsClsfPop 4s infinite ease-in-out;
}

.ops-clsf-c2 {
  animation-delay: 0.2s;
}

.ops-clsf-c3 {
  animation-delay: 0.4s;
}

.ops-clsf-c4 {
  animation-delay: 0.6s;
}

.ops-clsf-thumb {
  height: 70px;
  background: #e0e4eb;
  position: relative;
  padding: 6px;
  display: flex;
  justify-content: space-between;
}

.ops-clsf-t1 {
  background: linear-gradient(45deg, #ffc107, #ff9800);
}

.ops-clsf-t2 {
  background: linear-gradient(45deg, #03a9f4, #00bcd4);
}

.ops-clsf-t3 {
  background: linear-gradient(45deg, #9c27b0, #673ab7);
}

.ops-clsf-t4 {
  background: linear-gradient(45deg, #4caf50, #8bc34a);
}

.ops-clsf-feat {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: fit-content;
}

.ops-clsf-feat i {
  color: #ffeb3b;
}

.ops-clsf-save {
  background: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #e0e4eb;
  font-size: 10px;
  margin-left: auto;
}

.ops-clsf-t1 .ops-clsf-save i {
  color: #f44336;
}

.ops-clsf-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.ops-clsf-t {
  font-size: 11px;
  font-weight: 600;
  color: #1e1e1e;
}

.ops-clsf-sub {
  font-size: 9px;
  color: #757575;
}

.ops-clsf-price {
  font-size: 12px;
  font-weight: 700;
  color: #3ddc84;
  margin-top: auto;
}

@keyframes opsClsfPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes opsClsfPop {

  0%,
  10% {
    transform: scale(0.95);
    opacity: 0;
  }

  15%,
  90% {
    transform: scale(1);
    opacity: 1;
  }

  95%,
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* ==========================================================================
   Drupal Web Development Visual (.ops-drpl-visual)
   ========================================================================== */
.ops-drpl-visual {
  max-width: 440px;
  margin-inline: auto;
  padding-top: 10px;
}

.ops-drpl {
  position: relative;
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(15, 17, 23, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e1e1e;
  height: 350px;
  display: flex;
  flex-direction: column;
}

.ops-drpl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
}

.ops-drpl-drop {
  color: #0678be;
}

.ops-drpl-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.ops-drpl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #27c93f;
  animation: opsDrplPulse 2s infinite;
}

.ops-drpl-admin {
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e0e4eb;
  font-size: 12px;
  font-weight: 500;
}

.ops-drpl-logo {
  padding: 10px 16px;
  color: #0678be;
  border-right: 1px solid #e0e4eb;
  font-size: 14px;
}

.ops-drpl-menu {
  padding: 10px 14px;
  color: #494949;
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid #e0e4eb;
}

.ops-drpl-menu-active {
  background: #f0f0f1;
  border-bottom: 2px solid #0678be;
  color: #0678be;
}

.ops-drpl-gear {
  margin-left: auto;
  border-left: 1px solid #e0e4eb;
  border-right: none;
}

.ops-drpl-stage {
  flex-grow: 1;
  display: flex;
  background: #f4f6f8;
  overflow: hidden;
}

.ops-drpl-side {
  width: 120px;
  background: #fff;
  border-right: 1px solid #e0e4eb;
  padding: 12px;
  font-size: 11px;
}

.ops-drpl-side-h {
  font-weight: 600;
  margin-bottom: 12px;
  color: #0678be;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ops-drpl-mod {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: #494949;
}

.ops-drpl-tog {
  width: 20px;
  height: 10px;
  background: #27c93f;
  border-radius: 5px;
  position: relative;
}

.ops-drpl-tog::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

.ops-drpl-tog-3 {
  background: #e0e4eb;
}

.ops-drpl-tog-3::after {
  right: auto;
  left: 2px;
}

.ops-drpl-content {
  flex-grow: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ops-drpl-block {
  background: #fff;
  border: 1px solid #e0e4eb;
  border-radius: 6px;
  padding: 10px;
}

.ops-drpl-block-h {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1e1e1e;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ops-drpl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10px;
}

.ops-drpl-tdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0e4eb;
}

.ops-drpl-tdot-a {
  background: #0678be;
}

.ops-drpl-tdot-b {
  background: #f2854a;
}

.ops-drpl-tdot-c {
  background: #27c93f;
}

.ops-drpl-tline {
  flex-grow: 1;
  height: 6px;
  background: #f0f0f1;
  border-radius: 3px;
}

.ops-drpl-pub {
  color: #27c93f;
  font-weight: 600;
  width: 45px;
  text-align: right;
}

.ops-drpl-draft {
  color: #f2854a;
}

.ops-drpl-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ops-drpl-tag {
  background: #f0f0f1;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  color: #494949;
  animation: opsDrplTag 4s infinite alternate;
}

.ops-drpl-tag:nth-child(even) {
  animation-delay: 1s;
}

.ops-drpl-foot {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background: #fff;
  border-top: 1px solid #e0e4eb;
  font-size: 10px;
  color: #757575;
}

.ops-drpl-foot-l i {
  color: #0678be;
  margin-right: 4px;
}

.ops-drpl-sync {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid #27c93f;
  border-top-color: transparent;
  border-radius: 50%;
  animation: opsDrplSpin 2s linear infinite;
  margin-right: 4px;
  vertical-align: middle;
}

.ops-drpl-toast {
  position: absolute;
  top: 90px;
  right: 20px;
  background: #1a1a1a;
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  animation: opsDrplToast 6s infinite;
}

.ops-drpl-toast i {
  color: #27c93f;
}

@keyframes opsDrplPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes opsDrplTag {

  0%,
  20% {
    background: #f0f0f1;
    color: #494949;
  }

  80%,
  100% {
    background: #0678be;
    color: #fff;
  }
}

@keyframes opsDrplSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes opsDrplToast {

  0%,
  10% {
    opacity: 0;
    transform: translateY(-10px);
  }

  15%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }

  90%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ==========================================================================
   Dynamic Web Development Visual (.ops-dynw-visual)
   ========================================================================== */
.ops-dynw-visual {
  max-width: 440px;
  margin-inline: auto;
  padding-top: 10px;
}

.ops-dynw {
  position: relative;
  background: #ffffff;
  border: 1px solid #e0e4eb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(15, 17, 23, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e1e1e;
  height: 380px;
  display: flex;
  flex-direction: column;
}

.ops-dynw-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e4eb;
  font-size: 12px;
}

.ops-dynw-dots {
  display: flex;
  gap: 6px;
}

.ops-dynw-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0e4eb;
}

.ops-dynw-dots i:nth-child(1) {
  background: #ff5f56;
}

.ops-dynw-dots i:nth-child(2) {
  background: #ffbd2e;
}

.ops-dynw-dots i:nth-child(3) {
  background: #27c93f;
}

.ops-dynw-file {
  background: #fff;
  border: 1px solid #e0e4eb;
  border-radius: 16px;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-dynw-fico {
  color: #007cba;
}

.ops-dynw-method {
  font-weight: 700;
  color: #27c93f;
  font-size: 10px;
}

.ops-dynw-path {
  color: #757575;
}

.ops-dynw-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #27c93f;
  font-weight: 600;
  font-size: 11px;
}

.ops-dynw-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #27c93f;
  animation: opsDynwPulse 1s infinite alternate;
}

.ops-dynw-stage {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.ops-dynw-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px;
  border-bottom: 1px solid #e0e4eb;
}

.ops-dynw-mlabel {
  font-size: 11px;
  color: #757575;
  display: block;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ops-dynw-count {
  font-size: 28px;
  font-weight: 700;
  color: #1e1e1e;
  display: flex;
  align-items: center;
  line-height: 1;
}

.ops-dynw-odo {
  display: inline-block;
  height: 28px;
  overflow: hidden;
  position: relative;
}

.ops-dynw-strip {
  display: flex;
  flex-direction: column;
}

.ops-dynw-strip b {
  font-weight: 700;
  height: 28px;
  display: flex;
  align-items: center;
}

.ops-dynw-strip-a {
  animation: opsDynwOdo 20s infinite steps(10);
}

.ops-dynw-strip-b {
  animation: opsDynwOdo 2s infinite steps(10);
}

.ops-dynw-trend {
  font-size: 12px;
  color: #3ddc84;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(61, 220, 132, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.ops-dynw-feed {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e4eb;
}

.ops-dynw-track {
  display: flex;
  flex-direction: column;
  animation: opsDynwScroll 10s linear infinite;
}

.ops-dynw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e4eb;
  background: #fff;
}

.ops-dynw-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.ops-dynw-av-1 {
  background: #007cba;
}

.ops-dynw-av-2 {
  background: #e05320;
}

.ops-dynw-av-3 {
  background: #27c93f;
}

.ops-dynw-av-4 {
  background: #7c5cff;
}

.ops-dynw-av-5 {
  background: #ff9800;
}

.ops-dynw-rmain {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.ops-dynw-name {
  font-size: 13px;
  font-weight: 600;
  color: #1e1e1e;
}

.ops-dynw-id {
  font-size: 10px;
  color: #757575;
}

.ops-dynw-badge {
  font-size: 9px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.ops-dynw-badge-paid {
  background: #e8f5e9;
  color: #2e7d32;
}

.ops-dynw-badge-new {
  background: #e3f2fd;
  color: #1565c0;
}

.ops-dynw-badge-synced {
  background: #f3e5f5;
  color: #6a1b9a;
}

.ops-dynw-badge-pending {
  background: #fff3e0;
  color: #ef6c00;
}

.ops-dynw-val {
  font-size: 13px;
  font-weight: 700;
  color: #1e1e1e;
}

.ops-dynw-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: #757575;
}

.ops-dynw-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ops-dynw-node i {
  font-size: 16px;
  color: #007cba;
}

.ops-dynw-wire {
  display: flex;
  gap: 4px;
  flex-grow: 1;
  justify-content: center;
}

.ops-dynw-wire .ops-dynw-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e0e4eb;
  animation: opsDynwWire 1.5s infinite linear;
  opacity: 0;
}

.ops-dynw-wire .ops-dynw-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.ops-dynw-wire .ops-dynw-dot:nth-child(3) {
  animation-delay: 0.4s;
}

.ops-dynw-wire-2 .ops-dynw-dot {
  animation-delay: 0.7s;
}

.ops-dynw-wire-2 .ops-dynw-dot:nth-child(2) {
  animation-delay: 0.9s;
}

.ops-dynw-wire-2 .ops-dynw-dot:nth-child(3) {
  animation-delay: 1.1s;
}

@keyframes opsDynwPulse {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes opsDynwOdo {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-280px);
  }
}

@keyframes opsDynwScroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-285px);
  }
}

@keyframes opsDynwWire {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    background: #3ddc84;
  }

  50% {
    opacity: 1;
    transform: translateX(0);
    background: #3ddc84;
  }

  100% {
    opacity: 0;
    transform: translateX(10px);
    background: #3ddc84;
  }
}

/* -----------------------------------------------------------------------------
   Section-eyebrow alignment fix (process heading)
   The injected "03 / Working Process" number-kicker is inline-block and was
   colliding with the vendor "Working Process" pill on the same centred line.
   Make the kicker a centred block above the title and drop the duplicate pill,
   so every section eyebrow reads the same way (01 / … 02 / … 03 / … 04 / …).
   -------------------------------------------------------------------------- */
.ops-service-main .pp-service-details-process-heading .ops-sd-section-num {
  display: block;
  margin-bottom: 14px;
  color: #f2854a !important;
}

.ops-service-main .pp-service-details-process-heading .pp-service-details-process-subtitle {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Industries panels — remove the decorative bottom accent line.
   `.ops-focus-panel` uses justify-content:space-between and is short, so the
   copy fills down to the `::after` divider (inset: auto 24px 24px) and the line
   strikes through the last line of text. Nothing sits below the line, so drop it.
   -------------------------------------------------------------------------- */
.ops-service-main .ops-focus-panel::after,
.ops-service-main .ops-drupal-focus-panel::after {
  display: none !important;
}

/* Give the industry panels a touch more breathing room now the line is gone */
.ops-service-main .ops-focus-panel {
  padding: 26px 30px !important;
}

/* =============================================================================
   SERVICE DETAIL visual — Advanced Visual Effects (.ops-vfx-visual)
   A dark video/VFX editor: preview stage with drifting particles + scan line,
   transport bar, a timeline with a sweeping playhead, and a render progress bar.
   ============================================================================= */
.ops-vfx-chip-1 {
  top: 30px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-vfx-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-vfx-chip-3 {
  bottom: 74px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-vfx-chip-1 i {
  color: #e05320;
}

.ops-vfx-chip-2 i {
  color: #6ea8ff;
}

.ops-vfx-chip-3 i {
  color: #c084fc;
}

.ops-vfx {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #14161d;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  overflow: hidden;
}

/* window bar */
.ops-vfx-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: #c7ccd8;
}

.ops-vfx-dots {
  display: inline-flex;
  gap: 5px;
}

.ops-vfx-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a3f4b;
}

.ops-vfx-dots i:nth-child(1) {
  background: #ff5f57;
}

.ops-vfx-dots i:nth-child(2) {
  background: #febc2e;
}

.ops-vfx-dots i:nth-child(3) {
  background: #28c840;
}

.ops-vfx-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.ops-vfx-title i {
  color: #e05320;
  font-size: 11px;
}

.ops-vfx-render {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #ff9d6b;
  font-weight: 700;
}

.ops-vfx-render-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e05320;
  animation: opsVfxPulse 1.3s ease-out infinite;
}

@keyframes opsVfxPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(224, 83, 32, .6);
  }

  100% {
    box-shadow: 0 0 0 7px rgba(224, 83, 32, 0);
  }
}

/* preview stage */
.ops-vfx-stage {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: linear-gradient(180deg, #2a1a3f 0%, #52264a 45%, #b0472f 100%);
}

.ops-vfx-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 28%, rgba(255, 209, 138, .9), rgba(255, 150, 80, .2) 30%, transparent 55%);
}

.ops-vfx-subject {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  font-size: 66px;
  color: rgba(10, 8, 16, .72);
  line-height: 1;
  animation: opsVfxGlow 3.4s ease-in-out infinite;
}

@keyframes opsVfxGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(255, 180, 120, .3));
  }

  50% {
    filter: drop-shadow(0 0 12px rgba(255, 180, 120, .6));
  }
}

.ops-vfx-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 224, 180, .95);
  box-shadow: 0 0 6px rgba(255, 200, 140, .9);
  animation: opsVfxRise 4.5s linear infinite;
}

.ops-vfx-particle.p1 {
  left: 18%;
  bottom: 8%;
  animation-delay: 0s;
}

.ops-vfx-particle.p2 {
  left: 34%;
  bottom: 14%;
  animation-delay: .8s;
}

.ops-vfx-particle.p3 {
  left: 52%;
  bottom: 6%;
  animation-delay: 1.6s;
}

.ops-vfx-particle.p4 {
  left: 66%;
  bottom: 18%;
  animation-delay: 2.3s;
  width: 3px;
  height: 3px;
}

.ops-vfx-particle.p5 {
  left: 78%;
  bottom: 10%;
  animation-delay: 3s;
}

.ops-vfx-particle.p6 {
  left: 44%;
  bottom: 20%;
  animation-delay: 3.7s;
  width: 3px;
  height: 3px;
}

@keyframes opsVfxRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    transform: translateY(-120px) scale(.4);
    opacity: 0;
  }
}

.ops-vfx-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  animation: opsVfxScan 3.6s ease-in-out infinite;
}

@keyframes opsVfxScan {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

.ops-vfx-badge {
  position: absolute;
  top: 8px;
  left: 10px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .4);
  border-radius: 6px;
  letter-spacing: .04em;
}

/* transport */
.ops-vfx-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.ops-vfx-tool {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  background: linear-gradient(135deg, #e05320, #f2854a);
}

.ops-vfx-time {
  font-size: 10px;
  color: #9aa0b0;
  font-variant-numeric: tabular-nums;
}

.ops-vfx-tools-right {
  margin-left: auto;
  display: inline-flex;
  gap: 12px;
  color: #6b7180;
  font-size: 11px;
}

/* timeline */
.ops-vfx-timeline {
  position: relative;
  padding: 10px 12px 12px;
  background: #14161d;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ops-vfx-playhead {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #e05320;
  box-shadow: 0 0 8px rgba(224, 83, 32, .8);
  z-index: 4;
  animation: opsVfxPlay 5s linear infinite;
}

.ops-vfx-playhead::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -4px;
  width: 10px;
  height: 8px;
  border-radius: 2px;
  background: #e05320;
}

@keyframes opsVfxPlay {
  0% {
    left: 40px;
  }

  100% {
    left: calc(100% - 16px);
  }
}

.ops-vfx-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
}

.ops-vfx-lab {
  width: 22px;
  height: 100%;
  flex-shrink: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b90a0;
  font-size: 9px;
}

.ops-vfx-clip {
  height: 100%;
  border-radius: 5px;
  position: relative;
}

.ops-vfx-clip.v1 {
  width: 42%;
  background: linear-gradient(90deg, #3b6fe0, #5a86ec);
}

.ops-vfx-clip.v2 {
  width: 30%;
  background: linear-gradient(90deg, #5a86ec, #7aa0f2);
}

.ops-vfx-clip.fx1 {
  width: 56%;
  background: linear-gradient(90deg, #e05320, #f2854a);
}

.ops-vfx-clip.a1 {
  width: 74%;
  background: repeating-linear-gradient(90deg, #2f7d54 0 3px, #37946280 3px 6px);
}

.ops-vfx-key {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #ffd36b;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
  left: 40%;
  z-index: 2;
  box-shadow: 0 0 5px rgba(255, 211, 107, .8);
  animation: opsVfxKey 2s ease-in-out infinite;
}

.ops-vfx-key.k2 {
  left: 58%;
  animation-delay: .6s;
}

@keyframes opsVfxKey {

  0%,
  100% {
    transform: translateY(-50%) rotate(45deg) scale(1);
  }

  50% {
    transform: translateY(-50%) rotate(45deg) scale(1.35);
  }
}

/* render progress */
.ops-vfx-progress {
  position: relative;
  height: 22px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
}

.ops-vfx-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 87%;
  background: linear-gradient(90deg, rgba(224, 83, 32, .28), rgba(224, 83, 32, .5));
  animation: opsVfxRender 4s ease-in-out infinite;
}

@keyframes opsVfxRender {
  0% {
    width: 20%;
  }

  50% {
    width: 92%;
  }

  100% {
    width: 20%;
  }
}

.ops-vfx-progress-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .03em;
}

@media (prefers-reduced-motion: reduce) {

  .ops-vfx *,
  .ops-vfx {
    animation: none !important;
  }
}

/* =============================================================================
   SERVICE DETAIL visual — Advertisement Video Editing (.ops-advid-visual)
   A bright ad/promo editor: vibrant preview with popping motion-text headline,
   a rotating "50% OFF" burst, a pulsing CTA, a cycling aspect-ratio switcher
   (16:9 / 9:16 / 1:1), a text-overlay track and an MP4 export footer.
   ============================================================================= */
.ops-advid-chip-1 {
  top: 26px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-advid-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-advid-chip-3 {
  bottom: 70px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-advid-chip-1 i {
  color: #e05320;
}

.ops-advid-chip-2 i {
  color: #e0398f;
}

.ops-advid-chip-3 i {
  color: #7c5cff;
}

.ops-advid {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #14161d;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  overflow: hidden;
}

.ops-advid-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: #c7ccd8;
}

.ops-advid-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.ops-advid-title i {
  color: #e05320;
}

.ops-advid-aspects {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}

.ops-advid-asp {
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 700;
  color: #8b90a0;
  background: rgba(255, 255, 255, .05);
  border-radius: 5px;
}

.ops-advid-asp.a1 {
  animation: opsAdvAsp 4.5s steps(1) infinite 0s;
}

.ops-advid-asp.a2 {
  animation: opsAdvAsp 4.5s steps(1) infinite 1.5s;
}

.ops-advid-asp.a3 {
  animation: opsAdvAsp 4.5s steps(1) infinite 3s;
}

@keyframes opsAdvAsp {

  0%,
  33% {
    color: #fff;
    background: #e05320;
  }

  33.01%,
  100% {
    color: #8b90a0;
    background: rgba(255, 255, 255, .05);
  }
}

/* promo preview */
.ops-advid-stage {
  position: relative;
  height: 156px;
  overflow: hidden;
  background: linear-gradient(135deg, #e0398f 0%, #e05320 55%, #f2a63f 100%);
  display: flex;
  align-items: center;
}

.ops-advid-copy {
  position: relative;
  z-index: 2;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.ops-advid-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #fff;
  padding: 3px 8px;
  background: rgba(0, 0, 0, .22);
  border-radius: 4px;
  opacity: 0;
  animation: opsAdvSlide 4.5s ease-out infinite;
  animation-delay: .2s;
}

.ops-advid-head {
  font-size: 30px;
  font-weight: 900;
  line-height: .95;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .22);
  letter-spacing: -.5px;
  opacity: 0;
  animation: opsAdvPop 4.5s cubic-bezier(.2, 1.4, .3, 1) infinite;
  animation-delay: .5s;
}

.ops-advid-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  opacity: 0;
  animation: opsAdvSlide 4.5s ease-out infinite;
  animation-delay: .8s;
}

.ops-advid-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 800;
  color: #e05320;
  background: #fff;
  border-radius: 100px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
  opacity: 0;
  animation: opsAdvSlide 4.5s ease-out infinite, opsAdvCta 1.6s ease-in-out infinite 1.2s;
  animation-delay: 1.1s;
}

.ops-advid-cta i {
  font-size: 10px;
}

@keyframes opsAdvPop {

  0%,
  4% {
    opacity: 0;
    transform: scale(.4);
  }

  14% {
    opacity: 1;
    transform: scale(1.06);
  }

  20%,
  86% {
    opacity: 1;
    transform: scale(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(.9);
  }
}

@keyframes opsAdvSlide {

  0%,
  6% {
    opacity: 0;
    transform: translateX(-14px);
  }

  16%,
  86% {
    opacity: 1;
    transform: translateX(0);
  }

  96%,
  100% {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@keyframes opsAdvCta {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

.ops-advid-burst {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  line-height: .9;
  color: #e05320;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  animation: opsAdvBurst 3s ease-in-out infinite;
}

.ops-advid-burst::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .7);
  animation: opsAdvSpin 8s linear infinite;
}

@keyframes opsAdvBurst {

  0%,
  100% {
    transform: scale(1) rotate(-8deg);
  }

  50% {
    transform: scale(1.1) rotate(-8deg);
  }
}

@keyframes opsAdvSpin {
  to {
    transform: rotate(360deg);
  }
}

.ops-advid-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  z-index: 1;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: opsAdvSpark 2.4s ease-in-out infinite;
}

.ops-advid-spark.s1 {
  top: 22%;
  left: 46%;
  animation-delay: 0s;
}

.ops-advid-spark.s2 {
  top: 64%;
  left: 40%;
  animation-delay: .6s;
}

.ops-advid-spark.s3 {
  top: 34%;
  left: 70%;
  animation-delay: 1.2s;
}

.ops-advid-spark.s4 {
  top: 76%;
  left: 62%;
  animation-delay: 1.8s;
}

@keyframes opsAdvSpark {

  0%,
  100% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* text-overlay track */
.ops-advid-track {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: #14161d;
}

.ops-advid-tlab {
  width: 22px;
  height: 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b90a0;
  font-size: 9px;
}

.ops-advid-seg {
  height: 18px;
  border-radius: 5px;
}

.ops-advid-seg.t1 {
  width: 32%;
  background: linear-gradient(90deg, #e0398f, #ef5ba8);
}

.ops-advid-seg.t2 {
  width: 26%;
  background: linear-gradient(90deg, #e05320, #f2854a);
}

.ops-advid-seg.t3 {
  width: 20%;
  background: linear-gradient(90deg, #7c5cff, #9a80ff);
}

.ops-advid-foot {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 10px;
}

.ops-advid-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c7ccd8;
  font-weight: 600;
}

.ops-advid-export i {
  color: #e05320;
}

.ops-advid-ready {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7ee0a0;
  font-weight: 700;
}

.ops-advid-ready-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsVfxPulse 1.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {

  .ops-advid *,
  .ops-advid {
    animation: none !important;
  }

  .ops-advid-copy>* {
    opacity: 1 !important;
  }
}

/* =============================================================================
   SERVICE DETAIL visual — Corporate Video Editing (.ops-corp-visual)
   A polished brand-film editor: professional interview stage with a logo bug,
   an animated lower-third name/title card, a typewriter subtitle line, a clean
   scrub bar and a 3-clip video track. Steel/navy palette, brand-orange accents.
   ============================================================================= */
.ops-corp-chip-1 {
  top: 30px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-corp-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-corp-chip-3 {
  bottom: 66px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-corp-chip-1 i {
  color: #e05320;
}

.ops-corp-chip-2 i {
  color: #f2a63f;
}

.ops-corp-chip-3 i {
  color: #4f8cff;
}

.ops-corp {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #14161d;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  overflow: hidden;
}

.ops-corp-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: #c7ccd8;
}

.ops-corp-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.ops-corp-title i {
  color: #e05320;
}

.ops-corp-rec {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #9aa0b0;
  font-weight: 700;
}

.ops-corp-rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e05320;
  animation: opsVfxPulse 1.4s ease-out infinite;
}

/* interview stage */
.ops-corp-stage {
  position: relative;
  height: 158px;
  overflow: hidden;
  background: linear-gradient(160deg, #1e2a44 0%, #24304a 45%, #2c2036 100%);
}

.ops-corp-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 34%, rgba(120, 150, 210, .28), transparent 46%);
}

.ops-corp-person {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  font-size: 62px;
  color: rgba(150, 170, 210, .5);
  z-index: 1;
}

.ops-corp-logo {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  opacity: .92;
}

.ops-corp-logo b {
  color: #e05320;
}

.ops-corp-lt {
  position: absolute;
  left: 16px;
  bottom: 40px;
  z-index: 3;
  padding-left: 12px;
  overflow: hidden;
  animation: opsCorpLt 6s ease-in-out infinite;
}

.ops-corp-lt-bar {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e05320, #f2854a);
}

.ops-corp-lt-name {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.ops-corp-lt-role {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  margin-top: 2px;
}

@keyframes opsCorpLt {

  0%,
  6% {
    opacity: 0;
    transform: translateX(-18px);
  }

  16%,
  82% {
    opacity: 1;
    transform: translateX(0);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateX(-12px);
  }
}

.ops-corp-cc {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 3;
  max-width: 84%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  border-radius: 5px;
  animation: opsCorpCc 6s steps(1) infinite;
}

@keyframes opsCorpCc {

  0%,
  22% {
    opacity: 0;
  }

  30%,
  88% {
    opacity: 1;
  }

  96%,
  100% {
    opacity: 0;
  }
}

/* transport */
.ops-corp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.ops-corp-tool {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  background: linear-gradient(135deg, #e05320, #f2854a);
}

.ops-corp-time {
  font-size: 10px;
  color: #9aa0b0;
  font-variant-numeric: tabular-nums;
}

.ops-corp-scrub {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  position: relative;
  overflow: hidden;
}

.ops-corp-scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  background: linear-gradient(90deg, #e05320, #f2854a);
  animation: opsCorpScrub 6s linear infinite;
}

@keyframes opsCorpScrub {
  0% {
    width: 8%;
  }

  100% {
    width: 96%;
  }
}

/* video track */
.ops-corp-track {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px 11px;
  background: #14161d;
}

.ops-corp-tlab {
  width: 22px;
  height: 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b90a0;
  font-size: 9px;
}

.ops-corp-seg {
  height: 18px;
  border-radius: 5px;
}

.ops-corp-seg.v1 {
  width: 34%;
  background: linear-gradient(90deg, #3b6fe0, #5a86ec);
}

.ops-corp-seg.v2 {
  width: 24%;
  background: linear-gradient(90deg, #5a86ec, #7aa0f2);
}

.ops-corp-seg.v3 {
  width: 22%;
  background: linear-gradient(90deg, #7aa0f2, #9bb8f7);
}

@media (prefers-reduced-motion: reduce) {

  .ops-corp *,
  .ops-corp {
    animation: none !important;
  }

  .ops-corp-lt,
  .ops-corp-cc {
    opacity: 1 !important;
  }
}

/* =============================================================================
   SERVICE DETAIL visuals — video group: Educational / Social Reel / YouTube
   ============================================================================= */
/* ---- Educational lesson player (.ops-edu-visual) ---- */
.ops-edu-chip-1 {
  top: 28px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-edu-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-edu-chip-3 {
  bottom: 60px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-edu-chip-1 i {
  color: #e05320;
}

.ops-edu-chip-2 i {
  color: #4f8cff;
}

.ops-edu-chip-3 i {
  color: #f2a63f;
}

.ops-edu {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #14161d;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  overflow: hidden;
}

.ops-edu-bar {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: #c7ccd8;
}

.ops-edu-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.ops-edu-title i {
  color: #e05320;
}

.ops-edu-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: #e05320;
  padding: 2px 7px;
  border-radius: 4px;
}

.ops-edu-stage {
  position: relative;
  height: 158px;
  background: linear-gradient(160deg, #143a34 0%, #0f2e2b 100%);
  overflow: hidden;
}

.ops-edu-board {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-size: 46px;
  color: rgba(255, 255, 255, .16);
}

.ops-edu-play {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(224, 83, 32, .95);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(224, 83, 32, .5);
  animation: opsPhFab 2.4s ease-in-out infinite;
}

.ops-edu-play i {
  margin-left: 2px;
}

.ops-edu-ring {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
}

.ops-edu-ring svg {
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
}

.ops-edu-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .15);
  stroke-width: 3;
}

.ops-edu-ring-fg {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 62;
  animation: opsEduRing 5s ease-in-out infinite;
}

@keyframes opsEduRing {
  0% {
    stroke-dashoffset: 100;
  }

  50%,
  100% {
    stroke-dashoffset: 62;
  }
}

.ops-edu-ring b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}

.ops-edu-cc {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  border-radius: 5px;
  animation: opsCorpCc 5s steps(1) infinite;
}

.ops-edu-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, .12);
}

.ops-edu-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: #e05320;
  animation: opsCorpScrub 5s linear infinite;
}

.ops-edu-chapters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px 13px;
  background: #14161d;
}

.ops-edu-ch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #9aa0b0;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
}

.ops-edu-ch i {
  font-size: 11px;
}

.ops-edu-ch.is-done {
  color: #cfd4de;
}

.ops-edu-ch.is-done i {
  color: #3ddc84;
}

.ops-edu-ch.is-active {
  color: #fff;
  background: rgba(224, 83, 32, .16);
}

.ops-edu-ch.is-active i {
  color: #e05320;
}

@media (prefers-reduced-motion: reduce) {

  .ops-edu *,
  .ops-edu {
    animation: none !important;
  }
}

/* ---- Social vertical reel (.ops-reel-visual) ---- */
.ops-reel-chip-1 {
  top: 30px;
  left: -14px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-reel-chip-2 {
  top: 130px;
  right: -14px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-reel-chip-3 {
  bottom: 50px;
  left: -10px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-reel-chip-1 i {
  color: #e0398f;
}

.ops-reel-chip-2 i {
  color: #f2a63f;
}

.ops-reel-chip-3 i {
  color: #4f8cff;
}

.ops-reel {
  position: relative;
  z-index: 3;
  width: min(216px, 60vw);
  aspect-ratio: 9/16;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  background: linear-gradient(165deg, #7b2ff7 0%, #e0398f 50%, #f2854a 100%);
}

.ops-reel-cap {
  position: absolute;
  top: 26%;
  left: 16px;
  z-index: 3;
  font-size: 24px;
  font-weight: 900;
  line-height: .95;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .3);
  letter-spacing: -.5px;
  animation: opsAdvPop 4.5s cubic-bezier(.2, 1.4, .3, 1) infinite;
}

.ops-reel-heart {
  position: absolute;
  bottom: 84px;
  right: 30px;
  z-index: 2;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  animation: opsReelHeart 3s ease-out infinite;
}

.ops-reel-heart.h1 {
  animation-delay: 0s;
}

.ops-reel-heart.h2 {
  animation-delay: 1s;
  right: 22px;
}

.ops-reel-heart.h3 {
  animation-delay: 2s;
  right: 38px;
}

@keyframes opsReelHeart {
  0% {
    opacity: 0;
    transform: translateY(0) scale(.6);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-70px) scale(1.2);
  }
}

.ops-reel-rail {
  position: absolute;
  right: 8px;
  bottom: 74px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ops-reel-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #fff;
  font-size: 15px;
}

.ops-reel-act b {
  font-size: 9px;
  font-weight: 700;
}

.ops-reel-foot {
  position: absolute;
  left: 12px;
  right: 46px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ops-reel-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.ops-reel-audio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-reel-audio i {
  animation: opsReelSpin 3s linear infinite;
}

@keyframes opsReelSpin {
  to {
    transform: rotate(360deg);
  }
}

.ops-reel-scrub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .25);
  z-index: 5;
}

.ops-reel-scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: #fff;
  animation: opsCorpScrub 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

  .ops-reel *,
  .ops-reel {
    animation: none !important;
  }
}

/* ---- YouTube video (.ops-yt-visual) ---- */
.ops-yt-chip-1 {
  top: 26px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-yt-chip-2 {
  top: 120px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-yt-chip-3 {
  bottom: 56px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-yt-chip-1 i {
  color: #e05320;
}

.ops-yt-chip-2 i {
  color: #4f8cff;
}

.ops-yt-chip-3 i {
  color: #ff0033;
}

.ops-yt {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eceef3;
  box-shadow: 0 26px 60px rgba(15, 17, 23, .18);
  overflow: hidden;
}

.ops-yt-player {
  position: relative;
  height: 156px;
  background: linear-gradient(135deg, #1a1130, #3a1c4a 60%, #e05320);
  overflow: hidden;
}

.ops-yt-thumbtext {
  position: absolute;
  left: 14px;
  top: 18px;
  z-index: 2;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .35);
  letter-spacing: -.5px;
}

.ops-yt-play {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 32px;
  border-radius: 9px;
  background: #ff0033;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(255, 0, 51, .5);
  animation: opsPhFab 2.4s ease-in-out infinite;
}

.ops-yt-dur {
  position: absolute;
  right: 8px;
  bottom: 12px;
  z-index: 2;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, .8);
  border-radius: 4px;
}

.ops-yt-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, .25);
}

.ops-yt-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  background: #ff0033;
  animation: opsCorpScrub 6s linear infinite;
}

.ops-yt-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
}

.ops-yt-ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #e05320, #f2854a);
}

.ops-yt-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.ops-yt-info b {
  font-size: 12px;
  font-weight: 700;
  color: #0f1117;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-yt-info i {
  font-size: 10px;
  font-style: normal;
  color: #6b7280;
}

.ops-yt-sub {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: #ff0033;
  border-radius: 100px;
  animation: opsAdvCta 1.8s ease-in-out infinite;
}

.ops-yt-ret {
  padding: 0 12px 13px;
}

.ops-yt-ret-lab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 5px;
}

.ops-yt-ret-lab i {
  color: #e05320;
}

.ops-yt-ret-graph {
  width: 100%;
  height: 34px;
  display: block;
}

.ops-yt-ret-graph polyline {
  fill: none;
  stroke: #e05320;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: opsYtDraw 3.5s ease-out infinite;
}

@keyframes opsYtDraw {
  0% {
    stroke-dashoffset: 260;
  }

  40%,
  100% {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops-yt *,
  .ops-yt {
    animation: none !important;
  }

  .ops-yt-ret-graph polyline {
    stroke-dashoffset: 0 !important;
  }
}

/* =============================================================================
   SERVICE DETAIL visuals — design group: Logo / Brochure / Flyer / Packaging / UI
   ============================================================================= */
/* shared design-editor chrome */
.ops-logod,
.ops-broc,
.ops-flyer,
.ops-pack,
.ops-uid {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #14161d;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  overflow: hidden;
}

.ops-logod-bar,
.ops-broc-bar,
.ops-flyer-bar,
.ops-pack-bar,
.ops-uid-bar {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: #c7ccd8;
}

.ops-logod-title,
.ops-broc-title,
.ops-flyer-title,
.ops-pack-title,
.ops-uid-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.ops-logod-title i,
.ops-broc-title i,
.ops-flyer-title i,
.ops-pack-title i,
.ops-uid-title i {
  color: #e05320;
}

.ops-logod-zoom,
.ops-broc-badge,
.ops-flyer-badge,
.ops-pack-badge,
.ops-uid-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  padding: 2px 7px;
  border-radius: 4px;
}

.ops-broc-badge,
.ops-flyer-badge,
.ops-pack-badge {
  background: #e05320;
}

/* ---- Logo design ---- */
.ops-logod-chip-1 {
  top: 28px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-logod-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-logod-chip-3 {
  bottom: 66px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-logod-chip-1 i {
  color: #4f8cff;
}

.ops-logod-chip-2 i {
  color: #e0398f;
}

.ops-logod-chip-3 i {
  color: #f2a63f;
}

.ops-logod-canvas {
  position: relative;
  height: 156px;
  background: #1b1e27 linear-gradient(0deg, transparent 23px, rgba(255, 255, 255, .04) 24px), linear-gradient(90deg, transparent 23px, rgba(255, 255, 255, .04) 24px);
  background-size: 24px 24px;
  overflow: hidden;
}

.ops-logod-guide {
  position: absolute;
  border: 1px dashed rgba(120, 150, 220, .5);
}

.ops-logod-guide.gcircle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: opsLogoGuide 4s ease-in-out infinite;
}

.ops-logod-guide.gv {
  width: 0;
  height: 120px;
  border-left: 1px dashed rgba(120, 150, 220, .4);
  left: 50%;
  top: 18px;
}

.ops-logod-guide.gh {
  height: 0;
  width: 130px;
  border-top: 1px dashed rgba(120, 150, 220, .4);
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes opsLogoGuide {

  0%,
  100% {
    opacity: .35;
  }

  50% {
    opacity: .8;
  }
}

.ops-logod-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  background: #e05320;
  animation: opsLogoColor 6s linear infinite;
}

@keyframes opsLogoColor {

  0%,
  19% {
    background: #e05320;
  }

  20%,
  39% {
    background: #4f8cff;
  }

  40%,
  59% {
    background: #e0398f;
  }

  60%,
  79% {
    background: #16b877;
  }

  80%,
  100% {
    background: #f2a63f;
  }
}

.ops-logod-anchor {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  background: #e05320;
  border-radius: 2px;
  z-index: 2;
  animation: opsLogoAnchor 2s ease-in-out infinite;
}

.ops-logod-anchor.an1 {
  left: calc(50% - 32px);
  top: calc(50% - 32px);
}

.ops-logod-anchor.an2 {
  left: calc(50% + 24px);
  top: calc(50% - 32px);
  animation-delay: .3s;
}

.ops-logod-anchor.an3 {
  left: calc(50% - 32px);
  top: calc(50% + 24px);
  animation-delay: .6s;
}

.ops-logod-anchor.an4 {
  left: calc(50% + 24px);
  top: calc(50% + 24px);
  animation-delay: .9s;
}

@keyframes opsLogoAnchor {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4);
  }
}

.ops-logod-swatches {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #14161d;
  justify-content: center;
}

.ops-logod-sw {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.ops-logod-sw.w1 {
  background: #e05320;
}

.ops-logod-sw.w2 {
  background: #4f8cff;
}

.ops-logod-sw.w3 {
  background: #e0398f;
}

.ops-logod-sw.w4 {
  background: #16b877;
}

.ops-logod-sw.w5 {
  background: #f2a63f;
}

.ops-logod-sw {
  animation: opsLogoSw 6s steps(1) infinite;
}

.ops-logod-sw.w1 {
  animation-delay: 0s
}

.ops-logod-sw.w2 {
  animation-delay: 1.2s
}

.ops-logod-sw.w3 {
  animation-delay: 2.4s
}

.ops-logod-sw.w4 {
  animation-delay: 3.6s
}

.ops-logod-sw.w5 {
  animation-delay: 4.8s
}

@keyframes opsLogoSw {

  0%,
  19% {
    box-shadow: 0 0 0 2px #14161d, 0 0 0 4px #fff;
  }

  20%,
  100% {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-logod * {
    animation: none !important;
  }
}

/* ---- Brochure ---- */
.ops-broc-chip-1 {
  top: 28px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-broc-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-broc-chip-3 {
  bottom: 60px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-broc-chip-1 i {
  color: #e05320;
}

.ops-broc-chip-2 i {
  color: #16b877;
}

.ops-broc-chip-3 i {
  color: #4f8cff;
}

.ops-broc-stage {
  display: flex;
  gap: 6px;
  padding: 16px 12px;
  height: 150px;
  background: #1b1e27;
}

.ops-broc-fold {
  flex: 1;
  background: #fff;
  border-radius: 6px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  animation: opsBrocIn 4.5s ease-in-out infinite;
}

.ops-broc-fold.f2 {
  animation-delay: .3s;
}

.ops-broc-fold.f3 {
  animation-delay: .6s;
}

@keyframes opsBrocIn {

  0%,
  4% {
    opacity: 0;
    transform: translateY(10px) rotateY(20deg);
  }

  16%,
  86% {
    opacity: 1;
    transform: translateY(0) rotateY(0);
  }

  96%,
  100% {
    opacity: 0;
  }
}

.ops-broc-img {
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(135deg, #e05320, #f2a63f);
}

.ops-broc-h {
  height: 12px;
  border-radius: 3px;
  background: #0f1117;
}

.ops-broc-cta {
  height: 20px;
  border-radius: 5px;
  background: #16b877;
  margin-top: auto;
}

.ops-broc-fold .ln {
  height: 5px;
  border-radius: 3px;
  background: #dfe2ea;
}

.ops-broc-fold .ln.s {
  width: 60%;
}

.ops-broc-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 10px;
  color: #9aa0b0;
  font-weight: 600;
}

.ops-broc-foot i {
  color: #16b877;
}

@media (prefers-reduced-motion: reduce) {
  .ops-broc * {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ---- Flyer ---- */
.ops-flyer-chip-1 {
  top: 28px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-flyer-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-flyer-chip-3 {
  bottom: 60px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-flyer-chip-1 i {
  color: #e05320;
}

.ops-flyer-chip-2 i {
  color: #e0398f;
}

.ops-flyer-chip-3 i {
  color: #4f8cff;
}

.ops-flyer-stage {
  position: relative;
  height: 190px;
  background: linear-gradient(160deg, #16233f, #241a3a);
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

.ops-flyer-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(135deg, #e05320, #f2a63f);
  opacity: .9;
}

.ops-flyer-badge-date {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: #e05320;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  line-height: .95;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  animation: opsAdvBurst 3s ease-in-out infinite;
}

.ops-flyer-kicker {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #fff;
  opacity: 0;
  animation: opsAdvSlide 4.5s ease-out infinite .2s;
}

.ops-flyer-head {
  position: relative;
  z-index: 2;
  font-size: 26px;
  font-weight: 900;
  line-height: .92;
  color: #fff;
  letter-spacing: -.5px;
  opacity: 0;
  animation: opsAdvPop 4.5s cubic-bezier(.2, 1.4, .3, 1) infinite .5s;
}

.ops-flyer-sub {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  opacity: 0;
  animation: opsAdvSlide 4.5s ease-out infinite .8s;
}

.ops-flyer-cta {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  padding: 6px 13px;
  font-size: 10px;
  font-weight: 800;
  color: #16233f;
  background: #f2a63f;
  border-radius: 100px;
  opacity: 0;
  animation: opsAdvSlide 4.5s ease-out infinite 1.1s, opsAdvCta 1.6s ease-in-out infinite 1.2s;
}

@media (prefers-reduced-motion: reduce) {
  .ops-flyer * {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ---- Packaging (3D box) ---- */
.ops-pack-chip-1 {
  top: 28px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-pack-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-pack-chip-3 {
  bottom: 60px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-pack-chip-1 i {
  color: #e05320;
}

.ops-pack-chip-2 i {
  color: #4f8cff;
}

.ops-pack-chip-3 i {
  color: #e0398f;
}

.ops-pack-stage {
  position: relative;
  height: 168px;
  background: radial-gradient(circle at 50% 40%, #2a2f3d, #14161d 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 620px;
}

.ops-pack-box {
  position: relative;
  width: 84px;
  height: 104px;
  transform-style: preserve-3d;
  animation: opsPackSpin 9s linear infinite;
}

.ops-pack-face {
  position: absolute;
  top: 50%;
  left: 50%;
}

.ops-pack-face.front {
  width: 84px;
  height: 104px;
  margin: -52px 0 0 -42px;
  background: linear-gradient(160deg, #e05320, #c33f18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transform: translateZ(26px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}

.ops-pack-face.front b {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
}

.ops-pack-face.front i {
  font-size: 8px;
  font-style: normal;
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .85);
}

.ops-pack-face.side {
  width: 52px;
  height: 104px;
  margin: -52px 0 0 -26px;
  background: linear-gradient(160deg, #a8330f, #7f2408);
  transform: rotateY(90deg) translateZ(42px);
}

.ops-pack-face.top {
  width: 84px;
  height: 52px;
  margin: -26px 0 0 -42px;
  background: linear-gradient(160deg, #f2854a, #e05320);
  transform: rotateX(90deg) translateZ(52px);
}

@keyframes opsPackSpin {
  0% {
    transform: rotateX(-12deg) rotateY(-30deg);
  }

  50% {
    transform: rotateX(-12deg) rotateY(30deg);
  }

  100% {
    transform: rotateX(-12deg) rotateY(-30deg);
  }
}

.ops-pack-shadow {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  filter: blur(6px);
  animation: opsPackSh 9s ease-in-out infinite;
}

@keyframes opsPackSh {

  0%,
  100% {
    width: 84px;
    opacity: .35;
  }

  50% {
    width: 104px;
    opacity: .5;
  }
}

.ops-pack-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 10px;
  color: #9aa0b0;
  font-weight: 600;
}

.ops-pack-foot i {
  color: #16b877;
}

@media (prefers-reduced-motion: reduce) {
  .ops-pack * {
    animation: none !important;
  }
}

/* ---- UI design ---- */
.ops-uid-chip-1 {
  top: 28px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-uid-chip-2 {
  top: 140px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-uid-chip-3 {
  bottom: 56px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-uid-chip-1 i {
  color: #e05320;
}

.ops-uid-chip-2 i {
  color: #4f8cff;
}

.ops-uid-chip-3 i {
  color: #16b877;
}

.ops-uid-body {
  display: flex;
  height: 168px;
  background: #1b1e27;
}

.ops-uid-canvas {
  position: relative;
  flex: 1;
  margin: 12px;
  background: #eef0f6;
  border-radius: 8px;
  overflow: hidden;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ops-uid-nav {
  height: 12px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  opacity: 0;
  animation: opsUidIn 4.5s ease-in-out infinite;
}

.ops-uid-hero {
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e05320, #f2a63f);
  opacity: 0;
  animation: opsUidIn 4.5s ease-in-out infinite .25s;
}

.ops-uid-card {
  height: 30px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  opacity: 0;
  display: inline-block;
}

.ops-uid-card.c1 {
  width: 100%;
  animation: opsUidIn 4.5s ease-in-out infinite .5s;
}

.ops-uid-card.c2 {
  width: 70%;
  animation: opsUidIn 4.5s ease-in-out infinite .75s;
}

@keyframes opsUidIn {

  0%,
  4% {
    opacity: 0;
    transform: translateY(8px);
  }

  16%,
  88% {
    opacity: 1;
    transform: translateY(0);
  }

  97%,
  100% {
    opacity: 0;
  }
}

.ops-uid-cursor {
  position: absolute;
  color: #0f1117;
  font-size: 13px;
  animation: opsUidCursor 4.5s ease-in-out infinite;
}

@keyframes opsUidCursor {
  0% {
    left: 20%;
    top: 20%;
  }

  30% {
    left: 40%;
    top: 45%;
  }

  60% {
    left: 65%;
    top: 70%;
  }

  100% {
    left: 30%;
    top: 30%;
  }
}

.ops-uid-panel {
  width: 58px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #0f1117;
  border-left: 1px solid rgba(255, 255, 255, .06);
}

.ops-uid-swatch {
  height: 16px;
  border-radius: 4px;
}

.ops-uid-swatch.v1 {
  background: #e05320;
}

.ops-uid-swatch.v2 {
  background: #4f8cff;
}

.ops-uid-swatch.v3 {
  background: #16b877;
}

.ops-uid-layer {
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
}

.ops-uid-layer:nth-of-type(4) {
  width: 80%;
}

.ops-uid-layer:nth-of-type(5) {
  width: 60%;
}

@media (prefers-reduced-motion: reduce) {
  .ops-uid * {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* =============================================================================
   SERVICE DETAIL visuals — batch (agent-designed): web/app/software/marketing
   ============================================================================= */

/* ---- crm-software-development (crm) ---- */
.ops-crm {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #fff;
  text-align: left
}

.ops-crm * {
  box-sizing: border-box
}

@property --opsCrmN {
  syntax: '<integer>';
  inherits: true;
  initial-value: 68
}

.ops-crm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-crm-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .2px
}

.ops-crm-file i {
  color: #e05320;
  font-size: 11px
}

.ops-crm-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #3ddc84;
  background: rgba(22, 184, 119, .12);
  border: 1px solid rgba(22, 184, 119, .22);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-crm-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsCrmPulse 1.6s ease-in-out infinite
}

@keyframes opsCrmPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0)
  }
}

.ops-crm-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px 10px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-crm-klabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 4px
}

.ops-crm-kval {
  display: flex;
  align-items: baseline;
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.ops-crm-cur {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  margin-right: 1px
}

.ops-crm-unit {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  margin-left: 1px
}

.ops-crm-count {
  --opsCrmN: 68
}

.ops-crm-count::after {
  content: counter(opsCrmN);
  counter-reset: opsCrmN var(--opsCrmN, 68);
  animation: opsCrmCount 3.2s cubic-bezier(.2, .75, .2, 1) forwards
}

@keyframes opsCrmCount {
  from {
    --opsCrmN: 0
  }

  to {
    --opsCrmN: 68
  }
}

.ops-crm-kright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px
}

.ops-crm-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(22, 184, 119, .13);
  padding: 2px 7px;
  border-radius: 8px
}

.ops-crm-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px
}

.ops-crm-b {
  width: 5px;
  border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(1);
  background: linear-gradient(180deg, #f2854a, #e05320);
  animation: opsCrmBar 1s cubic-bezier(.2, .8, .2, 1) both
}

.ops-crm-b1 {
  height: 11px;
  animation-delay: .05s
}

.ops-crm-b2 {
  height: 17px;
  animation-delay: .12s
}

.ops-crm-b3 {
  height: 13px;
  animation-delay: .19s
}

.ops-crm-b4 {
  height: 21px;
  animation-delay: .26s
}

.ops-crm-b5 {
  height: 16px;
  animation-delay: .33s
}

.ops-crm-b6 {
  height: 25px;
  animation-delay: .4s
}

.ops-crm-b7 {
  height: 30px;
  animation-delay: .47s;
  background: linear-gradient(180deg, #3ddc84, #16b877)
}

@keyframes opsCrmBar {
  from {
    transform: scaleY(0)
  }

  to {
    transform: scaleY(1)
  }
}

.ops-crm-pipe {
  position: relative;
  display: flex;
  gap: 6px;
  padding: 9px 10px 10px;
  min-height: 156px;
  background: #14161d
}

.ops-crm-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 10px;
  padding: 8px 6px;
  min-height: 136px
}

.ops-crm-ch {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .2px
}

.ops-crm-ch b {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .07);
  padding: 1px 5px;
  border-radius: 7px
}

.ops-crm-cdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0
}

.ops-crm-dot-lead {
  background: #4f8cff;
  box-shadow: 0 0 6px rgba(79, 140, 255, .6)
}

.ops-crm-dot-qual {
  background: #f2a63f;
  box-shadow: 0 0 6px rgba(242, 166, 63, .6)
}

.ops-crm-dot-won {
  background: #3ddc84;
  box-shadow: 0 0 6px rgba(61, 220, 132, .6)
}

.ops-crm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: #1b1e28;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 7px;
  padding: 6px 7px
}

.ops-crm-cname {
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-crm-cval {
  font-size: 8.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  flex-shrink: 0
}

.ops-crm-cval-won {
  color: #3ddc84
}

.ops-crm-move {
  position: absolute;
  left: 3.5%;
  top: 106px;
  width: 30%;
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(165deg, #2a1c12, #1b1712);
  border: 1px solid rgba(224, 83, 32, .6);
  border-radius: 7px;
  padding: 6px 7px;
  z-index: 6;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .45), 0 0 0 3px rgba(224, 83, 32, .14);
  animation: opsCrmDeal 6.5s cubic-bezier(.6, 0, .35, 1) infinite
}

.ops-crm-mvname {
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0
}

.ops-crm-mvval {
  font-size: 8.5px;
  font-weight: 800;
  color: #f2854a;
  flex-shrink: 0
}

.ops-crm-mvtag {
  flex-shrink: 0;
  font-size: 8px;
  color: #f2a63f
}

@keyframes opsCrmDeal {

  0%,
  13% {
    left: 3.5%;
    top: 106px;
    opacity: 1
  }

  23%,
  44% {
    left: 35.6%;
    top: 102px;
    opacity: 1
  }

  54%,
  82% {
    left: 67.5%;
    top: 112px;
    opacity: 1
  }

  88% {
    left: 67.5%;
    top: 112px;
    opacity: 1
  }

  93% {
    left: 67.5%;
    top: 112px;
    opacity: 0
  }

  93.01% {
    left: 3.5%;
    top: 106px;
    opacity: 0
  }

  100% {
    left: 3.5%;
    top: 106px;
    opacity: 1
  }
}

.ops-crm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 11px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-crm-favs {
  display: flex;
  align-items: center
}

.ops-crm-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #0f1117;
  margin-left: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  transform: scale(1);
  animation: opsCrmPop .5s cubic-bezier(.5, 1.7, .5, 1) both
}

.ops-crm-av:first-child {
  margin-left: 0
}

.ops-crm-av1 {
  background: linear-gradient(135deg, #4f8cff, #3a6fe0);
  animation-delay: .15s
}

.ops-crm-av2 {
  background: linear-gradient(135deg, #e0398f, #b32b71);
  animation-delay: .27s
}

.ops-crm-av3 {
  background: linear-gradient(135deg, #7c5cff, #5f43d6);
  animation-delay: .39s
}

.ops-crm-av4 {
  background: linear-gradient(135deg, #f2a63f, #e0872a);
  animation-delay: .51s
}

.ops-crm-more {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .72);
  font-size: 7.5px;
  animation-delay: .63s
}

@keyframes opsCrmPop {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.ops-crm-fmeta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5)
}

.ops-crm-sync {
  color: #4f8cff;
  font-size: 11px;
  animation: opsCrmSpin 3.2s linear infinite
}

@keyframes opsCrmSpin {
  to {
    transform: rotate(360deg)
  }
}

.ops-crm-chip-1 {
  top: 22px;
  left: -6px
}

.ops-crm-chip-1 i {
  color: #e05320
}

.ops-crm-chip-2 {
  top: 150px;
  right: -12px
}

.ops-crm-chip-2 i {
  color: #4f8cff
}

.ops-crm-chip-3 {
  bottom: 52px;
  left: -8px
}

.ops-crm-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion: reduce) {
  .ops-crm * {
    animation: none !important
  }

  .ops-crm-b {
    transform: scaleY(1) !important
  }

  .ops-crm-av {
    transform: scale(1) !important
  }

  .ops-crm-move {
    opacity: 1 !important
  }
}

/* ---- e-commerce (ecom) ---- */
/* ===== E-COMMERCE DEVELOPMENT — live storefront -> cart -> checkout ===== */
.ops-ecom {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #14161d;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  overflow: hidden;
  font-family: inherit;
}

/* window bar */
.ops-ecom-bar {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: #c7ccd8;
}

.ops-ecom-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: .2px;
}

.ops-ecom-title i {
  color: #e05320;
}

.ops-ecom-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  color: #e7eaf2;
  background: rgba(255, 255, 255, .1);
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ops-ecom-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, .6);
  animation: opsEcomPulse 1.7s ease-out infinite;
}

/* storefront */
.ops-ecom-shop {
  position: relative;
  padding: 9px 12px 10px;
}

.ops-ecom-shopbar {
  display: flex;
  align-items: center;
  margin-bottom: 9px;
}

.ops-ecom-shopname {
  font-size: 12px;
  font-weight: 800;
  color: #f3f5fa;
  letter-spacing: .2px;
}

.ops-ecom-shopname i {
  color: #f2854a;
  font-size: 10px;
  margin-right: 5px;
}

.ops-ecom-cart {
  position: relative;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e7eaf2;
  font-size: 12px;
}

.ops-ecom-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 9px;
  background: linear-gradient(135deg, #e05320, #f2854a);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(224, 83, 32, .5);
  transform: scale(1);
  animation: opsEcomBadge 8s ease-in-out infinite;
}

.ops-ecom-count {
  display: flex;
  flex-direction: column;
  line-height: 16px;
  height: 16px;
  transform: translateY(-16px);
  animation: opsEcomCount 8s ease-in-out infinite;
}

.ops-ecom-count b {
  height: 16px;
  font-weight: 800;
}

/* product grid */
.ops-ecom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ops-ecom-card {
  position: relative;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  padding: 7px 8px 8px;
  opacity: 1;
  animation: opsEcomCardIn .55s cubic-bezier(.2, .75, .25, 1) both;
}

.ops-ecom-card:nth-child(1) {
  animation-delay: .08s;
}

.ops-ecom-card:nth-child(2) {
  animation-delay: .19s;
}

.ops-ecom-card:nth-child(3) {
  animation-delay: .30s;
}

.ops-ecom-card:nth-child(4) {
  animation-delay: .41s;
}

.ops-ecom-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  overflow: hidden;
}

.ops-ecom-img i {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .28));
}

.ops-ecom-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  animation: opsEcomSheen 5.5s ease-in-out infinite;
}

.ops-ecom-img.i1 {
  background: linear-gradient(135deg, #e05320, #f2854a);
}

.ops-ecom-img.i2 {
  background: linear-gradient(135deg, #4f8cff, #7c5cff);
}

.ops-ecom-img.i3 {
  background: linear-gradient(135deg, #16b877, #3ddc84);
}

.ops-ecom-img.i4 {
  background: linear-gradient(135deg, #e0398f, #f2a63f);
}

.ops-ecom-img.i2::after {
  animation-delay: 1.4s;
}

.ops-ecom-img.i3::after {
  animation-delay: 2.8s;
}

.ops-ecom-img.i4::after {
  animation-delay: .7s;
}

.ops-ecom-name {
  display: block;
  margin: 5px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  color: #e7eaf2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-ecom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ops-ecom-price {
  font-size: 11px;
  font-weight: 800;
  color: #f3f5fa;
}

.ops-ecom-price small {
  color: #7f8798;
  font-weight: 600;
  font-size: 8px;
  text-decoration: line-through;
  margin-left: 3px;
}

.ops-ecom-add {
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background: rgba(224, 83, 32, .16);
  border: 1px solid rgba(224, 83, 32, .5);
  color: #f2854a;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ops-ecom-add.a1 {
  animation: opsEcomAddA1 8s ease-in-out infinite;
}

.ops-ecom-add.a2 {
  animation: opsEcomAddA2 8s ease-in-out infinite;
}

.ops-ecom-card.k1 {
  animation: opsEcomCardIn .55s cubic-bezier(.2, .75, .25, 1) both, opsEcomFlash1 8s ease-in-out infinite;
}

.ops-ecom-card.k2 {
  animation: opsEcomCardIn .55s cubic-bezier(.2, .75, .25, 1) both, opsEcomFlash2 8s ease-in-out infinite;
}

/* fly-to-cart dots + cursor */
.ops-ecom-fly {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e05320, #f2854a);
  box-shadow: 0 2px 8px rgba(224, 83, 32, .6);
  opacity: 0;
  z-index: 6;
}

.ops-ecom-fly.f1 {
  animation: opsEcomFly1 8s ease-in-out infinite;
}

.ops-ecom-fly.f2 {
  animation: opsEcomFly2 8s ease-in-out infinite;
}

.ops-ecom-cursor {
  position: absolute;
  left: 54%;
  top: 140px;
  z-index: 7;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
  animation: opsEcomCursor 8s cubic-bezier(.5, .05, .4, .95) infinite;
}

/* checkout stepper */
.ops-ecom-checkout {
  padding: 10px 14px 11px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.ops-ecom-steps {
  display: flex;
  align-items: center;
}

.ops-ecom-step {
  position: relative;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #8a93a6;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}

.ops-ecom-step.s1 {
  color: #fff;
  background: linear-gradient(135deg, #e05320, #f2854a);
  border-color: transparent;
  animation: opsEcomStep1 8s ease-in-out infinite;
}

.ops-ecom-step.s2 {
  color: #fff;
  background: linear-gradient(135deg, #e05320, #f2854a);
  border-color: transparent;
  animation: opsEcomStep2 8s ease-in-out infinite;
}

.ops-ecom-step.s3 {
  color: #fff;
  background: linear-gradient(135deg, #16b877, #3ddc84);
  border-color: transparent;
  animation: opsEcomStep3 8s ease-in-out infinite;
}

.ops-ecom-step.s3 i {
  animation: opsEcomCheck 8s ease-in-out infinite;
}

.ops-ecom-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #3ddc84;
  opacity: 0;
  animation: opsEcomRing 8s ease-in-out infinite;
}

.ops-ecom-track {
  position: relative;
  flex: 1;
  height: 3px;
  margin: 0 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.ops-ecom-fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #e05320, #f2854a);
}

.ops-ecom-track.t1 .ops-ecom-fill {
  animation: opsEcomFill1 8s ease-in-out infinite;
}

.ops-ecom-track.t2 .ops-ecom-fill {
  background: linear-gradient(90deg, #f2854a, #3ddc84);
  animation: opsEcomFill2 8s ease-in-out infinite;
}

.ops-ecom-status {
  position: relative;
  height: 16px;
  margin-top: 8px;
}

.ops-ecom-st {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
}

.ops-ecom-st i {
  font-size: 11px;
}

.ops-ecom-st.st-cart {
  color: #c7ccd8;
  animation: opsEcomStCart 8s ease-in-out infinite;
}

.ops-ecom-st.st-cart i {
  color: #f2854a;
}

.ops-ecom-st.st-pay {
  color: #c7ccd8;
  animation: opsEcomStPay 8s ease-in-out infinite;
}

.ops-ecom-st.st-pay i {
  color: #4f8cff;
}

.ops-ecom-st.st-done {
  color: #eafff4;
  animation: opsEcomStDone 8s ease-in-out infinite;
}

.ops-ecom-st.st-done i {
  color: #3ddc84;
}

/* floating chips */
.ops-ecom-chip-1 {
  top: 26px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-ecom-chip-2 {
  top: 120px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-ecom-chip-3 {
  bottom: 162px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-ecom-chip-1 i {
  color: #e05320;
}

.ops-ecom-chip-2 i {
  color: #4f8cff;
}

.ops-ecom-chip-3 i {
  color: #16b877;
}

/* ===== keyframes ===== */
@keyframes opsEcomPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0);
  }
}

@keyframes opsEcomCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes opsEcomSheen {

  0%,
  55% {
    left: -60%;
  }

  80%,
  100% {
    left: 130%;
  }
}

@keyframes opsEcomBadge {

  0%,
  17% {
    transform: scale(0);
  }

  23% {
    transform: scale(1.25);
  }

  27%,
  88% {
    transform: scale(1);
  }

  94%,
  100% {
    transform: scale(0);
  }
}

@keyframes opsEcomCount {

  0%,
  24% {
    transform: translateY(-16px);
  }

  30%,
  100% {
    transform: translateY(-32px);
  }
}

@keyframes opsEcomAddA1 {

  0%,
  17% {
    transform: scale(1);
    background: rgba(224, 83, 32, .16);
    color: #f2854a;
  }

  21% {
    transform: scale(.8);
    background: #e05320;
    color: #fff;
  }

  27%,
  100% {
    transform: scale(1);
    background: rgba(224, 83, 32, .16);
    color: #f2854a;
  }
}

@keyframes opsEcomAddA2 {

  0%,
  25% {
    transform: scale(1);
    background: rgba(224, 83, 32, .16);
    color: #f2854a;
  }

  29% {
    transform: scale(.8);
    background: #e05320;
    color: #fff;
  }

  35%,
  100% {
    transform: scale(1);
    background: rgba(224, 83, 32, .16);
    color: #f2854a;
  }
}

@keyframes opsEcomFlash1 {

  0%,
  17%,
  30%,
  100% {
    border-color: rgba(255, 255, 255, .07);
    box-shadow: none;
  }

  22% {
    border-color: rgba(224, 83, 32, .7);
    box-shadow: 0 0 0 3px rgba(224, 83, 32, .15);
  }
}

@keyframes opsEcomFlash2 {

  0%,
  25%,
  38%,
  100% {
    border-color: rgba(255, 255, 255, .07);
    box-shadow: none;
  }

  30% {
    border-color: rgba(224, 83, 32, .7);
    box-shadow: 0 0 0 3px rgba(224, 83, 32, .15);
  }
}

@keyframes opsEcomFly1 {

  0%,
  17% {
    opacity: 0;
    left: 40%;
    top: 102px;
    transform: scale(1);
  }

  19% {
    opacity: 1;
  }

  22% {
    opacity: 1;
    left: 82%;
    top: 14px;
    transform: scale(.5);
  }

  24%,
  100% {
    opacity: 0;
    left: 82%;
    top: 14px;
    transform: scale(.4);
  }
}

@keyframes opsEcomFly2 {

  0%,
  25% {
    opacity: 0;
    left: 86%;
    top: 102px;
    transform: scale(1);
  }

  27% {
    opacity: 1;
  }

  30% {
    opacity: 1;
    left: 84%;
    top: 14px;
    transform: scale(.5);
  }

  32%,
  100% {
    opacity: 0;
    left: 84%;
    top: 14px;
    transform: scale(.4);
  }
}

@keyframes opsEcomCursor {

  0%,
  12% {
    opacity: 0;
    left: 56%;
    top: 140px;
    transform: scale(1);
  }

  15% {
    opacity: 1;
  }

  18% {
    left: 40%;
    top: 100px;
    transform: scale(1);
  }

  20% {
    left: 40%;
    top: 100px;
    transform: scale(.82);
  }

  22% {
    left: 40%;
    top: 100px;
    transform: scale(1);
  }

  27% {
    left: 86%;
    top: 100px;
    transform: scale(1);
  }

  29% {
    left: 86%;
    top: 100px;
    transform: scale(.82);
  }

  31% {
    left: 86%;
    top: 100px;
    transform: scale(1);
  }

  36% {
    opacity: 1;
    left: 60%;
    top: 140px;
    transform: scale(1);
  }

  40% {
    opacity: 0;
    left: 60%;
    top: 140px;
  }

  100% {
    opacity: 0;
    left: 56%;
    top: 140px;
  }
}

@keyframes opsEcomStep1 {

  0%,
  18% {
    color: #8a93a6;
    background: rgba(255, 255, 255, .05);
    box-shadow: none;
  }

  22%,
  100% {
    color: #fff;
    background: linear-gradient(135deg, #e05320, #f2854a);
    box-shadow: 0 4px 12px rgba(224, 83, 32, .4);
  }
}

@keyframes opsEcomStep2 {

  0%,
  48% {
    color: #8a93a6;
    background: rgba(255, 255, 255, .05);
    box-shadow: none;
  }

  53%,
  100% {
    color: #fff;
    background: linear-gradient(135deg, #e05320, #f2854a);
    box-shadow: 0 4px 12px rgba(224, 83, 32, .4);
  }
}

@keyframes opsEcomStep3 {

  0%,
  62% {
    color: #8a93a6;
    background: rgba(255, 255, 255, .05);
    box-shadow: none;
  }

  67%,
  100% {
    color: #fff;
    background: linear-gradient(135deg, #16b877, #3ddc84);
    box-shadow: 0 4px 14px rgba(22, 184, 119, .45);
  }
}

@keyframes opsEcomCheck {

  0%,
  62% {
    transform: scale(0) rotate(-25deg);
    opacity: 0;
  }

  68% {
    transform: scale(1.3) rotate(0);
    opacity: 1;
  }

  72%,
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes opsEcomRing {

  0%,
  62% {
    opacity: 0;
    transform: scale(.6);
  }

  67% {
    opacity: .9;
    transform: scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes opsEcomFill1 {

  0%,
  36% {
    width: 0;
  }

  50%,
  100% {
    width: 100%;
  }
}

@keyframes opsEcomFill2 {

  0%,
  50% {
    width: 0;
  }

  64%,
  100% {
    width: 100%;
  }
}

@keyframes opsEcomStCart {

  0%,
  29% {
    opacity: 0;
    transform: translateY(4px);
  }

  33%,
  45% {
    opacity: 1;
    transform: none;
  }

  50%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes opsEcomStPay {

  0%,
  48% {
    opacity: 0;
    transform: translateY(4px);
  }

  53%,
  61% {
    opacity: 1;
    transform: none;
  }

  66%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes opsEcomStDone {

  0%,
  64% {
    opacity: 0;
    transform: translateY(4px);
  }

  69%,
  90% {
    opacity: 1;
    transform: none;
  }

  96%,
  100% {
    opacity: 0;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-ecom * {
    animation: none !important;
  }

  .ops-ecom-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .ops-ecom-badge {
    transform: scale(1) !important;
  }

  .ops-ecom-count {
    transform: translateY(-32px) !important;
  }

  .ops-ecom-fly,
  .ops-ecom-cursor,
  .ops-ecom-ring {
    opacity: 0 !important;
  }

  .ops-ecom-img::after {
    display: none !important;
  }

  .ops-ecom-fill {
    width: 100% !important;
  }

  .ops-ecom-st {
    opacity: 0 !important;
  }

  .ops-ecom-st.st-done {
    opacity: 1 !important;
  }

  .ops-ecom-step.s3 i {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- google-my-business (gmb) ---- */
.ops-gmb {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  color: #fff;
  font-family: inherit;
  line-height: 1.2
}

/* window bar */
.ops-gmb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-gmb-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #e8eaf0;
  letter-spacing: .2px
}

.ops-gmb-file i {
  color: #e05320;
  font-size: 12px
}

.ops-gmb-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #9aa4b2;
  background: rgba(255, 255, 255, .05);
  padding: 3px 9px;
  border-radius: 20px
}

.ops-gmb-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16b877;
  animation: opsGmbLive 2s ease-out infinite
}

@keyframes opsGmbLive {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, .5)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(22, 184, 119, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, 0)
  }
}

/* map stage */
.ops-gmb-map {
  position: relative;
  height: 152px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #eef3f7 0%, #e5ebf0 58%, #dce4ea 100%)
}

.ops-gmb-roads {
  position: absolute;
  inset: -10px;
  animation: opsGmbDrift 14s ease-in-out infinite
}

@keyframes opsGmbDrift {

  0%,
  100% {
    transform: translate(0, 0)
  }

  50% {
    transform: translate(-7px, -5px)
  }
}

.ops-gmb-road {
  position: absolute;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .03)
}

.ops-gmb-road-h1 {
  left: -12%;
  right: -12%;
  top: 33%;
  height: 10px;
  border-radius: 6px
}

.ops-gmb-road-h2 {
  left: -12%;
  right: -12%;
  bottom: 15%;
  height: 6px;
  opacity: .85
}

.ops-gmb-road-v1 {
  top: -12%;
  bottom: -12%;
  left: 25%;
  width: 9px;
  border-radius: 6px
}

.ops-gmb-road-v2 {
  top: -12%;
  bottom: -12%;
  right: 20%;
  width: 5px;
  opacity: .8
}

.ops-gmb-road-d1 {
  left: 58%;
  top: -30%;
  width: 6px;
  height: 170%;
  background: #fff;
  transform: rotate(26deg);
  transform-origin: center;
  border-radius: 6px;
  opacity: .9
}

.ops-gmb-park {
  position: absolute;
  left: 3%;
  bottom: 6%;
  width: 35%;
  height: 42%;
  background: #cfe9d4;
  border-radius: 45% 55% 52% 48%/52% 46% 54% 48%;
  opacity: .9
}

.ops-gmb-water {
  position: absolute;
  right: -8%;
  top: -8%;
  width: 42%;
  height: 48%;
  background: #bfdff7;
  border-radius: 52% 42% 60% 45%/55% 52% 45% 50%;
  opacity: .9
}

/* directions route */
.ops-gmb-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.ops-gmb-route polyline {
  fill: none;
  stroke: #4f8cff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 8;
  opacity: .6;
  vector-effect: non-scaling-stroke;
  animation: opsGmbRoute 1.1s linear infinite
}

@keyframes opsGmbRoute {
  to {
    stroke-dashoffset: -18
  }
}

/* nearby points of interest */
.ops-gmb-poi {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(15, 23, 42, .25)
}

.ops-gmb-poi-1 {
  left: 19%;
  top: 20%;
  background: #4f8cff;
  animation: opsGmbPoi 3s ease-in-out infinite
}

.ops-gmb-poi-2 {
  right: 15%;
  bottom: 32%;
  background: #ea4335;
  animation: opsGmbPoi 3s ease-in-out .8s infinite
}

.ops-gmb-poi-3 {
  left: 34%;
  bottom: 18%;
  background: #16b877;
  animation: opsGmbPoi 3s ease-in-out 1.5s infinite
}

@keyframes opsGmbPoi {

  0%,
  100% {
    transform: scale(1);
    opacity: .8
  }

  50% {
    transform: scale(1.3);
    opacity: 1
  }
}

/* location pin + radar ping */
.ops-gmb-pinwrap {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 0;
  height: 0
}

.ops-gmb-radar {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid rgba(224, 83, 32, .6);
  opacity: 0;
  animation: opsGmbRadar 2.6s ease-out infinite
}

.ops-gmb-radar-2 {
  animation-delay: 1.3s
}

@keyframes opsGmbRadar {
  0% {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    opacity: .75
  }

  100% {
    width: 94px;
    height: 94px;
    margin: -47px 0 0 -47px;
    opacity: 0
  }
}

.ops-gmb-pin-shadow {
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 7px;
  margin-left: -11px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 42, .4), rgba(15, 23, 42, 0));
  animation: opsGmbShadow 1.8s ease-in-out infinite
}

@keyframes opsGmbShadow {

  0%,
  100% {
    transform: scale(1);
    opacity: .5
  }

  50% {
    transform: scale(.68);
    opacity: .3
  }
}

.ops-gmb-pin {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  animation: opsGmbBounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 5px 5px rgba(224, 83, 32, .4))
}

.ops-gmb-pin i {
  font-size: 30px;
  line-height: 1;
  color: #e05320;
  background: linear-gradient(160deg, #f2854a, #e05320);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

@keyframes opsGmbBounce {

  0%,
  100% {
    transform: translate(-50%, -100%)
  }

  50% {
    transform: translate(-50%, -132%)
  }
}

.ops-gmb-ctrl {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f8cff;
  font-size: 12px;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .22)
}

/* business card */
.ops-gmb-card {
  padding: 12px 14px 13px;
  background: #171a22;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

.ops-gmb-head {
  display: flex;
  align-items: center;
  gap: 7px
}

.ops-gmb-name {
  font-size: 15px;
  font-weight: 700;
  color: #f4f6fa;
  letter-spacing: .2px
}

.ops-gmb-badge {
  display: inline-flex;
  color: #4f8cff;
  font-size: 13px
}

.ops-gmb-cat {
  font-size: 10.5px;
  color: #8b95a5;
  margin-top: 2px
}

.ops-gmb-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 11.5px
}

.ops-gmb-rate {
  font-weight: 700;
  color: #f4f6fa;
  font-size: 12.5px
}

.ops-gmb-stars {
  display: inline-flex;
  gap: 2px;
  color: #f2a63f;
  font-size: 11px
}

.ops-gmb-stars>* {
  animation: opsGmbStar .5s ease-out both
}

.ops-gmb-stars>*:nth-child(1) {
  animation-delay: .15s
}

.ops-gmb-stars>*:nth-child(2) {
  animation-delay: .27s
}

.ops-gmb-stars>*:nth-child(3) {
  animation-delay: .39s
}

.ops-gmb-stars>*:nth-child(4) {
  animation-delay: .51s
}

.ops-gmb-stars>*:nth-child(5) {
  animation-delay: .63s
}

@keyframes opsGmbStar {
  0% {
    transform: scale(.2);
    opacity: 0
  }

  60% {
    transform: scale(1.25)
  }

  100% {
    transform: scale(1);
    opacity: 1
  }
}

.ops-gmb-star-p {
  position: relative;
  display: inline-block
}

.ops-gmb-star-p .ops-gmb-star-e {
  color: #3a3f4b
}

.ops-gmb-star-p .ops-gmb-star-f {
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  overflow: hidden;
  color: #f2a63f
}

.ops-gmb-reviews {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #8b95a5
}

.ops-gmb-count {
  display: inline-block;
  width: 2em;
  height: 1.25em;
  line-height: 1.25em;
  overflow: hidden;
  text-align: right
}

.ops-gmb-count-strip {
  display: block;
  transform: translateY(-6.25em);
  animation: opsGmbCount 2.8s steps(5) .5s both
}

.ops-gmb-count-strip b {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  font-weight: 700;
  color: #dfe4ec;
  text-align: right
}

@keyframes opsGmbCount {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-6.25em)
  }
}

.ops-gmb-open {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: #9aa4b2
}

.ops-gmb-open b {
  color: #3ddc84;
  font-weight: 700
}

.ops-gmb-open-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16b877;
  flex: none;
  animation: opsGmbOpen 2s ease-out infinite
}

@keyframes opsGmbOpen {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, .45)
  }

  70% {
    box-shadow: 0 0 0 5px rgba(22, 184, 119, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, 0)
  }
}

.ops-gmb-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px
}

.ops-gmb-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600
}

.ops-gmb-btn i {
  font-size: 12px
}

.ops-gmb-btn-dir {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #5f97ff, #4f8cff);
  box-shadow: 0 5px 14px rgba(79, 140, 255, .35)
}

.ops-gmb-btn-dir::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 38%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-18deg);
  animation: opsGmbShine 3.6s ease-in-out infinite
}

@keyframes opsGmbShine {
  0% {
    left: -60%
  }

  42% {
    left: 130%
  }

  100% {
    left: 130%
  }
}

.ops-gmb-btn-call {
  color: #e6eaf1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12)
}

/* floating chips */
.ops-gmb-chip-1 {
  position: absolute;
  top: 26px;
  left: -8px
}

.ops-gmb-chip-1 i {
  color: #4f8cff
}

.ops-gmb-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px
}

.ops-gmb-chip-2 i {
  color: #f2a63f
}

.ops-gmb-chip-3 {
  position: absolute;
  bottom: 58px;
  left: -6px
}

.ops-gmb-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion: reduce) {
  .ops-gmb * {
    animation: none !important
  }

  .ops-gmb-stars>* {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-gmb-count-strip {
    transform: translateY(-6.25em) !important
  }

  .ops-gmb-radar {
    opacity: 0 !important
  }
}

/* ---- hybrid-app-development (hyb) ---- */
.ops-hyb {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: inherit;
  color: #e8eaf0;
}

.ops-hyb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-hyb-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #e8eaf0;
}

.ops-hyb-file i {
  color: #e05320;
  font-size: 12px;
}

.ops-hyb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #8b93a7;
}

.ops-hyb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsHybDot 1.8s ease-out infinite;
}

@keyframes opsHybDot {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0);
  }
}

.ops-hyb-tabs {
  position: relative;
  display: flex;
  padding: 9px 12px 11px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-hyb-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #6f7789;
  animation: opsHybTab 6s ease-in-out infinite;
}

.ops-hyb-tab i {
  font-size: 10px;
}

.ops-hyb-tab:nth-child(1) {
  animation-delay: 0s;
}

.ops-hyb-tab:nth-child(2) {
  animation-delay: 2s;
}

.ops-hyb-tab:nth-child(3) {
  animation-delay: 4s;
}

@keyframes opsHybTab {

  0%,
  100% {
    color: #6f7789;
  }

  4%,
  18% {
    color: #f4f6fb;
  }

  26% {
    color: #6f7789;
  }
}

.ops-hyb-tab-ink {
  position: absolute;
  bottom: 3px;
  left: 12px;
  width: calc((100% - 24px)/3);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e05320, #f2854a);
  box-shadow: 0 0 8px rgba(224, 83, 32, .5);
  animation: opsHybInk 6s ease-in-out infinite;
}

@keyframes opsHybInk {

  0%,
  20% {
    transform: translateX(0);
  }

  33%,
  53% {
    transform: translateX(100%);
  }

  66%,
  86% {
    transform: translateX(200%);
  }

  100% {
    transform: translateX(0);
  }
}

.ops-hyb-stage {
  position: relative;
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .035) 1px, transparent 1.6px) 0 0/15px 15px,
    radial-gradient(125% 92% at 50% 46%, rgba(224, 83, 32, .14), transparent 62%),
    #14161d;
  overflow: hidden;
}

.ops-hyb-phone,
.ops-hyb-tablet {
  position: relative;
  z-index: 2;
  background: linear-gradient(162deg, #232833, #161922);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.ops-hyb-phone {
  flex: 0 0 46px;
  width: 46px;
  height: 104px;
  border-radius: 14px;
  padding: 5px;
  animation: opsHybFloatA 4.6s ease-in-out infinite;
}

.ops-hyb-tablet {
  flex: 0 0 74px;
  width: 74px;
  height: 96px;
  border-radius: 13px;
  padding: 5px;
  animation: opsHybFloatB 4.6s ease-in-out infinite;
}

.ops-hyb-screen {
  position: relative;
  height: 100%;
  border-radius: 9px;
  background: #0e1016;
  border: 1px solid rgba(255, 255, 255, .05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ops-hyb-screen-p {
  padding: 11px 6px 8px;
  gap: 5px;
}

.ops-hyb-screen-t {
  padding: 8px 7px 11px;
  gap: 5px;
}

.ops-hyb-notch {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .16);
}

.ops-hyb-home {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .16);
}

.ops-hyb-ui-head {
  height: 9px;
  border-radius: 3px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, #e05320, #f2854a);
  opacity: .92;
}

.ops-hyb-ui-card {
  border-radius: 5px;
  background: rgba(224, 83, 32, .12);
  border: 1px solid rgba(224, 83, 32, .28);
  animation: opsHybSync 3.2s ease-in-out infinite;
}

.ops-hyb-ui-line {
  height: 4px;
  border-radius: 2px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .13);
}

.ops-hyb-line-s {
  width: 60%;
}

.ops-hyb-screen-p .ops-hyb-ui-card {
  flex: 1 1 auto;
  min-height: 20px;
}

.ops-hyb-t-body {
  flex: 1 1 auto;
  display: flex;
  gap: 5px;
  min-height: 0;
}

.ops-hyb-t-body .ops-hyb-ui-card {
  flex: 1.5 1 0;
}

.ops-hyb-t-side {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

@keyframes opsHybSync {

  0%,
  100% {
    background: rgba(224, 83, 32, .10);
    border-color: rgba(224, 83, 32, .22);
    box-shadow: 0 0 0 rgba(224, 83, 32, 0);
  }

  46%,
  54% {
    background: rgba(224, 83, 32, .30);
    border-color: rgba(224, 83, 32, .62);
    box-shadow: 0 0 12px rgba(224, 83, 32, .4);
  }
}

@keyframes opsHybFloatA {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2.5px);
  }
}

@keyframes opsHybFloatB {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(2.5px);
  }
}

.ops-hyb-core {
  position: relative;
  z-index: 2;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #e05320, #f2854a);
  box-shadow: 0 10px 26px rgba(224, 83, 32, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
  animation: opsHybCore 3.2s ease-in-out infinite;
}

.ops-hyb-core i {
  color: #fff;
  font-size: 21px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .28));
}

.ops-hyb-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 17px;
  border: 2px solid rgba(242, 133, 74, .7);
  animation: opsHybRing 3.2s ease-out infinite;
}

@keyframes opsHybCore {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.05);
  }
}

@keyframes opsHybRing {
  0% {
    transform: scale(1);
    opacity: .75;
  }

  70% {
    transform: scale(1.7);
    opacity: 0;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.ops-hyb-flow {
  position: relative;
  flex: 1 1 auto;
  min-width: 30px;
  height: 2px;
  align-self: center;
}

.ops-hyb-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(224, 83, 32, .05), rgba(224, 83, 32, .4), rgba(224, 83, 32, .05));
}

.ops-hyb-fdot {
  position: absolute;
  top: 50%;
  left: 45%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #f2854a;
  box-shadow: 0 0 8px rgba(242, 133, 74, .9);
}

.ops-hyb-flow-r .ops-hyb-fdot {
  animation: opsHybFlowR 1.9s linear infinite;
}

.ops-hyb-flow-l .ops-hyb-fdot {
  animation: opsHybFlowL 1.9s linear infinite;
}

.ops-hyb-flow .ops-hyb-fdot:nth-child(2) {
  animation-delay: .63s;
}

.ops-hyb-flow .ops-hyb-fdot:nth-child(3) {
  animation-delay: 1.26s;
}

@keyframes opsHybFlowR {
  0% {
    left: 0%;
    opacity: 0;
    transform: scale(.5);
  }

  16% {
    opacity: 1;
    transform: scale(1);
  }

  84% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    left: 100%;
    opacity: 0;
    transform: scale(.5);
  }
}

@keyframes opsHybFlowL {
  0% {
    left: 100%;
    opacity: 0;
    transform: scale(.5);
  }

  16% {
    opacity: 1;
    transform: scale(1);
  }

  84% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    left: 0%;
    opacity: 0;
    transform: scale(.5);
  }
}

.ops-hyb-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-size: 10px;
  font-weight: 600;
}

.ops-hyb-foot-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c3cad8;
}

.ops-hyb-foot-label i {
  color: #f2a63f;
  font-size: 11px;
  animation: opsHybBolt 1.6s ease-in-out infinite;
}

.ops-hyb-foot-branch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #767f92;
  font-weight: 600;
}

.ops-hyb-foot-branch i {
  font-size: 9px;
  color: #767f92;
}

.ops-hyb-foot-metric {
  margin-left: auto;
  color: #8b93a7;
  font-weight: 600;
  letter-spacing: .3px;
}

.ops-hyb-foot-metric b {
  color: #5b6376;
  font-weight: 600;
  font-size: 8.5px;
}

@keyframes opsHybBolt {

  0%,
  100% {
    opacity: .5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

.ops-hyb-chip-1 {
  top: 28px;
  left: -8px;
}

.ops-hyb-chip-1 i {
  color: #e05320;
}

.ops-hyb-chip-2 {
  top: 176px;
  right: -12px;
}

.ops-hyb-chip-2 i {
  color: #4f8cff;
}

.ops-hyb-chip-3 {
  bottom: 58px;
  left: -6px;
}

.ops-hyb-chip-3 i {
  color: #16b877;
}

@media (prefers-reduced-motion: reduce) {
  .ops-hyb * {
    animation: none !important;
  }

  .ops-hyb-fdot {
    opacity: 1 !important;
  }

  .ops-hyb-core-ring {
    opacity: .5 !important;
  }
}

/* ---- invoice-software-development (invc) ---- */
.ops-invc {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
}

/* window bar */
.ops-invc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ops-invc-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: #e7e9ee;
  letter-spacing: .2px
}

.ops-invc-file i {
  color: #e05320;
  font-size: 12px
}

.ops-invc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #9aa3b2;
  background: rgba(255, 255, 255, .05);
  padding: 3px 9px;
  border-radius: 999px
}

.ops-invc-sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16b877;
  box-shadow: 0 0 0 0 rgba(22, 184, 119, .5);
  animation: opsInvcPulse 1.8s ease-out infinite
}

@keyframes opsInvcPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, .5)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(22, 184, 119, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, 0)
  }
}

/* stage + paper */
.ops-invc-stage {
  position: relative;
  display: flex;
  padding: 14px;
  min-height: 200px;
  background: radial-gradient(120% 82% at 50% 0%, #1a1d26 0%, #12141b 72%);
}

.ops-invc-paper {
  position: relative;
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 12px 13px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  overflow: hidden;
  opacity: 0;
  animation: opsInvcPaper 7s ease-in-out infinite;
}

@keyframes opsInvcPaper {
  0% {
    opacity: 0
  }

  5% {
    opacity: 1
  }

  92% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* letterhead */
.ops-invc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between
}

.ops-invc-brand {
  display: flex;
  align-items: center;
  gap: 8px
}

.ops-invc-logo {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  background: linear-gradient(135deg, #e05320, #f2854a);
  box-shadow: 0 4px 10px rgba(224, 83, 32, .35)
}

.ops-invc-co {
  display: flex;
  flex-direction: column;
  line-height: 1.15
}

.ops-invc-co b {
  font-size: 12px;
  font-weight: 800;
  color: #12141b;
  letter-spacing: .2px
}

.ops-invc-co small {
  font-size: 8.5px;
  color: #8a92a2;
  letter-spacing: .3px
}

.ops-invc-meta {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.15
}

.ops-invc-meta b {
  font-size: 12.5px;
  font-weight: 800;
  color: #e05320;
  letter-spacing: 2px
}

.ops-invc-meta small {
  font-size: 8.5px;
  color: #8a92a2;
  letter-spacing: .4px
}

.ops-invc-billrow {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #eef0f4;
  font-size: 9px;
  color: #8a92a2
}

.ops-invc-billrow b {
  color: #3a4150;
  font-weight: 700
}

/* line items */
.ops-invc-rows {
  margin-top: 6px;
  display: flex;
  flex-direction: column
}

.ops-invc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px solid #f1f3f6;
  opacity: 0;
  transform: translateY(6px)
}

.ops-invc-desc {
  color: #3a4150;
  font-weight: 600
}

.ops-invc-amt {
  color: #12141b;
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

.ops-invc-r1 {
  animation: opsInvcR1 7s ease-out infinite
}

.ops-invc-r2 {
  animation: opsInvcR2 7s ease-out infinite
}

.ops-invc-r3 {
  animation: opsInvcR3 7s ease-out infinite
}

.ops-invc-r4 {
  border-bottom: none;
  animation: opsInvcR4 7s ease-out infinite
}

@keyframes opsInvcR1 {

  0%,
  7% {
    opacity: 0;
    transform: translateY(6px)
  }

  12%,
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsInvcR2 {

  0%,
  14% {
    opacity: 0;
    transform: translateY(6px)
  }

  19%,
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsInvcR3 {

  0%,
  21% {
    opacity: 0;
    transform: translateY(6px)
  }

  26%,
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsInvcR4 {

  0%,
  28% {
    opacity: 0;
    transform: translateY(6px)
  }

  33%,
  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

/* total odometer */
.ops-invc-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 2px solid #12141b;
  transform-origin: right center;
  animation: opsInvcTotalPop 7s ease-out infinite
}

.ops-invc-tlabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3a4150
}

.ops-invc-tval {
  height: 20px;
  overflow: hidden;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: #12141b;
  font-variant-numeric: tabular-nums
}

.ops-invc-roll {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  animation: opsInvcRoll 7s cubic-bezier(.6, 0, .3, 1) infinite
}

.ops-invc-roll span {
  height: 20px;
  line-height: 20px;
  display: block;
  white-space: nowrap;
  text-align: right
}

@keyframes opsInvcRoll {

  0%,
  13% {
    transform: translateY(0)
  }

  16%,
  20% {
    transform: translateY(-20px)
  }

  23%,
  27% {
    transform: translateY(-40px)
  }

  30%,
  34% {
    transform: translateY(-60px)
  }

  37%,
  100% {
    transform: translateY(-80px)
  }
}

@keyframes opsInvcTotalPop {

  0%,
  36% {
    transform: scale(1)
  }

  39% {
    transform: scale(1.05)
  }

  43%,
  100% {
    transform: scale(1)
  }
}

/* PAID stamp */
.ops-invc-stamp {
  position: absolute;
  right: 26px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  color: #0e9f6a;
  border: 2.5px solid #16b877;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: rgba(22, 184, 119, .06);
  box-shadow: inset 0 0 0 1px rgba(22, 184, 119, .3);
  opacity: 0;
  transform: translate(0, -8px) rotate(6deg) scale(2.4);
  animation: opsInvcStamp 7s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

.ops-invc-stamp i {
  font-size: 13px
}

@keyframes opsInvcStamp {

  0%,
  40% {
    opacity: 0;
    transform: translate(0, -8px) rotate(6deg) scale(2.4)
  }

  46% {
    opacity: 1;
    transform: translate(0, 0) rotate(-16deg) scale(.92)
  }

  50% {
    opacity: 1;
    transform: translate(0, 0) rotate(-11deg) scale(1.06)
  }

  54%,
  92% {
    opacity: 1;
    transform: translate(0, 0) rotate(-13deg) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(0, 0) rotate(-13deg) scale(1)
  }
}

/* footer toolbar */
.ops-invc-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

.ops-invc-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #c7cdd8;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: 4px 9px;
  border-radius: 7px
}

.ops-invc-btn i {
  font-size: 10px;
  color: #9aa3b2
}

.ops-invc-prog {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  position: relative
}

.ops-invc-progfill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e05320, #f2854a);
  animation: opsInvcProg 7s ease-in-out infinite
}

@keyframes opsInvcProg {

  0%,
  5% {
    width: 8%
  }

  12% {
    width: 28%
  }

  19% {
    width: 50%
  }

  26% {
    width: 72%
  }

  33% {
    width: 92%
  }

  40%,
  92% {
    width: 100%
  }

  100% {
    width: 8%
  }
}

/* floating chips: position + icon colour only */
.ops-invc-chip-1 {
  top: 26px;
  left: -8px
}

.ops-invc-chip-1 i {
  color: #e05320
}

.ops-invc-chip-2 {
  top: 150px;
  right: -12px
}

.ops-invc-chip-2 i {
  color: #4f8cff
}

.ops-invc-chip-3 {
  bottom: 70px;
  left: -6px
}

.ops-invc-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion: reduce) {
  .ops-invc * {
    animation: none !important
  }

  .ops-invc-paper {
    opacity: 1 !important
  }

  .ops-invc-row {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-invc-total {
    transform: none !important
  }

  .ops-invc-roll {
    transform: translateY(-80px) !important
  }

  .ops-invc-stamp {
    opacity: 1 !important;
    transform: translate(0, 0) rotate(-13deg) scale(1) !important
  }

  .ops-invc-progfill {
    width: 100% !important
  }
}

/* ---- ios-app-development (iosd) ---- */
.ops-iosd {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 30px;
  overflow: hidden;
  background: #f2f2f7;
  border: 1px solid #e6e7ee;
  box-shadow: 0 24px 55px rgba(15, 17, 23, .30);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* status bar */
.ops-iosd-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 6px;
}

.ops-iosd-time {
  font-size: 13px;
  font-weight: 700;
  color: #1c1c1e;
  letter-spacing: .2px;
}

.ops-iosd-island {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 80px;
  height: 20px;
  background: #000;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}

.ops-iosd-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 5px rgba(52, 199, 89, .85);
  animation: opsIosdLive 2.4s ease-in-out infinite;
}

.ops-iosd-cam {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3b3f48, #08090c);
}

.ops-iosd-sys {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ops-iosd-signal {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 11px;
}

.ops-iosd-signal b {
  width: 2.6px;
  background: #1c1c1e;
  border-radius: 1px;
}

.ops-iosd-signal b:nth-child(1) {
  height: 4px
}

.ops-iosd-signal b:nth-child(2) {
  height: 6px
}

.ops-iosd-signal b:nth-child(3) {
  height: 8px
}

.ops-iosd-signal b:nth-child(4) {
  height: 11px
}

.ops-iosd-sys .fa-wifi {
  font-size: 12px;
  color: #1c1c1e;
}

.ops-iosd-batt {
  position: relative;
  width: 22px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(28, 28, 30, .4);
  padding: 1.5px;
}

.ops-iosd-batt::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 3px;
  width: 1.6px;
  height: 4px;
  background: rgba(28, 28, 30, .4);
  border-radius: 0 1px 1px 0;
}

.ops-iosd-batt-fill {
  display: block;
  height: 100%;
  width: 82%;
  background: #1c1c1e;
  border-radius: 1.5px;
}

/* nav / large title */
.ops-iosd-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 3px 16px 0;
  min-height: 19px;
}

.ops-iosd-edit {
  color: #007aff;
  font-size: 13.5px;
  font-weight: 500;
}

.ops-iosd-title {
  margin: 1px 16px 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: #1c1c1e;
}

/* segmented control */
.ops-iosd-seg {
  position: relative;
  display: flex;
  align-items: center;
  margin: 11px 16px 0;
  height: 30px;
  padding: 2px;
  background: rgba(118, 118, 128, .14);
  border-radius: 9px;
}

.ops-iosd-seg-a,
.ops-iosd-seg-b {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 26px;
  position: relative;
  z-index: 2;
}

.ops-iosd-seg-a {
  color: #1c1c1e;
  animation: opsIosdSegTextA 5.5s ease-in-out infinite;
}

.ops-iosd-seg-b {
  color: #8e8e93;
  animation: opsIosdSegTextB 5.5s ease-in-out infinite;
}

.ops-iosd-seg-pill {
  position: absolute;
  z-index: 1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 1px rgba(0, 0, 0, .08);
  animation: opsIosdSeg 5.5s ease-in-out infinite;
}

/* grouped list */
.ops-iosd-list {
  margin: 12px 16px 0;
  background: #fff;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 17, 23, .05);
}

.ops-iosd-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  opacity: 0;
  animation: opsIosdRise .55s ease-out forwards;
}

.ops-iosd-row:nth-child(1) {
  animation-delay: .15s
}

.ops-iosd-row:nth-child(2) {
  animation-delay: .28s
}

.ops-iosd-row:nth-child(3) {
  animation-delay: .41s
}

.ops-iosd-row+.ops-iosd-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 44px;
  right: 0;
  height: 1px;
  background: rgba(60, 60, 67, .11);
}

.ops-iosd-ic {
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}

.ops-iosd-ic-orange {
  background: linear-gradient(160deg, #f2854a, #e05320)
}

.ops-iosd-ic-blue {
  background: linear-gradient(160deg, #4f8cff, #007aff)
}

.ops-iosd-ic-purple {
  background: linear-gradient(160deg, #7c5cff, #5e5ce6)
}

.ops-iosd-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #1c1c1e;
}

.ops-iosd-val {
  font-size: 13px;
  color: #8e8e93;
}

.ops-iosd-chev {
  font-size: 13px;
  color: #c7c7cc;
  margin-left: 3px;
}

.ops-iosd-toggle {
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 24px;
  background: #34c759;
  animation: opsIosdTrack 4.6s ease-in-out infinite;
}

.ops-iosd-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 0 1px rgba(0, 0, 0, .1);
  transform: translateX(16px);
  animation: opsIosdKnob 4.6s ease-in-out infinite;
}

/* App Store rating badge */
.ops-iosd-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 9px 12px;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(15, 17, 23, .05);
}

.ops-iosd-appicon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(160deg, #3aa0ff, #0a6cf0);
  box-shadow: 0 2px 5px rgba(10, 108, 240, .35);
}

.ops-iosd-badge-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ops-iosd-stars {
  position: relative;
  display: flex;
  gap: 2px;
  overflow: hidden;
  width: max-content;
}

.ops-iosd-stars .fa-star {
  font-size: 12px;
  color: #f2a63f;
  opacity: 0;
  transform: scale(0);
  animation: opsIosdStar .42s cubic-bezier(.5, 1.7, .5, 1) forwards;
}

.ops-iosd-stars .fa-star:nth-child(1) {
  animation-delay: .5s
}

.ops-iosd-stars .fa-star:nth-child(2) {
  animation-delay: .62s
}

.ops-iosd-stars .fa-star:nth-child(3) {
  animation-delay: .74s
}

.ops-iosd-stars .fa-star:nth-child(4) {
  animation-delay: .86s
}

.ops-iosd-stars .fa-star:nth-child(5) {
  animation-delay: .98s
}

.ops-iosd-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: skewX(-18deg) translateX(-40px);
  animation: opsIosdShine 4.5s ease-in-out 1.3s infinite;
}

.ops-iosd-badge-sub {
  font-size: 11px;
  font-weight: 500;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-iosd-score {
  flex: none;
  font-size: 26px;
  font-weight: 800;
  color: #1c1c1e;
  letter-spacing: -1px;
  line-height: 1;
}

/* home indicator */
.ops-iosd-home {
  display: block;
  width: 112px;
  height: 5px;
  border-radius: 5px;
  background: rgba(28, 28, 30, .85);
  margin: 12px auto 8px;
}

/* floating chips */
.ops-iosd-chip-1 {
  top: 22px;
  left: -6px;
}

.ops-iosd-chip-2 {
  top: 176px;
  right: -10px;
}

.ops-iosd-chip-3 {
  bottom: 34px;
  left: -6px;
}

.ops-iosd-chip-1 i {
  color: #f05138
}

.ops-iosd-chip-2 i {
  color: #7c5cff
}

.ops-iosd-chip-3 i {
  color: #007aff
}

/* keyframes */
@keyframes opsIosdLive {

  0%,
  100% {
    opacity: .5;
    transform: scale(.82)
  }

  50% {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes opsIosdSeg {

  0%,
  38% {
    transform: translateX(0)
  }

  50%,
  88% {
    transform: translateX(100%)
  }

  100% {
    transform: translateX(0)
  }
}

@keyframes opsIosdSegTextA {

  0%,
  38% {
    color: #1c1c1e
  }

  50%,
  88% {
    color: #8e8e93
  }

  100% {
    color: #1c1c1e
  }
}

@keyframes opsIosdSegTextB {

  0%,
  38% {
    color: #8e8e93
  }

  50%,
  88% {
    color: #1c1c1e
  }

  100% {
    color: #8e8e93
  }
}

@keyframes opsIosdKnob {

  0%,
  16% {
    transform: translateX(0)
  }

  30%,
  80% {
    transform: translateX(16px)
  }

  94%,
  100% {
    transform: translateX(0)
  }
}

@keyframes opsIosdTrack {

  0%,
  16% {
    background: #e6e6ea
  }

  30%,
  80% {
    background: #34c759
  }

  94%,
  100% {
    background: #e6e6ea
  }
}

@keyframes opsIosdRise {
  from {
    opacity: 0;
    transform: translateY(9px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsIosdStar {
  0% {
    opacity: 0;
    transform: scale(0)
  }

  100% {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes opsIosdShine {
  0% {
    transform: skewX(-18deg) translateX(-40px)
  }

  55%,
  100% {
    transform: skewX(-18deg) translateX(120px)
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops-iosd,
  .ops-iosd * {
    animation: none !important
  }

  .ops-iosd-row,
  .ops-iosd-stars .fa-star {
    opacity: 1 !important;
    transform: none !important
  }
}

/* ---- it-consultancy (itc) ---- */
.ops-itc {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  color: #fff;
  font-family: inherit;
  line-height: 1.2
}

.ops-itc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-itc-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #c8cdd7
}

.ops-itc-file i {
  color: #e05320;
  font-size: 12px
}

.ops-itc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(22, 184, 119, .12);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #8fd9bd
}

.ops-itc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16b877;
  animation: opsItcDot 1.8s ease-out infinite
}

@keyframes opsItcDot {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, .55)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(22, 184, 119, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, 0)
  }
}

.ops-itc-stage {
  position: relative;
  height: 146px;
  overflow: hidden;
  background: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0/100% 22px, linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0/22px 100%, radial-gradient(130% 100% at 50% -10%, #1b1f2a 0%, #14161d 72%)
}

.ops-itc-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(79, 140, 255, .07) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: opsItcSweep 6.5s ease-in-out infinite
}

@keyframes opsItcSweep {
  0% {
    transform: translateX(-100%)
  }

  55%,
  100% {
    transform: translateX(100%)
  }
}

.ops-itc-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

.ops-itc-link {
  fill: none;
  stroke: rgba(122, 142, 182, .38);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
  animation: opsItcDash 20s linear infinite
}

@keyframes opsItcDash {
  to {
    stroke-dashoffset: -240
  }
}

.ops-itc-pulse {
  fill: #f2854a;
  filter: drop-shadow(0 0 2px rgba(240, 133, 74, .85))
}

.ops-itc-pulse-1 {
  animation: opsItcPulse1 1.9s linear infinite
}

.ops-itc-pulse-2 {
  animation: opsItcPulse2 1.9s linear infinite .5s
}

.ops-itc-pulse-3 {
  animation: opsItcPulse3 1.9s linear infinite 1s
}

@keyframes opsItcPulse1 {
  0% {
    transform: translate(0, 0);
    opacity: 0
  }

  14% {
    opacity: 1
  }

  86% {
    opacity: 1
  }

  100% {
    transform: translate(90.72px, -49.5px);
    opacity: 0
  }
}

@keyframes opsItcPulse2 {
  0% {
    transform: translate(0, 0);
    opacity: 0
  }

  14% {
    opacity: 1
  }

  86% {
    opacity: 1
  }

  100% {
    transform: translate(87.36px, 49.5px);
    opacity: 0
  }
}

@keyframes opsItcPulse3 {
  0% {
    transform: translate(0, 0);
    opacity: 0
  }

  14% {
    opacity: 1
  }

  86% {
    opacity: 1
  }

  100% {
    transform: translate(67.2px, -49.5px);
    opacity: 0
  }
}

.ops-itc-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}

.ops-itc-tile {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: linear-gradient(155deg, #252a38, #161922);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, .4)
}

.ops-itc-tile::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  animation: opsItcRing 2.4s ease-out infinite
}

.ops-itc-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #aab2c2
}

.ops-itc-node-client {
  left: 13%;
  top: 64%
}

.ops-itc-node-server {
  left: 40%;
  top: 31%
}

.ops-itc-node-cloud {
  left: 66%;
  top: 64%
}

.ops-itc-node-db {
  left: 86%;
  top: 31%
}

.ops-itc-node-client .ops-itc-tile i {
  color: #4f8cff
}

.ops-itc-node-server .ops-itc-tile i {
  color: #f2854a
}

.ops-itc-node-cloud .ops-itc-tile i {
  color: #7c5cff
}

.ops-itc-node-db .ops-itc-tile i {
  color: #3ddc84
}

.ops-itc-node-client .ops-itc-tile::after {
  animation-delay: 0s
}

.ops-itc-node-server .ops-itc-tile::after {
  animation-delay: .5s
}

.ops-itc-node-cloud .ops-itc-tile::after {
  animation-delay: 1s
}

.ops-itc-node-db .ops-itc-tile::after {
  animation-delay: 1.5s
}

@keyframes opsItcRing {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 133, 74, .45)
  }

  70% {
    box-shadow: 0 0 0 9px rgba(240, 133, 74, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(240, 133, 74, 0)
  }
}

.ops-itc-road {
  position: relative;
  padding: 10px 16px 9px;
  background: #101219;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-itc-cap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #7b8494;
  margin-bottom: 9px
}

.ops-itc-cap i {
  font-size: 9px;
  color: #3ddc84
}

.ops-itc-track {
  position: relative
}

.ops-itc-track::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 4px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .09)
}

.ops-itc-fill {
  position: absolute;
  left: 5px;
  top: 4px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #e05320, #f2854a);
  z-index: 1;
  animation: opsItcFill 5s ease-in-out infinite
}

.ops-itc-play {
  position: absolute;
  right: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(50%, -50%);
  box-shadow: 0 0 0 3px rgba(240, 133, 74, .3)
}

@keyframes opsItcFill {
  0% {
    width: 0
  }

  82% {
    width: calc(100% - 10px)
  }

  100% {
    width: calc(100% - 10px)
  }
}

.ops-itc-stops {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between
}

.ops-itc-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #6b7280
}

.ops-itc-stop i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #171a22;
  border: 2px solid #3a3f4d
}

.ops-itc-stop-1 i {
  animation: opsItcStop1 5s ease-in-out infinite
}

.ops-itc-stop-2 i {
  animation: opsItcStop2 5s ease-in-out infinite
}

.ops-itc-stop-3 i {
  animation: opsItcStop3 5s ease-in-out infinite
}

.ops-itc-stop-4 i {
  animation: opsItcStop4 5s ease-in-out infinite
}

@keyframes opsItcStop1 {

  0%,
  4% {
    background: #171a22;
    border-color: #3a3f4d
  }

  10%,
  100% {
    background: #f2854a;
    border-color: #f2854a;
    box-shadow: 0 0 7px rgba(240, 133, 74, .6)
  }
}

@keyframes opsItcStop2 {

  0%,
  26% {
    background: #171a22;
    border-color: #3a3f4d
  }

  32%,
  100% {
    background: #f2854a;
    border-color: #f2854a;
    box-shadow: 0 0 7px rgba(240, 133, 74, .6)
  }
}

@keyframes opsItcStop3 {

  0%,
  48% {
    background: #171a22;
    border-color: #3a3f4d
  }

  54%,
  100% {
    background: #f2854a;
    border-color: #f2854a;
    box-shadow: 0 0 7px rgba(240, 133, 74, .6)
  }
}

@keyframes opsItcStop4 {

  0%,
  72% {
    background: #171a22;
    border-color: #3a3f4d
  }

  78%,
  100% {
    background: #f2854a;
    border-color: #f2854a;
    box-shadow: 0 0 7px rgba(240, 133, 74, .6)
  }
}

.ops-itc-check {
  padding: 9px 16px 10px;
  background: #14161d;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ops-itc-cap2 {
  margin-bottom: 0
}

.ops-itc-cap2 i {
  color: #e05320
}

.ops-itc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #c7ccd6
}

.ops-itc-box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  background: #1c1f28;
  border: 1.5px solid #333846
}

.ops-itc-box i {
  color: #3ddc84;
  opacity: 0;
  transform: scale(.4)
}

.ops-itc-row-1 .ops-itc-box {
  animation: opsItcBox1 4.6s ease-in-out infinite
}

.ops-itc-row-2 .ops-itc-box {
  animation: opsItcBox2 4.6s ease-in-out infinite
}

.ops-itc-row-3 .ops-itc-box {
  animation: opsItcBox3 4.6s ease-in-out infinite
}

.ops-itc-row-1 .ops-itc-box i {
  animation: opsItcTick1 4.6s ease-in-out infinite
}

.ops-itc-row-2 .ops-itc-box i {
  animation: opsItcTick2 4.6s ease-in-out infinite
}

.ops-itc-row-3 .ops-itc-box i {
  animation: opsItcTick3 4.6s ease-in-out infinite
}

@keyframes opsItcBox1 {

  0%,
  10% {
    background: #1c1f28;
    border-color: #333846
  }

  16%,
  90% {
    background: rgba(22, 184, 119, .16);
    border-color: #16b877
  }

  96%,
  100% {
    background: #1c1f28;
    border-color: #333846
  }
}

@keyframes opsItcBox2 {

  0%,
  28% {
    background: #1c1f28;
    border-color: #333846
  }

  34%,
  90% {
    background: rgba(22, 184, 119, .16);
    border-color: #16b877
  }

  96%,
  100% {
    background: #1c1f28;
    border-color: #333846
  }
}

@keyframes opsItcBox3 {

  0%,
  46% {
    background: #1c1f28;
    border-color: #333846
  }

  52%,
  90% {
    background: rgba(22, 184, 119, .16);
    border-color: #16b877
  }

  96%,
  100% {
    background: #1c1f28;
    border-color: #333846
  }
}

@keyframes opsItcTick1 {

  0%,
  11% {
    opacity: 0;
    transform: scale(.4)
  }

  18%,
  90% {
    opacity: 1;
    transform: scale(1)
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(.4)
  }
}

@keyframes opsItcTick2 {

  0%,
  29% {
    opacity: 0;
    transform: scale(.4)
  }

  36%,
  90% {
    opacity: 1;
    transform: scale(1)
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(.4)
  }
}

@keyframes opsItcTick3 {

  0%,
  47% {
    opacity: 0;
    transform: scale(.4)
  }

  54%,
  90% {
    opacity: 1;
    transform: scale(1)
  }

  96%,
  100% {
    opacity: 0;
    transform: scale(.4)
  }
}

.ops-itc-chip-1 {
  top: 16px;
  left: -8px
}

.ops-itc-chip-2 {
  top: 158px;
  right: -12px
}

.ops-itc-chip-3 {
  bottom: 74px;
  left: -8px
}

.ops-itc-chip-1 i {
  color: #e05320
}

.ops-itc-chip-2 i {
  color: #4f8cff
}

.ops-itc-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion: reduce) {
  .ops-itc * {
    animation: none !important
  }

  .ops-itc-box i {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-itc-box {
    background: rgba(22, 184, 119, .16) !important;
    border-color: #16b877 !important
  }

  .ops-itc-fill {
    width: 70% !important
  }

  .ops-itc-stop-1 i,
  .ops-itc-stop-2 i,
  .ops-itc-stop-3 i {
    background: #f2854a !important;
    border-color: #f2854a !important
  }

  .ops-itc-pulse {
    opacity: 1 !important
  }
}

/* ---- landing-page-development (lpg) ---- */
@property --lpgw {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0
}

@property --lpgf {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0
}

.ops-lpg,
.ops-lpg * {
  box-sizing: border-box
}

.ops-lpg {
  --lpg-orange: #e05320;
  --lpg-orange2: #f2854a;
  --lpg-blue: #4f8cff;
  --lpg-green: #16b877;
  --lpg-green2: #3ddc84;
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: inherit;
}

/* window bar */
.ops-lpg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-lpg-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .82)
}

.ops-lpg-file i {
  font-size: 11px;
  color: var(--lpg-orange)
}

.ops-lpg-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--lpg-green2);
  background: rgba(22, 184, 119, .12);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-lpg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lpg-green2);
  animation: opsLpgDot 1.6s ease-in-out infinite
}

/* hero stage (rendered light page) */
.ops-lpg-stage {
  position: relative;
  overflow: hidden;
  padding: 15px 16px 14px;
  min-height: 168px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%)
}

.ops-lpg-glow {
  position: absolute;
  top: -30px;
  left: -18px;
  width: 190px;
  height: 150px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 40% 40%, rgba(224, 83, 32, .16), transparent 68%);
  animation: opsLpgGlow 5s ease-in-out infinite
}

.ops-lpg-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .9px;
  color: var(--lpg-orange);
  background: rgba(224, 83, 32, .1);
  padding: 4px 9px;
  border-radius: 20px;
  opacity: 0;
  animation: opsLpgRise .55s ease-out .1s forwards
}

.ops-lpg-eyebrow i {
  font-size: 8px
}

.ops-lpg-h1 {
  position: relative;
  z-index: 1;
  margin: 9px 0 0;
  font-size: 18px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.3px;
  color: #151821;
  opacity: 0;
  animation: opsLpgRise .55s ease-out .22s forwards
}

.ops-lpg-h1 span {
  background: linear-gradient(90deg, var(--lpg-orange), var(--lpg-orange2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent
}

.ops-lpg-sub {
  position: relative;
  z-index: 1;
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: #6b7280;
  opacity: 0;
  animation: opsLpgRise .55s ease-out .34s forwards
}

.ops-lpg-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  opacity: 0;
  animation: opsLpgRise .55s ease-out .46s forwards
}

.ops-lpg-cta {
  position: relative;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--lpg-orange), var(--lpg-orange2));
  padding: 9px 15px;
  border-radius: 11px;
  transform-origin: center;
  box-shadow: 0 8px 18px rgba(224, 83, 32, .35);
  animation: opsLpgCta 2.4s ease-in-out infinite, opsLpgPress 4.2s ease-in-out infinite
}

.ops-lpg-cta i {
  font-size: 10px
}

.ops-lpg-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-170%) skewX(-18deg);
  animation: opsLpgShine 2.8s ease-in-out 1s infinite
}

.ops-lpg-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #8b93a0
}

.ops-lpg-ghost i {
  font-size: 8px;
  color: var(--lpg-orange)
}

.ops-lpg-trust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  opacity: 0;
  animation: opsLpgRise .55s ease-out .58s forwards
}

.ops-lpg-tlabel {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #a2a9b4
}

.ops-lpg-trust>i {
  font-size: 12px;
  color: #c2c8d0
}

.ops-lpg-cursor {
  position: absolute;
  left: 30%;
  top: 57%;
  z-index: 4;
  font-size: 15px;
  color: #1b1e27;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
  animation: opsLpgCursor 4.2s ease-in-out infinite
}

/* A/B test footer */
.ops-lpg-ab {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  background: #14161d;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

.ops-lpg-abL {
  flex: 1.2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.ops-lpg-abhead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .5)
}

.ops-lpg-abhead i {
  font-size: 9px;
  color: var(--lpg-green2)
}

.ops-lpg-row {
  display: flex;
  align-items: center;
  gap: 8px
}

.ops-lpg-vlabel {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff
}

.ops-lpg-vA {
  background: rgba(79, 140, 255, .9)
}

.ops-lpg-vB {
  background: linear-gradient(135deg, var(--lpg-green), var(--lpg-green2))
}

.ops-lpg-track {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden
}

.ops-lpg-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px
}

.ops-lpg-fillA {
  background: linear-gradient(90deg, #4f8cff, #6f9dff);
  animation: opsLpgGrowA 1s cubic-bezier(.2, .8, .2, 1) 1s forwards
}

.ops-lpg-fillB {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--lpg-green), var(--lpg-green2));
  animation: opsLpgGrowB 1.1s cubic-bezier(.2, .8, .2, 1) 1.15s forwards
}

.ops-lpg-fillB::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-100%);
  animation: opsLpgShineB 2.6s ease-in-out 2.4s infinite
}

.ops-lpg-vpct {
  flex: none;
  min-width: 26px;
  text-align: right;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums
}

.ops-lpg-winner {
  flex: none;
  min-width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 8px;
  font-weight: 800;
  color: var(--lpg-green2);
  background: rgba(22, 184, 119, .14);
  padding: 3px 6px;
  border-radius: 20px;
  opacity: 0;
  animation: opsLpgRise .5s ease-out 2.2s forwards
}

.ops-lpg-winner i {
  font-size: 8px
}

.ops-lpg-abR {
  flex: .9;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px
}

.ops-lpg-cvrnum {
  line-height: 1;
  counter-reset: lpgw var(--lpgw) lpgf var(--lpgf);
  animation: opsLpgCount 3.2s cubic-bezier(.2, .8, .25, 1) .9s forwards
}

.ops-lpg-cvrnum::after {
  content: counter(lpgw) "." counter(lpgf) "%";
  display: inline-block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--lpg-orange), var(--lpg-orange2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent
}

.ops-lpg-cvrlab {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .5)
}

.ops-lpg-cvrlab i {
  font-size: 8px;
  color: var(--lpg-green2)
}

/* floating chips: position + icon colour only */
.ops-lpg-chip-1 {
  top: 22px;
  left: -6px
}

.ops-lpg-chip-2 {
  top: 150px;
  right: -10px
}

.ops-lpg-chip-3 {
  bottom: 74px;
  left: -8px
}

.ops-lpg-chip-1 i {
  color: #e05320
}

.ops-lpg-chip-2 i {
  color: #4f8cff
}

.ops-lpg-chip-3 i {
  color: #16b877
}

@keyframes opsLpgDot {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
    opacity: .7
  }

  50% {
    box-shadow: 0 0 0 5px rgba(61, 220, 132, 0);
    opacity: 1
  }
}

@keyframes opsLpgGlow {

  0%,
  100% {
    opacity: .55;
    transform: scale(1)
  }

  50% {
    opacity: .85;
    transform: scale(1.08)
  }
}

@keyframes opsLpgRise {
  from {
    opacity: 0;
    transform: translateY(9px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsLpgCta {
  0% {
    box-shadow: 0 8px 18px rgba(224, 83, 32, .35), 0 0 0 0 rgba(224, 83, 32, .5)
  }

  70% {
    box-shadow: 0 8px 18px rgba(224, 83, 32, .3), 0 0 0 12px rgba(224, 83, 32, 0)
  }

  100% {
    box-shadow: 0 8px 18px rgba(224, 83, 32, .35), 0 0 0 0 rgba(224, 83, 32, 0)
  }
}

@keyframes opsLpgPress {

  0%,
  42% {
    transform: scale(1)
  }

  47% {
    transform: scale(.9)
  }

  53% {
    transform: scale(1.02)
  }

  60%,
  100% {
    transform: scale(1)
  }
}

@keyframes opsLpgShine {
  0% {
    transform: translateX(-170%) skewX(-18deg)
  }

  55%,
  100% {
    transform: translateX(330%) skewX(-18deg)
  }
}

@keyframes opsLpgShineB {
  0% {
    transform: translateX(-100%)
  }

  55%,
  100% {
    transform: translateX(240%)
  }
}

@keyframes opsLpgGrowA {
  from {
    width: 0
  }

  to {
    width: 62%
  }
}

@keyframes opsLpgGrowB {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

@keyframes opsLpgCursor {
  0% {
    opacity: 0;
    transform: translate(30px, 22px) scale(1)
  }

  16% {
    opacity: 1
  }

  38% {
    opacity: 1;
    transform: translate(0, 0) scale(1)
  }

  46% {
    transform: translate(0, 0) scale(.8)
  }

  54% {
    transform: translate(0, 0) scale(1)
  }

  80% {
    opacity: 1;
    transform: translate(0, 0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translate(30px, 22px) scale(1)
  }
}

@keyframes opsLpgCount {
  from {
    --lpgw: 0;
    --lpgf: 0
  }

  to {
    --lpgw: 11;
    --lpgf: 8
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-lpg * {
    animation: none !important
  }

  .ops-lpg-eyebrow,
  .ops-lpg-h1,
  .ops-lpg-sub,
  .ops-lpg-actions,
  .ops-lpg-trust,
  .ops-lpg-winner {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-lpg-fillA {
    width: 62% !important
  }

  .ops-lpg-fillB {
    width: 100% !important
  }

  .ops-lpg-cvrnum {
    --lpgw: 11 !important;
    --lpgf: 8 !important
  }

  .ops-lpg-cursor {
    opacity: 0 !important
  }
}

/* ---- cross-platform-app-development (xpl) ---- */
.ops-xpl {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: inherit;
  color: #e7e9ee
}

.ops-xpl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-xpl-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #e7e9ee;
  line-height: 1
}

.ops-xpl-file i {
  color: #e05320;
  font-size: 11px
}

.ops-xpl-status {
  position: relative;
  width: 80px;
  height: 18px;
  flex: 0 0 auto
}

.ops-xpl-st {
  position: absolute;
  top: 0;
  right: 0;
  height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  color: #e7e9ee
}

.ops-xpl-st-build {
  opacity: 1;
  animation: opsXplPhaseA 6s ease-in-out infinite
}

.ops-xpl-st-pass {
  opacity: 0;
  animation: opsXplPhaseB 6s ease-in-out infinite
}

.ops-xpl-st-pass i {
  color: #3ddc84;
  font-size: 10px
}

.ops-xpl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2a63f;
  display: inline-block;
  animation: opsXplPulse 1.4s ease-in-out infinite
}

.ops-xpl-stage {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 14px 14px 12px;
  min-height: 198px;
  background: radial-gradient(120% 92% at 74% 28%, rgba(224, 83, 32, .13), transparent 58%), #14161d;
  overflow: hidden
}

.ops-xpl-code {
  flex: 0 0 34%;
  max-width: 116px;
  min-width: 72px;
  background: #0f1117;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 10px;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  position: relative
}

.ops-xpl-code-dots {
  display: flex;
  gap: 4px;
  margin-bottom: 1px
}

.ops-xpl-code-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2e39;
  display: block
}

.ops-xpl-code-dots i:first-child {
  background: #e05320
}

.ops-xpl-ln {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 5px
}

.ops-xpl-i1 {
  padding-left: 9px
}

.ops-xpl-i2 {
  padding-left: 18px
}

.ops-xpl-t {
  height: 5px;
  border-radius: 2px;
  display: block
}

.ops-xpl-w1 {
  width: 12px
}

.ops-xpl-w2 {
  width: 20px
}

.ops-xpl-w3 {
  width: 30px
}

.ops-xpl-w4 {
  width: 42px
}

.ops-xpl-kw {
  background: #f2854a
}

.ops-xpl-ty {
  background: #4f8cff
}

.ops-xpl-fn {
  background: #7c5cff
}

.ops-xpl-str {
  background: #3ddc84
}

.ops-xpl-pn {
  background: #4a5060
}

.ops-xpl-caret {
  width: 2px;
  height: 11px;
  background: #e05320;
  display: inline-block;
  margin-left: 2px;
  animation: opsXplCaret 1s steps(1, end) infinite
}

.ops-xpl-arrow {
  flex: 0 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px
}

.ops-xpl-cv {
  font-size: 12px;
  color: #e05320;
  line-height: 1
}

.ops-xpl-cv1 {
  animation: opsXplChev 1.6s ease-in-out infinite
}

.ops-xpl-cv2 {
  animation: opsXplChev 1.6s ease-in-out .2s infinite
}

.ops-xpl-cv3 {
  animation: opsXplChev 1.6s ease-in-out .4s infinite
}

.ops-xpl-devices {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 9px;
  padding-bottom: 12px
}

.ops-xpl-floor {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent)
}

.ops-xpl-dev {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end
}

.ops-xpl-dev::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 14%;
  right: 14%;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  filter: blur(3px);
  z-index: 0
}

.ops-xpl-phone {
  flex: 0 1 22%;
  max-width: 36px
}

.ops-xpl-tablet {
  flex: 0 1 32%;
  max-width: 54px
}

.ops-xpl-desktop {
  flex: 0 1 46%;
  max-width: 88px
}

.ops-xpl-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #0c0e14;
  border: 2px solid #2a2e39;
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45)
}

.ops-xpl-phone .ops-xpl-frame {
  aspect-ratio: 1/2;
  border-radius: 9px
}

.ops-xpl-tablet .ops-xpl-frame {
  aspect-ratio: 3/4;
  border-radius: 8px
}

.ops-xpl-desktop .ops-xpl-frame {
  aspect-ratio: 16/10;
  border-radius: 6px
}

.ops-xpl-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 45%, rgba(224, 83, 32, .6), rgba(224, 83, 32, 0) 70%);
  filter: blur(7px);
  opacity: 0;
  z-index: 0
}

.ops-xpl-lit {
  position: absolute;
  inset: 1px;
  border-radius: 6px;
  background: linear-gradient(155deg, #e05320, #f2854a 60%, #ff7d3a);
  opacity: 0;
  z-index: 1
}

.ops-xpl-ui {
  position: absolute;
  inset: 1px;
  border-radius: 6px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  overflow: hidden;
  opacity: 0;
  z-index: 2
}

.ops-xpl-ub {
  width: 100%;
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .92);
  display: block
}

.ops-xpl-uc {
  width: 72%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .6);
  display: block
}

.ops-xpl-ui i.ops-xpl-uc:last-child {
  width: 46%
}

.ops-xpl-notch {
  position: absolute;
  z-index: 3
}

.ops-xpl-phone .ops-xpl-notch {
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 4px;
  background: #2a2e39;
  border-radius: 0 0 4px 4px
}

.ops-xpl-tablet .ops-xpl-notch {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #3a3f4b
}

.ops-xpl-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #16b877;
  border: 2px solid #14161d;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(22, 184, 119, .5);
  opacity: 0;
  z-index: 4
}

.ops-xpl-badge i {
  font-size: 7px;
  color: #fff
}

.ops-xpl-stand {
  width: 18%;
  height: 7px;
  background: #22262f
}

.ops-xpl-base {
  width: 44%;
  height: 4px;
  border-radius: 2px;
  background: #22262f;
  margin-top: 2px
}

.ops-xpl-phone .ops-xpl-glow,
.ops-xpl-phone .ops-xpl-lit,
.ops-xpl-phone .ops-xpl-ui {
  animation: opsXplRevP 6s ease-in-out infinite
}

.ops-xpl-tablet .ops-xpl-glow,
.ops-xpl-tablet .ops-xpl-lit,
.ops-xpl-tablet .ops-xpl-ui {
  animation: opsXplRevT 6s ease-in-out infinite
}

.ops-xpl-desktop .ops-xpl-glow,
.ops-xpl-desktop .ops-xpl-lit,
.ops-xpl-desktop .ops-xpl-ui {
  animation: opsXplRevD 6s ease-in-out infinite
}

.ops-xpl-phone .ops-xpl-badge {
  animation: opsXplBadgeP 6s ease-in-out infinite
}

.ops-xpl-tablet .ops-xpl-badge {
  animation: opsXplBadgeT 6s ease-in-out infinite
}

.ops-xpl-desktop .ops-xpl-badge {
  animation: opsXplBadgeD 6s ease-in-out infinite
}

.ops-xpl-foot {
  padding: 9px 12px 11px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-xpl-prog {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden
}

.ops-xpl-prog-fill {
  display: block;
  height: 100%;
  width: 5%;
  border-radius: 3px;
  background: linear-gradient(90deg, #e05320, #f2854a);
  animation: opsXplProg 6s ease-in-out infinite
}

.ops-xpl-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px
}

.ops-xpl-foot-lbl {
  position: relative;
  flex: 1;
  height: 13px;
  overflow: hidden
}

.ops-xpl-fl {
  position: absolute;
  left: 0;
  top: 0;
  height: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1
}

.ops-xpl-fl-a {
  color: #8a90a0;
  opacity: 1;
  animation: opsXplPhaseA 6s ease-in-out infinite
}

.ops-xpl-fl-b {
  color: #cfe9dd;
  opacity: 0;
  animation: opsXplPhaseB 6s ease-in-out infinite
}

.ops-xpl-fl-b i {
  color: #3ddc84;
  font-size: 10px
}

.ops-xpl-foot-n {
  font-size: 10px;
  color: #8a90a0;
  margin-left: 8px;
  font-variant-numeric: tabular-nums
}

.ops-xpl-chip-1 {
  top: 24px;
  left: -6px
}

.ops-xpl-chip-1 i {
  color: #4f8cff
}

.ops-xpl-chip-2 {
  top: 150px;
  right: -12px
}

.ops-xpl-chip-2 i {
  color: #e05320
}

.ops-xpl-chip-3 {
  bottom: 52px;
  left: -4px
}

.ops-xpl-chip-3 i {
  color: #16b877
}

@keyframes opsXplRevP {

  0%,
  14% {
    opacity: 0
  }

  20% {
    opacity: 1
  }

  88% {
    opacity: 1
  }

  95%,
  100% {
    opacity: 0
  }
}

@keyframes opsXplRevT {

  0%,
  29% {
    opacity: 0
  }

  35% {
    opacity: 1
  }

  88% {
    opacity: 1
  }

  95%,
  100% {
    opacity: 0
  }
}

@keyframes opsXplRevD {

  0%,
  44% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  88% {
    opacity: 1
  }

  95%,
  100% {
    opacity: 0
  }
}

@keyframes opsXplBadgeP {

  0%,
  14% {
    opacity: 0;
    transform: scale(.3)
  }

  20% {
    opacity: 1;
    transform: scale(1.18)
  }

  26% {
    transform: scale(1)
  }

  88% {
    opacity: 1;
    transform: scale(1)
  }

  95%,
  100% {
    opacity: 0;
    transform: scale(.3)
  }
}

@keyframes opsXplBadgeT {

  0%,
  32% {
    opacity: 0;
    transform: scale(.3)
  }

  38% {
    opacity: 1;
    transform: scale(1.18)
  }

  44% {
    transform: scale(1)
  }

  88% {
    opacity: 1;
    transform: scale(1)
  }

  95%,
  100% {
    opacity: 0;
    transform: scale(.3)
  }
}

@keyframes opsXplBadgeD {

  0%,
  47% {
    opacity: 0;
    transform: scale(.3)
  }

  53% {
    opacity: 1;
    transform: scale(1.18)
  }

  59% {
    transform: scale(1)
  }

  88% {
    opacity: 1;
    transform: scale(1)
  }

  95%,
  100% {
    opacity: 0;
    transform: scale(.3)
  }
}

@keyframes opsXplProg {

  0%,
  10% {
    width: 5%
  }

  20% {
    width: 34%
  }

  35% {
    width: 67%
  }

  50% {
    width: 100%
  }

  88% {
    width: 100%
  }

  95%,
  100% {
    width: 5%
  }
}

@keyframes opsXplPhaseA {

  0%,
  46% {
    opacity: 1
  }

  52%,
  92% {
    opacity: 0
  }

  96%,
  100% {
    opacity: 1
  }
}

@keyframes opsXplPhaseB {

  0%,
  46% {
    opacity: 0
  }

  52%,
  92% {
    opacity: 1
  }

  96%,
  100% {
    opacity: 0
  }
}

@keyframes opsXplPulse {

  0%,
  100% {
    opacity: .4;
    transform: scale(.75)
  }

  50% {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes opsXplChev {
  0% {
    opacity: .15
  }

  50% {
    opacity: 1
  }

  100% {
    opacity: .15
  }
}

@keyframes opsXplCaret {

  0%,
  49% {
    opacity: 1
  }

  50%,
  100% {
    opacity: 0
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-xpl * {
    animation: none !important
  }

  .ops-xpl-glow,
  .ops-xpl-lit,
  .ops-xpl-ui,
  .ops-xpl-badge,
  .ops-xpl-st-pass,
  .ops-xpl-fl-b {
    opacity: 1 !important
  }

  .ops-xpl-st-build,
  .ops-xpl-fl-a {
    opacity: 0 !important
  }

  .ops-xpl-prog-fill {
    width: 100% !important
  }

  .ops-xpl-badge {
    transform: scale(1) !important
  }
}

/* ---- influencer-marketing (infl) ---- */
.ops-infl {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  color: #fff;
  font-family: inherit
}

.ops-infl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-infl-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #c7ccd6;
  letter-spacing: .2px
}

.ops-infl-file i {
  color: #e05320;
  font-size: 12px
}

.ops-infl-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #3ddc84;
  background: rgba(61, 220, 132, .12);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-infl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsInflPulse 1.8s ease-out infinite
}

@keyframes opsInflPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0)
  }
}

.ops-infl-stage {
  padding: 16px;
  background: radial-gradient(120% 90% at 50% -8%, rgba(224, 83, 32, .12), transparent 60%), #14161d
}

.ops-infl-collab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 14px
}

.ops-infl-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 10px 6px 9px;
  animation: opsInflCardIn .7s cubic-bezier(.2, .7, .2, 1) both
}

.ops-infl-card-a {
  animation-delay: .15s
}

.ops-infl-card-b {
  animation-delay: .4s
}

@keyframes opsInflCardIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.ops-infl-av {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .5px
}

.ops-infl-av-a {
  background: linear-gradient(135deg, #e0398f, #7c5cff)
}

.ops-infl-av-b {
  background: linear-gradient(135deg, #4f8cff, #3ddc84)
}

.ops-infl-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4f8cff;
  color: #fff;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #14161d
}

.ops-infl-handle {
  max-width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: #eef1f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-infl-followers {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #9aa2b1
}

.ops-infl-followers i {
  font-size: 9px;
  color: #e05320
}

.ops-infl-link {
  position: relative;
  flex: 0 0 46px;
  height: 46px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center
}

.ops-infl-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  opacity: .4;
  background: linear-gradient(90deg, #e0398f, #e05320, #4f8cff)
}

.ops-infl-flow {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f2854a;
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(242, 133, 74, .85);
  animation: opsInflFlow 2.2s linear infinite
}

.ops-infl-flow-2 {
  animation-delay: 1.1s
}

@keyframes opsInflFlow {
  0% {
    left: 0;
    opacity: 0
  }

  12% {
    opacity: 1
  }

  88% {
    opacity: 1
  }

  100% {
    left: 100%;
    opacity: 0
  }
}

.ops-infl-shake {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  background: linear-gradient(135deg, #e05320, #f2854a);
  box-shadow: 0 4px 12px rgba(224, 83, 32, .5);
  animation: opsInflShake 3s ease-in-out infinite
}

@keyframes opsInflShake {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.13)
  }
}

.ops-infl-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 14px 12px
}

.ops-infl-eng {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center
}

.ops-infl-ring {
  width: 76px;
  height: 76px;
  transform: rotate(-90deg)
}

.ops-infl-track {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 3
}

.ops-infl-fill {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 3px rgba(61, 220, 132, .45));
  animation: opsInflRing 1.7s cubic-bezier(.4, 0, .2, 1) .3s forwards
}

@keyframes opsInflRing {
  to {
    stroke-dashoffset: 32
  }
}

.ops-infl-eng-txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px
}

.ops-infl-eng-val {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  animation: opsInflFade .6s ease .95s both
}

@keyframes opsInflFade {
  from {
    opacity: 0;
    transform: translateY(2px) scale(.85)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.ops-infl-eng-lbl {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #8b93a2
}

.ops-infl-reach {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ops-infl-reach-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #8b93a2
}

.ops-infl-reach-lbl i {
  color: #3ddc84;
  font-size: 9px
}

.ops-infl-reach-num {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: .5px
}

.ops-infl-odo {
  display: inline-block;
  height: 24px;
  overflow: hidden
}

.ops-infl-strip {
  display: flex;
  flex-direction: column;
  animation: opsInflOdo 6s steps(10, end) infinite
}

.ops-infl-strip span {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center
}

@keyframes opsInflOdo {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-240px)
  }
}

.ops-infl-reach-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden
}

.ops-infl-reach-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #e05320, #f2854a);
  animation: opsInflReachBar 2.4s ease-out .5s forwards
}

@keyframes opsInflReachBar {
  to {
    width: 82%
  }
}

.ops-infl-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-infl-foot-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #9aa2b1
}

.ops-infl-foot-item i {
  font-size: 9px
}

.ops-infl-foot-item:nth-child(1) i {
  color: #e0398f;
  animation: opsInflBeat 1.6s ease-in-out infinite
}

.ops-infl-foot-item:nth-child(2) i {
  color: #4f8cff
}

.ops-infl-foot-item:nth-child(3) i {
  color: #3ddc84
}

@keyframes opsInflBeat {

  0%,
  100% {
    transform: scale(1)
  }

  30% {
    transform: scale(1.28)
  }
}

.ops-infl-foot-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #f2854a
}

.ops-infl-chip-1 {
  top: 24px;
  left: -8px
}

.ops-infl-chip-1 i {
  color: #e0398f
}

.ops-infl-chip-2 {
  top: 160px;
  right: -12px
}

.ops-infl-chip-2 i {
  color: #3ddc84
}

.ops-infl-chip-3 {
  bottom: 54px;
  left: -6px
}

.ops-infl-chip-3 i {
  color: #e05320
}

@media (prefers-reduced-motion: reduce) {
  .ops-infl * {
    animation: none !important
  }

  .ops-infl-card,
  .ops-infl-eng-val {
    opacity: 1 !important
  }

  .ops-infl-fill {
    stroke-dashoffset: 32 !important
  }

  .ops-infl-reach-bar-fill {
    width: 82% !important
  }
}

/* =============================================================================
   ABOUT-US testimonials — continuous auto-scroll marquee (like the home page)
   Converts the static 2-col grid into a seamless belt; ~2-3 cards per view.
   ============================================================================= */
.ops-testi2 {
  margin-top: 8px;
}

.ops-testi2-viewport {
  overflow: hidden;
  padding: 16px 4px;
  margin: -16px -4px;
}

.ops-testi2-track {
  display: flex;
  gap: 24px;
  width: max-content;
  align-items: stretch;
}

.ops-testi2-track .ops-testimonial-card {
  flex: 0 0 min(380px, 82vw);
  width: min(380px, 82vw);
  margin: 0 !important;
  height: auto;
}

@media (max-width: 575px) {
  .ops-testi2-track {
    gap: 16px;
  }

  .ops-testi2-track .ops-testimonial-card {
    flex-basis: 84vw;
    width: 84vw;
  }
}

/* =============================================================================
   Internship / Career form polish — focus states + styled CV file upload
   ============================================================================= */
.ops-form-field input:focus,
.ops-form-field textarea:focus,
.ops-form-field select:focus {
  border-color: var(--ops-brand, #e05320) !important;
  box-shadow: 0 0 0 3px rgba(224, 83, 32, .12) !important;
  outline: none;
}

.ops-form-field input[type="file"] {
  display: flex;
  align-items: center;
  padding: 11px 14px !important;
  cursor: pointer;
  font-size: 13px;
  color: #6b7280 !important;
}

.ops-form-field input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(135deg, #e05320, #f2854a);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: filter .2s ease;
}

.ops-form-field input[type="file"]::file-selector-button:hover {
  filter: brightness(1.06);
}

/* ---- service visuals batch 2 (marketing + remaining software) ---- */

/* ---- erp-software-development (erp) ---- */
.ops-erp {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: inherit;
  color: #fff;
}

.ops-erp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-erp-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #cfd3dc;
  letter-spacing: .2px;
}

.ops-erp-file i {
  color: #e05320;
  font-size: 12px;
}

.ops-erp-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #9aa1ad;
  background: rgba(255, 255, 255, .04);
  padding: 3px 9px;
  border-radius: 20px;
}

.ops-erp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsErpDot 1.8s ease-out infinite;
}

.ops-erp-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-erp-tab {
  font-size: 10px;
  font-weight: 600;
  color: #777d89;
  padding: 3px 9px;
  border-radius: 7px;
  white-space: nowrap;
}

.ops-erp-tabon {
  color: #f2854a;
  background: rgba(224, 83, 32, .14);
}

.ops-erp-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: #3ddc84;
  white-space: nowrap;
}

.ops-erp-live i {
  font-size: 9px;
}

.ops-erp-stage {
  position: relative;
  height: 206px;
  padding: 12px;
  background: radial-gradient(120% 85% at 50% 42%, rgba(224, 83, 32, .11), transparent 62%), #14161d;
}

.ops-erp-grid {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.ops-erp-tile {
  position: relative;
  border-radius: 12px;
  padding: 9px 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  animation: opsErpTileIn .5s ease forwards;
}

.ops-erp-inv {
  animation-delay: .05s;
}

.ops-erp-fin {
  animation-delay: .15s;
}

.ops-erp-hr {
  animation-delay: .25s;
}

.ops-erp-sal {
  animation-delay: .35s;
}

.ops-erp-tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 2px;
  border-radius: 2px;
  opacity: .75;
}

.ops-erp-inv::after {
  background: linear-gradient(90deg, transparent, #4f8cff, transparent);
}

.ops-erp-fin::after {
  background: linear-gradient(90deg, transparent, #3ddc84, transparent);
}

.ops-erp-hr::after {
  background: linear-gradient(90deg, transparent, #9a80ff, transparent);
}

.ops-erp-sal::after {
  background: linear-gradient(90deg, transparent, #f2a63f, transparent);
}

.ops-erp-thead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #aeb4bf;
}

.ops-erp-ic {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  color: #fff;
  flex: none;
}

.ops-erp-inv .ops-erp-ic {
  background: linear-gradient(135deg, #4f8cff, #6ea0ff);
}

.ops-erp-fin .ops-erp-ic {
  background: linear-gradient(135deg, #16b877, #3ddc84);
}

.ops-erp-hr .ops-erp-ic {
  background: linear-gradient(135deg, #7c5cff, #9a80ff);
}

.ops-erp-sal .ops-erp-ic {
  background: linear-gradient(135deg, #f2a63f, #f2854a);
}

.ops-erp-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  animation: opsErpNum 4s ease-in-out infinite;
}

.ops-erp-inv .ops-erp-num {
  animation-delay: 0s;
}

.ops-erp-fin .ops-erp-num {
  animation-delay: 1s;
}

.ops-erp-hr .ops-erp-num {
  animation-delay: 2s;
}

.ops-erp-sal .ops-erp-num {
  animation-delay: 3s;
}

.ops-erp-odo {
  display: inline-block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  vertical-align: baseline;
}

.ops-erp-odostrip {
  display: flex;
  flex-direction: column;
  animation: opsErpOdo 5s steps(10, end) infinite;
}

.ops-erp-odostrip>span {
  height: 1em;
  line-height: 1;
}

.ops-erp-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  color: #8b929e;
}

.ops-erp-sub i {
  font-size: 8.5px;
}

.ops-erp-inv .ops-erp-sub i {
  color: #4f8cff;
}

.ops-erp-fin .ops-erp-sub i {
  color: #3ddc84;
}

.ops-erp-hr .ops-erp-sub i {
  color: #9a80ff;
}

.ops-erp-sal .ops-erp-sub i {
  color: #f2a63f;
}

.ops-erp-bar2 {
  margin-top: auto;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ops-erp-bar2>span {
  display: block;
  height: 100%;
  border-radius: 3px;
  width: 0;
  animation: opsErpFill 2.1s ease-out forwards;
}

.ops-erp-inv .ops-erp-bar2>span {
  background: linear-gradient(90deg, #4f8cff, #6ea0ff);
  --w: 72%;
  animation-delay: .3s;
}

.ops-erp-fin .ops-erp-bar2>span {
  background: linear-gradient(90deg, #16b877, #3ddc84);
  --w: 58%;
  animation-delay: .42s;
}

.ops-erp-hr .ops-erp-bar2>span {
  background: linear-gradient(90deg, #7c5cff, #9a80ff);
  --w: 84%;
  animation-delay: .54s;
}

.ops-erp-sal .ops-erp-bar2>span {
  background: linear-gradient(90deg, #f2a63f, #f2854a);
  --w: 46%;
  animation-delay: .66s;
}

.ops-erp-net {
  position: absolute;
  inset: 12px;
  z-index: 3;
  pointer-events: none;
}

.ops-erp-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ops-erp-link {
  stroke: rgba(255, 255, 255, .14);
  stroke-width: .7;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
  animation: opsErpDash 1.3s linear infinite;
}

.ops-erp-pulse {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: -3.5px 0 0 -3.5px;
  opacity: 0;
}

.ops-erp-p1 {
  top: 25%;
  left: 25%;
  background: #4f8cff;
  box-shadow: 0 0 9px 1px rgba(79, 140, 255, .85);
  animation: opsErpP1 1.9s ease-in infinite;
}

.ops-erp-p2 {
  top: 25%;
  left: 75%;
  background: #3ddc84;
  box-shadow: 0 0 9px 1px rgba(61, 220, 132, .85);
  animation: opsErpP2 1.9s ease-in infinite .48s;
}

.ops-erp-p3 {
  top: 75%;
  left: 25%;
  background: #9a80ff;
  box-shadow: 0 0 9px 1px rgba(124, 92, 255, .85);
  animation: opsErpP3 1.9s ease-in infinite .95s;
}

.ops-erp-p4 {
  top: 75%;
  left: 75%;
  background: #f2a63f;
  box-shadow: 0 0 9px 1px rgba(242, 166, 63, .85);
  animation: opsErpP4 1.9s ease-in infinite 1.43s;
}

.ops-erp-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  z-index: 6;
  display: grid;
  place-items: center;
}

.ops-erp-core {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2854a, #e05320 72%);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(224, 83, 32, .5), 0 0 0 4px #14161d, 0 0 0 5px rgba(224, 83, 32, .28);
  z-index: 2;
}

.ops-erp-core i {
  animation: opsErpSpin 3.4s linear infinite;
}

.ops-erp-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(224, 83, 32, .55);
  animation: opsErpRing 2.6s ease-out infinite;
}

.ops-erp-ring2 {
  animation-delay: 1.3s;
}

.ops-erp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-size: 10px;
  font-weight: 600;
  color: #9aa1ad;
}

.ops-erp-flabel {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.ops-erp-flabel i {
  color: #e05320;
  font-size: 9px;
}

.ops-erp-bus {
  position: relative;
  flex: 1;
  height: 14px;
}

.ops-erp-bus::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  border-radius: 2px;
}

.ops-erp-tick {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #2a2f3a;
  border: 1.5px solid #3a4150;
  animation: opsErpTickPulse 2.4s ease-in-out infinite;
}

.ops-erp-tick:nth-child(1) {
  left: 12%;
  --tc: #4f8cff;
  animation-delay: 0s;
}

.ops-erp-tick:nth-child(2) {
  left: 38%;
  --tc: #3ddc84;
  animation-delay: .3s;
}

.ops-erp-tick:nth-child(3) {
  left: 62%;
  --tc: #9a80ff;
  animation-delay: .6s;
}

.ops-erp-tick:nth-child(4) {
  left: 88%;
  --tc: #f2a63f;
  animation-delay: .9s;
}

.ops-erp-play {
  position: absolute;
  top: 50%;
  left: 4%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #f2854a, #e05320);
  box-shadow: 0 0 8px 2px rgba(224, 83, 32, .6);
  animation: opsErpPlay 3.4s ease-in-out infinite;
}

.ops-erp-fsync {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #3ddc84;
}

.ops-erp-fsync i {
  font-size: 10px;
}

.ops-erp-chip-1 {
  top: 26px;
  left: -6px;
}

.ops-erp-chip-2 {
  top: 150px;
  right: -12px;
}

.ops-erp-chip-3 {
  bottom: 56px;
  left: -6px;
}

.ops-erp-chip-1 i {
  color: #e05320;
}

.ops-erp-chip-2 i {
  color: #4f8cff;
}

.ops-erp-chip-3 i {
  color: #16b877;
}

@keyframes opsErpDot {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0);
  }
}

@keyframes opsErpTileIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes opsErpNum {

  0%,
  84%,
  100% {
    text-shadow: none;
  }

  90% {
    text-shadow: 0 0 10px rgba(255, 255, 255, .55);
  }
}

@keyframes opsErpOdo {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10em);
  }
}

@keyframes opsErpFill {
  from {
    width: 0;
  }

  to {
    width: var(--w);
  }
}

@keyframes opsErpDash {
  to {
    stroke-dashoffset: -12;
  }
}

@keyframes opsErpSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes opsErpRing {
  0% {
    transform: translate(-50%, -50%) scale(.6);
    opacity: .75;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.15);
    opacity: 0;
  }
}

@keyframes opsErpP1 {
  0% {
    top: 25%;
    left: 25%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  100% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
}

@keyframes opsErpP2 {
  0% {
    top: 25%;
    left: 75%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  100% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
}

@keyframes opsErpP3 {
  0% {
    top: 75%;
    left: 25%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  100% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
}

@keyframes opsErpP4 {
  0% {
    top: 75%;
    left: 75%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  100% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
}

@keyframes opsErpPlay {
  0% {
    left: 4%;
  }

  50% {
    left: 96%;
  }

  100% {
    left: 4%;
  }
}

@keyframes opsErpTickPulse {

  0%,
  100% {
    background: #2a2f3a;
    box-shadow: none;
    border-color: #3a4150;
  }

  50% {
    background: var(--tc);
    box-shadow: 0 0 7px var(--tc);
    border-color: var(--tc);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-erp * {
    animation: none !important;
  }

  .ops-erp-tile {
    opacity: 1 !important;
    transform: none !important;
  }

  .ops-erp-pulse {
    opacity: 1 !important;
  }

  .ops-erp-bar2>span {
    width: var(--w) !important;
  }
}

/* ---- hrm-software-development (hrm) ---- */
.ops-hrm {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #fff;
  text-align: left
}

.ops-hrm * {
  box-sizing: border-box
}

@property --opsHrmHead {
  syntax: '<integer>';
  inherits: true;
  initial-value: 248
}

@property --opsHrmPres {
  syntax: '<integer>';
  inherits: true;
  initial-value: 231
}

/* window bar */
.ops-hrm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hrm-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .2px
}

.ops-hrm-file i {
  color: #e05320;
  font-size: 12px
}

.ops-hrm-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #3ddc84;
  background: rgba(22, 184, 119, .12);
  border: 1px solid rgba(22, 184, 119, .22);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-hrm-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsHrmPulse 1.6s ease-in-out infinite
}

@keyframes opsHrmPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0)
  }
}

/* KPI band: headcount count-up + attendance ring */
.ops-hrm-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hrm-stat {
  flex: 1;
  min-width: 0
}

.ops-hrm-slabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 6px
}

.ops-hrm-sval {
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.ops-hrm-head {
  --opsHrmHead: 248
}

.ops-hrm-head::after {
  content: counter(opsHrmHead);
  counter-reset: opsHrmHead var(--opsHrmHead, 248);
  animation: opsHrmCountH 3s cubic-bezier(.2, .75, .2, 1) forwards
}

@keyframes opsHrmCountH {
  from {
    --opsHrmHead: 0
  }

  to {
    --opsHrmHead: 248
  }
}

.ops-hrm-sdelta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: #3ddc84;
  background: rgba(22, 184, 119, .13);
  padding: 2px 7px;
  border-radius: 8px
}

.ops-hrm-sdelta i {
  font-size: 8px
}

.ops-hrm-att {
  position: relative;
  width: 62px;
  height: 62px;
  flex: none
}

.ops-hrm-ring {
  width: 62px;
  height: 62px;
  display: block
}

.ops-hrm-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 3
}

.ops-hrm-ring-fg {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 6.8;
  animation: opsHrmRing 2.6s cubic-bezier(.4, 0, .2, 1) .25s both
}

@keyframes opsHrmRing {
  from {
    stroke-dashoffset: 97.4
  }

  to {
    stroke-dashoffset: 6.8
  }
}

.ops-hrm-att-c {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.ops-hrm-pres {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.ops-hrm-pres::after {
  content: counter(opsHrmPres);
  counter-reset: opsHrmPres var(--opsHrmPres, 231);
  animation: opsHrmCountP 3s cubic-bezier(.2, .75, .2, 1) forwards
}

@keyframes opsHrmCountP {
  from {
    --opsHrmPres: 0
  }

  to {
    --opsHrmPres: 231
  }
}

.ops-hrm-att-lbl {
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .45);
  margin-top: 2px
}

/* employee directory */
.ops-hrm-dir {
  padding: 10px 12px 11px;
  background: #14161d;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hrm-dir-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 9px;
  letter-spacing: .2px
}

.ops-hrm-dir-h i {
  color: #7c5cff;
  font-size: 10px
}

.ops-hrm-dir-loc {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .38)
}

.ops-hrm-avs {
  display: flex;
  align-items: center
}

.ops-hrm-av {
  position: relative;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 2px solid #14161d;
  margin-left: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
  transform: scale(1);
  animation: opsHrmPop .5s cubic-bezier(.5, 1.7, .5, 1) both
}

.ops-hrm-av:first-child {
  margin-left: 0
}

.ops-hrm-av1 {
  background: linear-gradient(135deg, #4f8cff, #3a6fe0);
  animation-delay: .1s
}

.ops-hrm-av2 {
  background: linear-gradient(135deg, #e0398f, #b32b71);
  animation-delay: .2s
}

.ops-hrm-av3 {
  background: linear-gradient(135deg, #16b877, #0f9a62);
  animation-delay: .3s
}

.ops-hrm-av4 {
  background: linear-gradient(135deg, #f2a63f, #e0872a);
  animation-delay: .4s
}

.ops-hrm-av5 {
  background: linear-gradient(135deg, #7c5cff, #5f43d6);
  animation-delay: .5s
}

.ops-hrm-av6 {
  background: linear-gradient(135deg, #f2854a, #e05320);
  animation-delay: .6s
}

.ops-hrm-more {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .72);
  font-size: 8px;
  animation-delay: .7s
}

@keyframes opsHrmPop {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.ops-hrm-on {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  border: 1.5px solid #14161d;
  animation: opsHrmOn 2s ease-in-out infinite
}

@keyframes opsHrmOn {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5)
  }

  60% {
    box-shadow: 0 0 0 4px rgba(61, 220, 132, 0)
  }
}

/* payroll run */
.ops-hrm-pay {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hrm-pay-ic {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  background: linear-gradient(160deg, #f2854a, #e05320);
  box-shadow: 0 4px 12px rgba(224, 83, 32, .35)
}

.ops-hrm-pay-main {
  flex: 1;
  min-width: 0
}

.ops-hrm-pay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px
}

.ops-hrm-pay-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82)
}

.ops-hrm-pay-done {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 800;
  color: #3ddc84
}

.ops-hrm-pay-done i {
  font-size: 7.5px
}

.ops-hrm-pay-bar {
  height: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden
}

.ops-hrm-pay-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f2854a, #3ddc84);
  transform: scaleX(1);
  transform-origin: left;
  animation: opsHrmFill 2.8s cubic-bezier(.4, 0, .2, 1) .3s both
}

@keyframes opsHrmFill {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

.ops-hrm-pay-amt {
  flex: none;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px
}

.ops-hrm-cur {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  margin-right: 1px
}

.ops-hrm-unit {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  margin-left: 1px
}

/* leave approval row + toggle */
.ops-hrm-leave {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px 13px;
  background: #0f1117
}

.ops-hrm-lav {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #e0398f, #b32b71)
}

.ops-hrm-lmain {
  flex: 1;
  min-width: 0
}

.ops-hrm-lname {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-hrm-lsub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, .45);
  margin-top: 2px
}

.ops-hrm-lsub i {
  font-size: 8px;
  color: #f2a63f
}

.ops-hrm-appr {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(22, 184, 119, .14);
  border: 1px solid rgba(22, 184, 119, .28);
  padding: 3px 8px;
  border-radius: 20px;
  opacity: 1;
  animation: opsHrmAppr 4.6s ease-in-out infinite
}

.ops-hrm-appr i {
  font-size: 8px
}

@keyframes opsHrmAppr {

  0%,
  15% {
    opacity: 0;
    transform: scale(.8)
  }

  30%,
  80% {
    opacity: 1;
    transform: scale(1)
  }

  94%,
  100% {
    opacity: 0;
    transform: scale(.8)
  }
}

.ops-hrm-toggle {
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 24px;
  background: #34c759;
  animation: opsHrmTrack 4.6s ease-in-out infinite
}

.ops-hrm-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transform: translateX(16px);
  animation: opsHrmKnob 4.6s ease-in-out infinite
}

@keyframes opsHrmKnob {

  0%,
  15% {
    transform: translateX(0)
  }

  30%,
  80% {
    transform: translateX(16px)
  }

  94%,
  100% {
    transform: translateX(0)
  }
}

@keyframes opsHrmTrack {

  0%,
  15% {
    background: #3a3d46
  }

  30%,
  80% {
    background: #34c759
  }

  94%,
  100% {
    background: #3a3d46
  }
}

/* floating chips: position + icon colour only */
.ops-hrm-chip-1 {
  top: 24px;
  left: -8px
}

.ops-hrm-chip-1 i {
  color: #e05320
}

.ops-hrm-chip-2 {
  top: 150px;
  right: -12px
}

.ops-hrm-chip-2 i {
  color: #4f8cff
}

.ops-hrm-chip-3 {
  bottom: 58px;
  left: -6px
}

.ops-hrm-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion: reduce) {
  .ops-hrm * {
    animation: none !important
  }

  .ops-hrm-av {
    transform: scale(1) !important
  }

  .ops-hrm-knob {
    transform: translateX(16px) !important
  }

  .ops-hrm-pay-fill {
    transform: scaleX(1) !important
  }

  .ops-hrm-ring-fg {
    stroke-dashoffset: 6.8 !important
  }

  .ops-hrm-appr {
    opacity: 1 !important
  }
}

/* ---- hotel-management-software (hotel) ---- */
.ops-hotel {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #fff;
  text-align: left
}

.ops-hotel * {
  box-sizing: border-box
}

@property --opsHotelOcc {
  syntax: '<integer>';
  inherits: true;
  initial-value: 82
}

/* window bar */
.ops-hotel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hotel-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .2px
}

.ops-hotel-file i {
  color: #e05320;
  font-size: 12px
}

.ops-hotel-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #3ddc84;
  background: rgba(22, 184, 119, .12);
  border: 1px solid rgba(22, 184, 119, .22);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-hotel-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsHotelPulse 1.6s ease-in-out infinite
}

@keyframes opsHotelPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0)
  }
}

/* occupancy header */
.ops-hotel-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hotel-gauge {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0
}

.ops-hotel-gauge svg {
  width: 46px;
  height: 46px;
  transform: rotate(-90deg)
}

.ops-hotel-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .1);
  stroke-width: 3.4
}

.ops-hotel-ring-fg {
  fill: none;
  stroke: #e05320;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 18;
  filter: drop-shadow(0 0 3px rgba(224, 83, 32, .55));
  animation: opsHotelRing 3s cubic-bezier(.3, .7, .2, 1) forwards
}

@keyframes opsHotelRing {
  from {
    stroke-dashoffset: 100
  }

  to {
    stroke-dashoffset: 18
  }
}

.ops-hotel-gval {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px
}

.ops-hotel-gnum {
  --opsHotelOcc: 82
}

.ops-hotel-gnum::after {
  content: counter(opsHotelOcc);
  counter-reset: opsHotelOcc var(--opsHotelOcc, 82);
  animation: opsHotelCount 3s cubic-bezier(.2, .75, .2, 1) forwards
}

@keyframes opsHotelCount {
  from {
    --opsHotelOcc: 0
  }

  to {
    --opsHotelOcc: 82
  }
}

.ops-hotel-hmeta {
  flex: 1;
  min-width: 0
}

.ops-hotel-hlabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 800;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 6px
}

.ops-hotel-legend {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.ops-hotel-lg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72)
}

.ops-hotel-lg b {
  margin-left: 2px;
  font-weight: 800;
  color: #fff
}

.ops-hotel-ldot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0
}

.ops-hotel-ldot-book {
  background: #e05320;
  box-shadow: 0 0 6px rgba(224, 83, 32, .6)
}

.ops-hotel-ldot-open {
  background: #3ddc84;
  box-shadow: 0 0 6px rgba(61, 220, 132, .55)
}

.ops-hotel-adr {
  flex-shrink: 0;
  text-align: right
}

.ops-hotel-adrlabel {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 800;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 3px
}

.ops-hotel-adrval {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums
}

/* room grid */
.ops-hotel-floor {
  padding: 10px 12px 4px;
  background: #14161d
}

.ops-hotel-flabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 8px
}

.ops-hotel-flabel i {
  color: #e05320;
  font-size: 9px
}

.ops-hotel-fnow {
  margin-left: auto;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .5)
}

.ops-hotel-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px
}

.ops-hotel-room {
  position: relative;
  min-width: 0;
  height: 36px;
  border-radius: 8px;
  perspective: 340px
}

.ops-hotel-room.is-open,
.ops-hotel-room.is-book,
.ops-hotel-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 8px
}

.ops-hotel-room.is-open,
.ops-hotel-face.rf-open {
  background: rgba(22, 184, 119, .12);
  border: 1px solid rgba(22, 184, 119, .34)
}

.ops-hotel-room.is-book,
.ops-hotel-face.rf-book {
  background: rgba(224, 83, 32, .14);
  border: 1px solid rgba(224, 83, 32, .4)
}

.ops-hotel-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d
}

.ops-hotel-fA .ops-hotel-flip {
  animation: opsHotelFlip 5.4s ease-in-out infinite
}

.ops-hotel-fB .ops-hotel-flip {
  animation: opsHotelFlip 5.4s ease-in-out infinite;
  animation-delay: 1.9s
}

.ops-hotel-fC .ops-hotel-flip {
  animation: opsHotelFlip 5.4s ease-in-out infinite;
  animation-delay: 3.5s
}

@keyframes opsHotelFlip {

  0%,
  34% {
    transform: rotateY(0)
  }

  50%,
  84% {
    transform: rotateY(180deg)
  }

  100% {
    transform: rotateY(0)
  }
}

.ops-hotel-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden
}

.ops-hotel-face.is-back {
  transform: rotateY(180deg)
}

.ops-hotel-rno {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.ops-hotel-rst {
  font-size: 6.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1
}

.ops-hotel-room.is-open .ops-hotel-rst,
.ops-hotel-face.rf-open .ops-hotel-rst {
  color: #3ddc84
}

.ops-hotel-room.is-book .ops-hotel-rst,
.ops-hotel-face.rf-book .ops-hotel-rst {
  color: #f2854a
}

/* booking calendar strip */
.ops-hotel-calwrap {
  padding: 9px 12px 10px;
  background: #12141b;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-hotel-calcap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 7px
}

.ops-hotel-calcap i {
  color: #4f8cff;
  font-size: 9px
}

.ops-hotel-calmon {
  margin-left: auto;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .5)
}

.ops-hotel-cal {
  display: flex;
  gap: 4px
}

.ops-hotel-cday {
  flex: 1;
  min-width: 0;
  height: 31px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px
}

.ops-hotel-cdow {
  font-size: 6.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, .4);
  text-transform: uppercase;
  letter-spacing: .3px
}

.ops-hotel-cnum {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums
}

.ops-hotel-cday.is-stay {
  background: rgba(224, 83, 32, .16);
  border-color: rgba(224, 83, 32, .4)
}

.ops-hotel-cday.is-stay .ops-hotel-cnum {
  color: #f7b48c
}

.ops-hotel-cs1 {
  animation: opsHotelBook 5s ease-in-out infinite
}

.ops-hotel-cs2 {
  animation: opsHotelBook 5s ease-in-out infinite;
  animation-delay: .16s
}

.ops-hotel-cs3 {
  animation: opsHotelBook 5s ease-in-out infinite;
  animation-delay: .32s
}

@keyframes opsHotelBook {

  0%,
  4% {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06)
  }

  16%,
  90% {
    background: rgba(224, 83, 32, .18);
    border-color: rgba(224, 83, 32, .46)
  }

  100% {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .06)
  }
}

.ops-hotel-cday.is-in {
  background: rgba(79, 140, 255, .14);
  border-color: rgba(79, 140, 255, .55);
  animation: opsHotelToday 2.6s ease-in-out infinite
}

.ops-hotel-cday.is-in .ops-hotel-cnum {
  color: #bcd4ff
}

@keyframes opsHotelToday {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(79, 140, 255, .5)
  }

  60% {
    box-shadow: 0 0 0 5px rgba(79, 140, 255, 0)
  }
}

.ops-hotel-cday.is-new {
  position: relative
}

.ops-hotel-cday.is-new::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 5px rgba(61, 220, 132, .7);
  animation: opsHotelNew 1.8s ease-in-out infinite
}

@keyframes opsHotelNew {

  0%,
  100% {
    transform: scale(.7);
    opacity: .55
  }

  50% {
    transform: scale(1.15);
    opacity: 1
  }
}

/* check-in stepper */
.ops-hotel-check {
  padding: 11px 13px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-hotel-steps {
  display: flex;
  align-items: center
}

.ops-hotel-step {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px
}

.ops-hotel-step.is-done,
.ops-hotel-step.is-now {
  color: #fff;
  background: linear-gradient(135deg, #e05320, #f2854a)
}

.ops-hotel-step.is-key {
  color: #8a93a6;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  animation: opsHotelKey 6s ease-in-out infinite
}

@keyframes opsHotelKey {

  0%,
  58% {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    color: #8a93a6
  }

  74%,
  100% {
    background: linear-gradient(135deg, #16b877, #3ddc84);
    border-color: transparent;
    color: #fff
  }
}

.ops-hotel-sring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #f2854a;
  opacity: 0;
  animation: opsHotelSRing 6s ease-in-out infinite
}

@keyframes opsHotelSRing {
  0% {
    transform: scale(.72);
    opacity: .9
  }

  40% {
    transform: scale(1);
    opacity: .55
  }

  64%,
  100% {
    transform: scale(1.3);
    opacity: 0
  }
}

.ops-hotel-track {
  position: relative;
  flex: 1;
  height: 3px;
  margin: 0 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden
}

.ops-hotel-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #e05320, #f2854a)
}

.ops-hotel-fill1 {
  width: 100%
}

.ops-hotel-fill2 {
  width: 100%;
  animation: opsHotelFill2 6s ease-in-out infinite
}

@keyframes opsHotelFill2 {
  0% {
    width: 0
  }

  20%,
  100% {
    width: 100%
  }
}

.ops-hotel-fill3 {
  width: 55%;
  background: linear-gradient(90deg, #f2854a, #3ddc84);
  animation: opsHotelFill3 6s ease-in-out infinite
}

@keyframes opsHotelFill3 {

  0%,
  42% {
    width: 0
  }

  64%,
  100% {
    width: 100%
  }
}

.ops-hotel-slabels {
  display: flex;
  margin-top: 7px
}

.ops-hotel-slabels span {
  flex: 1;
  text-align: center;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .5)
}

.ops-hotel-slabels span:first-child {
  text-align: left
}

.ops-hotel-slabels span:last-child {
  text-align: right
}

/* floating chips */
.ops-hotel-chip-1 {
  top: 22px;
  left: -6px
}

.ops-hotel-chip-1 i {
  color: #e05320
}

.ops-hotel-chip-2 {
  top: 150px;
  right: -12px
}

.ops-hotel-chip-2 i {
  color: #4f8cff
}

.ops-hotel-chip-3 {
  bottom: 56px;
  left: -8px
}

.ops-hotel-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion: reduce) {
  .ops-hotel * {
    animation: none !important
  }

  .ops-hotel-flip {
    transform: none !important
  }

  .ops-hotel-sring {
    opacity: 1 !important
  }

  .ops-hotel-cday.is-new::after {
    opacity: 1 !important
  }
}

/* ---- hashtag-marketing (htag) ---- */
@property --opsHtagS {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0
}

.ops-htag {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  color: #fff;
  font-family: inherit;
  line-height: 1.2
}

/* window bar */
.ops-htag-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-htag-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #e8eaf0;
  letter-spacing: .2px
}

.ops-htag-file i {
  color: #e05320;
  font-size: 12px
}

.ops-htag-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #9aa4b2;
  background: rgba(255, 255, 255, .05);
  padding: 3px 9px;
  border-radius: 20px
}

.ops-htag-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16b877;
  animation: opsHtagLive 2s ease-out infinite
}

@keyframes opsHtagLive {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, .5)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(22, 184, 119, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(22, 184, 119, 0)
  }
}

/* KPI hero — climbing reach counter */
.ops-htag-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-htag-kmeta {
  min-width: 0
}

.ops-htag-klabel {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 5px
}

.ops-htag-klabel i {
  color: #e05320;
  font-size: 9px
}

.ops-htag-kval {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.ops-htag-odo {
  display: inline-block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  text-align: right
}

.ops-htag-odo-strip {
  display: block;
  transform: translateY(0);
  animation: opsHtagRoll 2.2s steps(4) .35s forwards
}

.ops-htag-odo-strip b {
  display: block;
  height: 1em;
  line-height: 1;
  font-weight: 800;
  color: #fff
}

@keyframes opsHtagRoll {
  to {
    transform: translateY(-4em)
  }
}

.ops-htag-kright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0
}

.ops-htag-spark {
  width: 60px;
  height: 22px;
  display: block;
  overflow: visible
}

.ops-htag-spark polyline {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 3px rgba(61, 220, 132, .4));
  animation: opsHtagDraw 2.4s ease-out .5s forwards
}

@keyframes opsHtagDraw {
  to {
    stroke-dashoffset: 0
  }
}

.ops-htag-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(22, 184, 119, .13);
  padding: 2px 7px;
  border-radius: 8px
}

.ops-htag-delta i {
  font-size: 8px
}

/* ranked hashtag list */
.ops-htag-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 12px 12px;
  background: #14161d
}

.ops-htag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(5px);
  animation: opsHtagRow .5s ease forwards
}

@keyframes opsHtagRow {
  to {
    opacity: 1;
    transform: none
  }
}

.ops-htag-row1 {
  animation-delay: .12s
}

.ops-htag-row2 {
  animation-delay: .22s
}

.ops-htag-row3 {
  animation-delay: .32s
}

.ops-htag-row4 {
  animation-delay: .42s
}

.ops-htag-row5 {
  animation-delay: .52s
}

.ops-htag-rank {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, .4);
  font-variant-numeric: tabular-nums
}

.ops-htag-rank i {
  font-size: 12px
}

.ops-htag-rank.hot {
  color: #e05320
}

.ops-htag-flame {
  display: inline-block;
  transform-origin: center bottom;
  animation: opsHtagFlame 1.4s ease-in-out infinite
}

@keyframes opsHtagFlame {

  0%,
  100% {
    transform: scale(1) rotate(-4deg);
    filter: drop-shadow(0 0 2px rgba(224, 83, 32, .5))
  }

  50% {
    transform: scale(1.2) rotate(4deg);
    filter: drop-shadow(0 0 6px rgba(242, 133, 74, .95))
  }
}

.ops-htag-tag {
  flex: 0 0 88px;
  width: 88px;
  font-size: 11.5px;
  font-weight: 700;
  color: #dfe4ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-htag-row1 .ops-htag-tag {
  color: #f2854a
}

.ops-htag-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 7px;
  background: rgba(255, 255, 255, .07);
  border-radius: 6px;
  overflow: hidden
}

.ops-htag-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 6px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: opsHtagBar 1.1s cubic-bezier(.2, .8, .2, 1) forwards
}

@keyframes opsHtagBar {
  to {
    transform: scaleX(1)
  }
}

.ops-htag-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-120%);
  animation: opsHtagShine 2.8s ease-in-out 1.4s infinite
}

@keyframes opsHtagShine {
  0% {
    transform: translateX(-120%)
  }

  60%,
  100% {
    transform: translateX(260%)
  }
}

.ops-htag-row1 .ops-htag-fill {
  width: 95%;
  background: linear-gradient(90deg, #e05320, #f2854a);
  box-shadow: 0 0 10px rgba(224, 83, 32, .45);
  animation-delay: .22s
}

.ops-htag-row2 .ops-htag-fill {
  width: 79%;
  background: linear-gradient(90deg, #e0872a, #f2a63f);
  animation-delay: .34s
}

.ops-htag-row3 .ops-htag-fill {
  width: 66%;
  background: linear-gradient(90deg, #c22e75, #e0398f);
  animation-delay: .46s
}

.ops-htag-row4 .ops-htag-fill {
  width: 53%;
  background: linear-gradient(90deg, #5f43d6, #7c5cff);
  animation-delay: .58s
}

.ops-htag-row5 .ops-htag-fill {
  width: 42%;
  background: linear-gradient(90deg, #3a6fe0, #4f8cff);
  animation-delay: .70s
}

.ops-htag-val {
  flex: 0 0 auto;
  min-width: 30px;
  text-align: right;
  font-size: 10.5px;
  font-weight: 800;
  color: #cfd4de;
  font-variant-numeric: tabular-nums
}

.ops-htag-row1 .ops-htag-val {
  color: #f2854a
}

/* footer — live scan */
.ops-htag-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 11px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-htag-fleft {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5)
}

.ops-htag-sync {
  color: #e05320;
  font-size: 11px;
  animation: opsHtagSpin 3s linear infinite
}

@keyframes opsHtagSpin {
  to {
    transform: rotate(360deg)
  }
}

.ops-htag-fright {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6)
}

.ops-htag-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px
}

.ops-htag-eq {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: #e05320;
  transform-origin: center bottom;
  transform: scaleY(.35);
  animation: opsHtagEq .9s ease-in-out infinite
}

.ops-htag-eq2 {
  background: #f2854a;
  animation-delay: .18s
}

.ops-htag-eq3 {
  animation-delay: .36s
}

.ops-htag-eq4 {
  background: #f2a63f;
  animation-delay: .12s
}

@keyframes opsHtagEq {

  0%,
  100% {
    transform: scaleY(.35)
  }

  50% {
    transform: scaleY(1)
  }
}

.ops-htag-scan {
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.ops-htag-scan i {
  color: #9aa4b2;
  font-size: 9px
}

.ops-htag-rate {
  display: inline-block;
  min-width: 2.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #cfd4de
}

.ops-htag-rate::after {
  content: counter(opsHtagS);
  counter-reset: opsHtagS var(--opsHtagS, 0);
  animation: opsHtagScan 2.6s steps(30) infinite
}

@keyframes opsHtagScan {
  from {
    --opsHtagS: 0
  }

  to {
    --opsHtagS: 940
  }
}

/* floating chips — position + icon colour only */
.ops-htag-chip-1 {
  top: 24px;
  left: -8px
}

.ops-htag-chip-1 i {
  color: #e05320
}

.ops-htag-chip-2 {
  top: 184px;
  right: -12px
}

.ops-htag-chip-2 i {
  color: #16b877
}

.ops-htag-chip-3 {
  bottom: 54px;
  left: -6px
}

.ops-htag-chip-3 i {
  color: #7c5cff
}

@media (prefers-reduced-motion: reduce) {
  .ops-htag * {
    animation: none !important
  }

  .ops-htag-row {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-htag-fill {
    transform: scaleX(1) !important
  }

  .ops-htag-odo-strip {
    transform: translateY(-4em) !important
  }

  .ops-htag-spark polyline {
    stroke-dashoffset: 0 !important
  }

  .ops-htag-rate {
    --opsHtagS: 940
  }
}

/* ---- lms-software-development (lms) ---- */
@property --ops-lms-num {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

.ops-lms,
.ops-lms * {
  box-sizing: border-box;
}

.ops-lms {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

.ops-lms-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-lms-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #e9edf5;
  letter-spacing: .2px;
}

.ops-lms-file i {
  color: #e05320;
  font-size: 12px;
}

.ops-lms-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #93b7a4;
  background: rgba(61, 220, 132, .1);
  padding: 3px 9px;
  border-radius: 999px;
}

.ops-lms-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsLmsPulse 1.9s ease-out infinite;
}

.ops-lms-body {
  position: relative;
  overflow: hidden;
}

.ops-lms-stage {
  padding: 13px 12px 12px;
}

.ops-lms-course {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a1d26;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 11px;
}

.ops-lms-thumb {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e05320, #f2854a);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 6px 14px rgba(224, 83, 32, .35);
}

.ops-lms-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.ops-lms-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #f4f6fa;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-lms-sub {
  display: block;
  font-size: 9.5px;
  color: #7f8798;
  margin: 2px 0 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-lms-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.ops-lms-fill {
  display: block;
  height: 100%;
  width: 5%;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #e05320, #f2854a);
  animation: opsLmsFill 9s cubic-bezier(.45, .05, .25, 1) infinite;
}

.ops-lms-shine {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: opsLmsShine 1.7s linear infinite;
}

.ops-lms-pct {
  flex: 0 0 auto;
  min-width: 36px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 800;
  color: #f2854a;
  font-variant-numeric: tabular-nums;
  --ops-lms-num: 0;
  counter-reset: opslmspct var(--ops-lms-num);
  animation: opsLmsCount 9s cubic-bezier(.45, .05, .25, 1) infinite;
}

.ops-lms-pct::after {
  content: counter(opslmspct) "%";
}

.ops-lms-list {
  position: relative;
  margin-top: 11px;
  padding: 2px 0;
}

.ops-lms-cursor {
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 27px;
  border-radius: 8px;
  background: rgba(224, 83, 32, .1);
  border: 1px solid rgba(224, 83, 32, .22);
  opacity: 0;
  animation: opsLmsCursor 9s ease infinite;
}

.ops-lms-item {
  position: relative;
  z-index: 1;
  height: 27px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 7px;
}

.ops-lms-check {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 9px;
}

.ops-lms-check i {
  opacity: 0;
  transform: scale(.2);
}

.ops-lms-lesson {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #d4d9e2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-lms-time {
  flex: 0 0 auto;
  font-size: 10px;
  color: #6b7385;
  font-variant-numeric: tabular-nums;
}

.ops-lms-c1 {
  animation: opsLmsCk1 9s ease infinite;
}

.ops-lms-c1 i {
  animation: opsLmsCi1 9s ease infinite;
}

.ops-lms-c2 {
  animation: opsLmsCk2 9s ease infinite;
}

.ops-lms-c2 i {
  animation: opsLmsCi2 9s ease infinite;
}

.ops-lms-c3 {
  animation: opsLmsCk3 9s ease infinite;
}

.ops-lms-c3 i {
  animation: opsLmsCi3 9s ease infinite;
}

.ops-lms-c4 {
  animation: opsLmsCk4 9s ease infinite;
}

.ops-lms-c4 i {
  animation: opsLmsCi4 9s ease infinite;
}

.ops-lms-foot {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.ops-lms-quiz {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.ops-lms-ring {
  width: 44px;
  height: 44px;
  display: block;
  transform: rotate(-90deg);
}

.ops-lms-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .1);
  stroke-width: 3;
}

.ops-lms-ring-fg {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 94.25;
  stroke-dashoffset: 94.25;
  animation: opsLmsRing 9s cubic-bezier(.45, .05, .25, 1) infinite;
}

.ops-lms-ring-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #eafff3;
  opacity: 0;
  animation: opsLmsNum 9s ease infinite;
}

.ops-lms-ring-num::after {
  content: "%";
  font-size: 8px;
  margin-left: 1px;
  opacity: .7;
}

.ops-lms-quiz-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.ops-lms-quiz-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #eef1f6;
}

.ops-lms-quiz-sub {
  display: block;
  font-size: 9.5px;
  color: #7f8798;
  margin-top: 2px;
}

.ops-lms-streak {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #f2a63f;
  background: rgba(242, 166, 63, .12);
  padding: 4px 9px;
  border-radius: 999px;
}

.ops-lms-streak i {
  color: #f2a63f;
  font-size: 10px;
}

.ops-lms-cert {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 10px;
  background: radial-gradient(120% 90% at 50% 32%, rgba(224, 83, 32, .2), rgba(15, 17, 23, .97) 68%), #0f1117;
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
  animation: opsLmsCert 9s ease infinite;
}

.ops-lms-badge {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e05320, #f2854a);
  color: #fff;
  font-size: 24px;
  box-shadow: 0 10px 26px rgba(224, 83, 32, .5);
  animation: opsLmsBadge 9s ease infinite;
}

.ops-lms-badge::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(242, 133, 74, .55);
  animation: opsLmsBadgeRing 2.2s ease-out infinite;
}

.ops-lms-cert-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
}

.ops-lms-cert-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #f2a63f;
}

.ops-lms-cert-sub i {
  color: #f2a63f;
}

.ops-lms-confetti {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  opacity: 0;
}

.ops-lms-cf1 {
  background: #e05320;
  animation: opsLmsCf1 9s ease-in infinite;
}

.ops-lms-cf2 {
  background: #4f8cff;
  animation: opsLmsCf2 9s ease-in infinite;
}

.ops-lms-cf3 {
  background: #3ddc84;
  animation: opsLmsCf3 9s ease-in infinite;
}

.ops-lms-cf4 {
  background: #f2a63f;
  animation: opsLmsCf4 9s ease-in infinite;
}

.ops-lms-cf5 {
  background: #7c5cff;
  animation: opsLmsCf5 9s ease-in infinite;
}

.ops-lms-chip-1 {
  position: absolute;
  top: 26px;
  left: -6px;
  z-index: 6;
}

.ops-lms-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px;
  z-index: 6;
}

.ops-lms-chip-3 {
  position: absolute;
  bottom: 54px;
  left: -6px;
  z-index: 6;
}

.ops-lms-chip-1 i {
  color: #e05320;
}

.ops-lms-chip-2 i {
  color: #16b877;
}

.ops-lms-chip-3 i {
  color: #7c5cff;
}

@keyframes opsLmsPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0)
  }
}

@keyframes opsLmsFill {

  0%,
  6% {
    width: 5%
  }

  52% {
    width: 100%
  }

  69.9% {
    width: 100%
  }

  70%,
  100% {
    width: 5%
  }
}

@keyframes opsLmsShine {
  0% {
    transform: translateX(-130%)
  }

  100% {
    transform: translateX(360%)
  }
}

@keyframes opsLmsCount {

  0%,
  6% {
    --ops-lms-num: 0
  }

  52% {
    --ops-lms-num: 100
  }

  69.9% {
    --ops-lms-num: 100
  }

  70%,
  100% {
    --ops-lms-num: 0
  }
}

@keyframes opsLmsCursor {

  0%,
  3% {
    transform: translateY(0);
    opacity: 0
  }

  6% {
    opacity: 1
  }

  17% {
    transform: translateY(0)
  }

  27% {
    transform: translateY(27px)
  }

  37% {
    transform: translateY(54px)
  }

  48% {
    transform: translateY(81px)
  }

  52% {
    transform: translateY(81px);
    opacity: 1
  }

  56% {
    opacity: 0
  }

  100% {
    transform: translateY(81px);
    opacity: 0
  }
}

@keyframes opsLmsCk1 {

  0%,
  14% {
    background: transparent;
    border-color: rgba(255, 255, 255, .2)
  }

  17%,
  69.9% {
    background: #e05320;
    border-color: #e05320
  }

  70%,
  100% {
    background: transparent;
    border-color: rgba(255, 255, 255, .2)
  }
}

@keyframes opsLmsCi1 {

  0%,
  14% {
    opacity: 0;
    transform: scale(.2)
  }

  17% {
    opacity: 1;
    transform: scale(1.3)
  }

  20% {
    transform: scale(1)
  }

  69.9% {
    opacity: 1;
    transform: scale(1)
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(.2)
  }
}

@keyframes opsLmsCk2 {

  0%,
  24% {
    background: transparent;
    border-color: rgba(255, 255, 255, .2)
  }

  27%,
  69.9% {
    background: #e05320;
    border-color: #e05320
  }

  70%,
  100% {
    background: transparent;
    border-color: rgba(255, 255, 255, .2)
  }
}

@keyframes opsLmsCi2 {

  0%,
  24% {
    opacity: 0;
    transform: scale(.2)
  }

  27% {
    opacity: 1;
    transform: scale(1.3)
  }

  30% {
    transform: scale(1)
  }

  69.9% {
    opacity: 1;
    transform: scale(1)
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(.2)
  }
}

@keyframes opsLmsCk3 {

  0%,
  34% {
    background: transparent;
    border-color: rgba(255, 255, 255, .2)
  }

  37%,
  69.9% {
    background: #e05320;
    border-color: #e05320
  }

  70%,
  100% {
    background: transparent;
    border-color: rgba(255, 255, 255, .2)
  }
}

@keyframes opsLmsCi3 {

  0%,
  34% {
    opacity: 0;
    transform: scale(.2)
  }

  37% {
    opacity: 1;
    transform: scale(1.3)
  }

  40% {
    transform: scale(1)
  }

  69.9% {
    opacity: 1;
    transform: scale(1)
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(.2)
  }
}

@keyframes opsLmsCk4 {

  0%,
  45% {
    background: transparent;
    border-color: rgba(255, 255, 255, .2)
  }

  48%,
  69.9% {
    background: #e05320;
    border-color: #e05320
  }

  70%,
  100% {
    background: transparent;
    border-color: rgba(255, 255, 255, .2)
  }
}

@keyframes opsLmsCi4 {

  0%,
  45% {
    opacity: 0;
    transform: scale(.2)
  }

  48% {
    opacity: 1;
    transform: scale(1.3)
  }

  51% {
    transform: scale(1)
  }

  69.9% {
    opacity: 1;
    transform: scale(1)
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(.2)
  }
}

@keyframes opsLmsRing {

  0%,
  8% {
    stroke-dashoffset: 94.25
  }

  50% {
    stroke-dashoffset: 7.5
  }

  69.9% {
    stroke-dashoffset: 7.5
  }

  70%,
  100% {
    stroke-dashoffset: 94.25
  }
}

@keyframes opsLmsNum {

  0%,
  44% {
    opacity: 0
  }

  52%,
  69.9% {
    opacity: 1
  }

  70%,
  100% {
    opacity: 0
  }
}

@keyframes opsLmsCert {

  0%,
  54% {
    opacity: 0;
    transform: scale(.92)
  }

  60% {
    opacity: 1;
    transform: scale(1)
  }

  84% {
    opacity: 1;
    transform: scale(1)
  }

  90%,
  100% {
    opacity: 0;
    transform: scale(.95)
  }
}

@keyframes opsLmsBadge {

  0%,
  55% {
    transform: scale(.4)
  }

  61% {
    transform: scale(1.15)
  }

  65% {
    transform: scale(1)
  }

  84% {
    transform: scale(1)
  }

  90%,
  100% {
    transform: scale(.6)
  }
}

@keyframes opsLmsBadgeRing {
  0% {
    transform: scale(1);
    opacity: .7
  }

  100% {
    transform: scale(1.6);
    opacity: 0
  }
}

@keyframes opsLmsCf1 {

  0%,
  54% {
    transform: translate(-50%, -50%) scale(.3) rotate(0);
    opacity: 0
  }

  57% {
    opacity: 1
  }

  70% {
    transform: translate(calc(-50% - 46px), calc(-50% - 30px)) scale(1) rotate(160deg);
    opacity: 1
  }

  82%,
  100% {
    transform: translate(calc(-50% - 40px), calc(-50% + 6px)) scale(1) rotate(220deg);
    opacity: 0
  }
}

@keyframes opsLmsCf2 {

  0%,
  54% {
    transform: translate(-50%, -50%) scale(.3);
    opacity: 0
  }

  57% {
    opacity: 1
  }

  70% {
    transform: translate(calc(-50% - 16px), calc(-50% - 52px)) scale(1) rotate(-120deg);
    opacity: 1
  }

  82%,
  100% {
    transform: translate(calc(-50% - 12px), calc(-50% - 14px)) scale(1) rotate(-180deg);
    opacity: 0
  }
}

@keyframes opsLmsCf3 {

  0%,
  54% {
    transform: translate(-50%, -50%) scale(.3);
    opacity: 0
  }

  57% {
    opacity: 1
  }

  70% {
    transform: translate(calc(-50% + 22px), calc(-50% - 48px)) scale(1) rotate(140deg);
    opacity: 1
  }

  82%,
  100% {
    transform: translate(calc(-50% + 26px), calc(-50% - 10px)) scale(1) rotate(210deg);
    opacity: 0
  }
}

@keyframes opsLmsCf4 {

  0%,
  54% {
    transform: translate(-50%, -50%) scale(.3);
    opacity: 0
  }

  57% {
    opacity: 1
  }

  70% {
    transform: translate(calc(-50% + 48px), calc(-50% - 22px)) scale(1) rotate(-100deg);
    opacity: 1
  }

  82%,
  100% {
    transform: translate(calc(-50% + 52px), calc(-50% + 12px)) scale(1) rotate(-150deg);
    opacity: 0
  }
}

@keyframes opsLmsCf5 {

  0%,
  54% {
    transform: translate(-50%, -50%) scale(.3);
    opacity: 0
  }

  57% {
    opacity: 1
  }

  70% {
    transform: translate(calc(-50% - 48px), calc(-50% - 8px)) scale(1) rotate(120deg);
    opacity: 1
  }

  82%,
  100% {
    transform: translate(calc(-50% - 52px), calc(-50% + 20px)) scale(1) rotate(180deg);
    opacity: 0
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-lms * {
    animation: none !important;
  }

  .ops-lms-fill {
    width: 100% !important;
  }

  .ops-lms-pct {
    --ops-lms-num: 100 !important;
  }

  .ops-lms-check {
    background: #e05320 !important;
    border-color: #e05320 !important;
  }

  .ops-lms-check i {
    opacity: 1 !important;
    transform: none !important;
  }

  .ops-lms-ring-fg {
    stroke-dashoffset: 7.5 !important;
  }

  .ops-lms-ring-num {
    opacity: 1 !important;
  }

  .ops-lms-cursor {
    opacity: 0 !important;
  }

  .ops-lms-cert {
    opacity: 0 !important;
  }

  .ops-lms-confetti {
    opacity: 0 !important;
  }
}

/* ---- meme-marketing (meme) ---- */
.ops-meme {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #fff;
  text-align: left
}

.ops-meme * {
  box-sizing: border-box
}

/* window bar */
.ops-meme-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-meme-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .2px
}

.ops-meme-file i {
  color: #e05320;
  font-size: 11px
}

.ops-meme-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #f2854a;
  background: rgba(224, 83, 32, .13);
  border: 1px solid rgba(224, 83, 32, .24);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-meme-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2854a;
  animation: opsMemePulse 1.6s ease-in-out infinite
}

/* stage */
.ops-meme-stage {
  position: relative;
  padding: 16px 0 18px;
  overflow: hidden;
  background: radial-gradient(130% 92% at 50% -12%, #1c202c 0%, #14161d 66%)
}

/* viral pulse rings behind the card */
.ops-meme-ring {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 118px;
  height: 118px;
  margin: -59px 0 0 -59px;
  border-radius: 50%;
  border: 2px solid rgba(242, 133, 74, .5);
  opacity: 0;
  z-index: 1;
  animation: opsMemeRing 3s ease-out infinite
}

.ops-meme-ring2 {
  border-color: rgba(224, 57, 143, .45);
  animation-delay: 1.5s
}

/* meme card */
.ops-meme-card {
  position: relative;
  z-index: 3;
  width: 64%;
  margin: 0 auto;
  border-radius: 13px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .5);
  animation: opsMemeFloat 4s ease-in-out infinite
}

.ops-meme-img {
  position: relative;
  height: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffd166 0%, #f2854a 46%, #e0398f 100%)
}

.ops-meme-face {
  font-size: 50px;
  line-height: 1;
  color: #241033;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .55)) drop-shadow(0 10px 16px rgba(0, 0, 0, .28));
  animation: opsMemeWiggle 2.4s ease-in-out infinite
}

.ops-meme-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-150%) skewX(-18deg);
  animation: opsMemeShine 4.2s ease-in-out infinite
}

.ops-meme-cap {
  position: absolute;
  left: 6px;
  right: 6px;
  z-index: 2;
  text-align: center;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .3px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 3px 6px rgba(0, 0, 0, .45)
}

.ops-meme-cap-top {
  top: 8px
}

.ops-meme-cap-bot {
  bottom: 8px
}

.ops-meme-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 11px;
  background: #14161d;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

.ops-meme-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums
}

.ops-meme-act i {
  font-size: 11px
}

.ops-meme-act-like i {
  color: #ff4d6d
}

.ops-meme-act-laugh i {
  color: #f2a63f
}

.ops-meme-act-cmt i {
  color: #4f8cff
}

/* flying reactions */
.ops-meme-react {
  position: absolute;
  z-index: 6;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  opacity: 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4)
}

.ops-meme-r1 {
  left: 44%;
  bottom: 66px;
  background: linear-gradient(135deg, #ff5a7a, #e0398f);
  animation: opsMemeFlyL 3.2s ease-in infinite 0s
}

.ops-meme-r2 {
  left: 52%;
  bottom: 60px;
  color: #5a3a00;
  background: linear-gradient(135deg, #ffd15c, #f2a63f);
  animation: opsMemeFlyR 3.5s ease-in infinite .55s
}

.ops-meme-r3 {
  left: 38%;
  bottom: 72px;
  background: linear-gradient(135deg, #5b9bff, #4f8cff);
  animation: opsMemeFlyL 3.1s ease-in infinite 1.1s
}

.ops-meme-r4 {
  left: 58%;
  bottom: 64px;
  background: linear-gradient(135deg, #ff7a90, #ff4d6d);
  animation: opsMemeFlyR 3.6s ease-in infinite 1.7s
}

.ops-meme-r5 {
  left: 48%;
  bottom: 58px;
  background: linear-gradient(135deg, #3ddc84, #16b877);
  animation: opsMemeFlyU 3.2s ease-in infinite 2.3s
}

.ops-meme-r6 {
  left: 33%;
  bottom: 62px;
  color: #5a3a00;
  background: linear-gradient(135deg, #ffd15c, #f2a63f);
  animation: opsMemeFlyL 3.5s ease-in infinite 2.9s
}

/* footer analytics: spiking share count */
.ops-meme-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 11px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-meme-shares {
  display: flex;
  align-items: center;
  gap: 9px
}

.ops-meme-sicon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #e05320, #f2854a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(224, 83, 32, .4)
}

.ops-meme-smeta {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.ops-meme-slabel {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  color: rgba(255, 255, 255, .42)
}

.ops-meme-scount {
  display: flex;
  align-items: baseline;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.ops-meme-count::after {
  content: counter(opsMemeN);
  counter-reset: opsMemeN var(--opsMemeN, 2847);
  animation: opsMemeCount 3s cubic-bezier(.2, .75, .2, 1) forwards
}

.ops-meme-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px
}

.ops-meme-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(22, 184, 119, .14);
  border: 1px solid rgba(22, 184, 119, .22);
  padding: 3px 8px;
  border-radius: 8px;
  animation: opsMemeDelta 1.8s ease-in-out infinite
}

.ops-meme-delta i {
  font-size: 9px
}

.ops-meme-spark {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 22px
}

.ops-meme-sb {
  width: 4px;
  border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(1);
  background: linear-gradient(180deg, #f2854a, #e05320);
  animation: opsMemeBar .9s cubic-bezier(.2, .8, .2, 1) both
}

.ops-meme-sb1 {
  height: 6px;
  animation-delay: .08s
}

.ops-meme-sb2 {
  height: 10px;
  animation-delay: .16s
}

.ops-meme-sb3 {
  height: 8px;
  animation-delay: .24s
}

.ops-meme-sb4 {
  height: 14px;
  animation-delay: .32s
}

.ops-meme-sb5 {
  height: 18px;
  animation-delay: .4s
}

.ops-meme-sb6 {
  height: 22px;
  animation-delay: .48s;
  background: linear-gradient(180deg, #3ddc84, #16b877)
}

/* chips */
.ops-meme-chip-1 {
  top: 26px;
  left: -8px
}

.ops-meme-chip-1 i {
  color: #e05320
}

.ops-meme-chip-2 {
  top: 150px;
  right: -12px
}

.ops-meme-chip-2 i {
  color: #16b877
}

.ops-meme-chip-3 {
  bottom: 104px;
  left: -6px
}

.ops-meme-chip-3 i {
  color: #e0398f
}

/* keyframes */
@property --opsMemeN {
  syntax: '<integer>';
  inherits: true;
  initial-value: 2847
}

@keyframes opsMemeCount {
  from {
    --opsMemeN: 0
  }

  to {
    --opsMemeN: 2847
  }
}

@keyframes opsMemePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(224, 83, 32, .5)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(224, 83, 32, 0)
  }
}

@keyframes opsMemeFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-5px)
  }
}

@keyframes opsMemeWiggle {

  0%,
  100% {
    transform: rotate(-6deg) scale(1)
  }

  50% {
    transform: rotate(6deg) scale(1.08)
  }
}

@keyframes opsMemeShine {
  0% {
    transform: translateX(-150%) skewX(-18deg)
  }

  55%,
  100% {
    transform: translateX(250%) skewX(-18deg)
  }
}

@keyframes opsMemeRing {
  0% {
    opacity: .55;
    transform: scale(.5)
  }

  70% {
    opacity: 0
  }

  100% {
    opacity: 0;
    transform: scale(2.05)
  }
}

@keyframes opsMemeDelta {

  0%,
  100% {
    transform: scale(1);
    opacity: .92
  }

  50% {
    transform: scale(1.07);
    opacity: 1
  }
}

@keyframes opsMemeBar {
  from {
    transform: scaleY(0)
  }

  to {
    transform: scaleY(1)
  }
}

@keyframes opsMemeFlyU {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(.3)
  }

  14% {
    opacity: 1;
    transform: translate(0, -14px) scale(1.05)
  }

  70% {
    opacity: .9;
    transform: translate(-2px, -104px) scale(.92)
  }

  100% {
    opacity: 0;
    transform: translate(0, -150px) scale(.65)
  }
}

@keyframes opsMemeFlyL {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(.3)
  }

  14% {
    opacity: 1;
    transform: translate(-6px, -14px) scale(1.05)
  }

  70% {
    opacity: .9;
    transform: translate(-30px, -104px) scale(.9)
  }

  100% {
    opacity: 0;
    transform: translate(-46px, -148px) scale(.62)
  }
}

@keyframes opsMemeFlyR {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(.3)
  }

  14% {
    opacity: 1;
    transform: translate(6px, -14px) scale(1.05)
  }

  70% {
    opacity: .9;
    transform: translate(30px, -104px) scale(.9)
  }

  100% {
    opacity: 0;
    transform: translate(46px, -148px) scale(.62)
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-meme * {
    animation: none !important
  }

  .ops-meme-react,
  .ops-meme-ring {
    opacity: 1 !important
  }

  .ops-meme-sb {
    transform: scaleY(1) !important
  }
}

/* ---- seo-smo-service-provider (seo) ---- */
.ops-seo,
.ops-seo * {
  box-sizing: border-box
}

.ops-seo {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  color: #fff;
  font-family: inherit;
  line-height: 1.2
}

/* window bar */
.ops-seo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-seo-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #e8eaf0;
  letter-spacing: .2px
}

.ops-seo-file i {
  color: #e05320;
  font-size: 12.5px
}

.ops-seo-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .8px;
  color: #3ddc84;
  background: rgba(61, 220, 132, .12);
  padding: 3px 9px;
  border-radius: 20px
}

.ops-seo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsSeoPulse 2s ease-out infinite
}

@keyframes opsSeoPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0)
  }
}

/* stage */
.ops-seo-stage {
  padding: 11px 12px 9px;
  background: radial-gradient(120% 90% at 50% -12%, rgba(224, 83, 32, .12), transparent 62%), #14161d
}

/* keyword context */
.ops-seo-kw {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 9px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 9px
}

.ops-seo-kw>i {
  color: #9aa4b2;
  font-size: 11px;
  flex-shrink: 0
}

.ops-seo-kw-q {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #eef1f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-seo-kw-loc {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  color: #aeb6c2;
  background: rgba(255, 255, 255, .06);
  padding: 2px 7px;
  border-radius: 20px
}

.ops-seo-kw-loc i {
  color: #e05320;
  font-size: 9px
}

/* serp list */
.ops-seo-serp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  height: 105px
}

.ops-seo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 9px;
  border-radius: 8px
}

.ops-seo-comp {
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .05)
}

.ops-seo-fav {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px
}

.ops-seo-fav-1 {
  background: linear-gradient(135deg, #4f8cff, #7c5cff)
}

.ops-seo-fav-2 {
  background: linear-gradient(135deg, #16b877, #3ddc84)
}

.ops-seo-fav-3 {
  background: linear-gradient(135deg, #f2a63f, #f2854a)
}

.ops-seo-fav-4 {
  background: linear-gradient(135deg, #e0398f, #b25cff)
}

.ops-seo-fav-you {
  background: linear-gradient(135deg, #e05320, #f2854a)
}

.ops-seo-dom {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: #aeb6c2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-seo-trend {
  flex-shrink: 0;
  width: 13px;
  text-align: center;
  font-size: 11px
}

.ops-seo-dn i {
  color: #ff5c6c
}

.ops-seo-flat i {
  color: #6b7280
}

/* climbing "you" row */
.ops-seo-you {
  position: absolute;
  left: 0;
  right: 0;
  top: 81px;
  z-index: 5;
  gap: 7px;
  background: linear-gradient(90deg, rgba(224, 83, 32, .26), rgba(224, 83, 32, 0) 60%), #181b24;
  border: 1px solid rgba(224, 83, 32, .6);
  box-shadow: inset 3px 0 0 #e05320, 0 8px 18px rgba(224, 83, 32, .28);
  animation: opsSeoClimb 8s cubic-bezier(.55, .05, .25, 1) infinite
}

@keyframes opsSeoClimb {

  0%,
  22% {
    top: 81px
  }

  25%,
  41% {
    top: 54px
  }

  44%,
  59% {
    top: 27px
  }

  62%,
  100% {
    top: 0
  }
}

.ops-seo-badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e05320, #f2854a);
  box-shadow: 0 3px 8px rgba(224, 83, 32, .5);
  color: #fff
}

.ops-seo-hash {
  font-size: 8px;
  font-weight: 800;
  opacity: .9
}

.ops-seo-odo {
  position: relative;
  width: 9px;
  height: 14px;
  overflow: hidden
}

.ops-seo-strip {
  display: flex;
  flex-direction: column;
  animation: opsSeoOdo 8s cubic-bezier(.7, 0, .3, 1) infinite
}

.ops-seo-strip b {
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1
}

@keyframes opsSeoOdo {

  0%,
  10% {
    transform: translateY(0)
  }

  14%,
  20% {
    transform: translateY(-14px)
  }

  24%,
  30% {
    transform: translateY(-28px)
  }

  34%,
  40% {
    transform: translateY(-42px)
  }

  44%,
  49% {
    transform: translateY(-56px)
  }

  53%,
  58% {
    transform: translateY(-70px)
  }

  61%,
  64% {
    transform: translateY(-84px)
  }

  66%,
  100% {
    transform: translateY(-98px)
  }
}

.ops-seo-dom-you {
  color: #fff;
  font-weight: 800
}

.ops-seo-up {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(61, 220, 132, .16);
  border: 1px solid rgba(61, 220, 132, .42);
  padding: 2px 6px;
  border-radius: 20px;
  opacity: 0;
  animation: opsSeoUp 8s ease-out infinite
}

.ops-seo-up i {
  font-size: 8.5px
}

@keyframes opsSeoUp {

  0%,
  58% {
    opacity: 0;
    transform: translateY(3px) scale(.6)
  }

  68% {
    opacity: 1;
    transform: translateY(0) scale(1.12)
  }

  74% {
    transform: scale(1)
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

/* footer + graph */
.ops-seo-foot {
  padding: 10px 12px 11px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-seo-foot-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px
}

.ops-seo-foot-lab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #c3c9d4
}

.ops-seo-foot-lab i {
  color: #3ddc84;
  font-size: 10px
}

.ops-seo-foot-val {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px
}

.ops-seo-foot-val i {
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  color: #8b93a2;
  margin-left: 1px
}

.ops-seo-foot-delta {
  font-size: 9.5px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(61, 220, 132, .14);
  padding: 2px 7px;
  border-radius: 20px
}

.ops-seo-graph {
  display: block;
  width: 100%;
  height: 40px;
  margin-bottom: 8px;
  overflow: visible
}

.ops-seo-area {
  fill: rgba(61, 220, 132, .14);
  opacity: 0;
  animation: opsSeoArea 8s ease-out infinite
}

@keyframes opsSeoArea {

  0%,
  18% {
    opacity: 0
  }

  55%,
  100% {
    opacity: 1
  }
}

.ops-seo-line {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 1px 3px rgba(61, 220, 132, .45));
  animation: opsSeoDraw 8s ease-out infinite
}

@keyframes opsSeoDraw {
  0% {
    stroke-dashoffset: 100
  }

  55%,
  100% {
    stroke-dashoffset: 0
  }
}

.ops-seo-dotmark {
  fill: #3ddc84;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: opsSeoDot 8s ease-out infinite
}

@keyframes opsSeoDot {

  0%,
  50% {
    opacity: 0;
    transform: scale(.3)
  }

  57% {
    opacity: 1;
    transform: scale(1)
  }

  70% {
    opacity: .5;
    transform: scale(1.7)
  }

  82% {
    opacity: 1;
    transform: scale(1)
  }

  100% {
    opacity: 1;
    transform: scale(1)
  }
}

/* keyword chips */
.ops-seo-tags {
  display: flex;
  gap: 7px
}

.ops-seo-tag {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: #c3c9d4;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 7px;
  opacity: 0;
  animation: opsSeoTag .6s ease forwards
}

.ops-seo-tag:nth-child(1) {
  animation-delay: .3s
}

.ops-seo-tag:nth-child(2) {
  animation-delay: .5s
}

@keyframes opsSeoTag {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.ops-seo-tag>i {
  color: #4f8cff;
  font-size: 9px;
  flex-shrink: 0
}

.ops-seo-tag-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ops-seo-tag b {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  color: #3ddc84;
  font-weight: 800
}

.ops-seo-tag b i {
  font-size: 7.5px
}

/* floating chips */
.ops-seo-chip-1 {
  top: 24px;
  left: -8px
}

.ops-seo-chip-2 {
  top: 150px;
  right: -12px
}

.ops-seo-chip-3 {
  bottom: 58px;
  left: -6px
}

.ops-seo-chip-1 i {
  color: #e05320
}

.ops-seo-chip-2 i {
  color: #4f8cff
}

.ops-seo-chip-3 i {
  color: #3ddc84
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ops-seo * {
    animation: none !important
  }

  .ops-seo-you {
    top: 0 !important
  }

  .ops-seo-strip {
    transform: translateY(-98px) !important
  }

  .ops-seo-up,
  .ops-seo-area,
  .ops-seo-tag {
    opacity: 1 !important
  }

  .ops-seo-dotmark {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-seo-line {
    stroke-dashoffset: 0 !important
  }
}

/* ---- viral-marketing (viral) ---- */
.ops-viral {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  color: #fff;
  font-family: inherit;
  line-height: 1.2
}

.ops-viral-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-viral-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #c7ccd6;
  letter-spacing: .2px
}

.ops-viral-file i {
  color: #e05320;
  font-size: 12px
}

.ops-viral-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #3ddc84;
  background: rgba(61, 220, 132, .12);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-viral-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsViralPulse 1.8s ease-out infinite
}

@keyframes opsViralPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0)
  }
}

.ops-viral-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 340/168;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 40%, #1c1f2a 0%, #15171f 60%, #101219 100%)
}

.ops-viral-glow {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 48%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 83, 32, .3), rgba(224, 83, 32, 0) 62%);
  z-index: 1;
  animation: opsViralGlow 2.8s ease-in-out infinite
}

@keyframes opsViralGlow {

  0%,
  100% {
    opacity: .55
  }

  50% {
    opacity: .95
  }
}

.ops-viral-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

.ops-viral-line {
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 1.1
}

.ops-viral-line2 {
  stroke: rgba(255, 255, 255, .09);
  stroke-width: .9
}

.ops-viral-tdot {
  fill: rgba(255, 255, 255, .55);
  transform-box: fill-box;
  transform-origin: center;
  animation: opsViralTdot 2.4s ease-in-out infinite
}

.ops-viral-tdot:nth-of-type(2) {
  animation-delay: .5s
}

.ops-viral-tdot:nth-of-type(3) {
  animation-delay: 1s
}

.ops-viral-tdot:nth-of-type(4) {
  animation-delay: 1.5s
}

.ops-viral-tdot:nth-of-type(5) {
  animation-delay: 2s
}

@keyframes opsViralTdot {

  0%,
  100% {
    transform: scale(.75);
    opacity: .4
  }

  50% {
    transform: scale(1.25);
    opacity: .9
  }
}

.ops-viral-flow {
  fill: #ffb079;
  filter: drop-shadow(0 0 3px rgba(242, 133, 74, .8));
  animation: opsViralFlow 2.7s linear infinite
}

@keyframes opsViralFlow {
  0% {
    transform: translate(0, 0);
    opacity: 0
  }

  12% {
    opacity: 1
  }

  84% {
    opacity: .95
  }

  100% {
    transform: translate(var(--dx), var(--dy));
    opacity: 0
  }
}

.ops-viral-f1 {
  --dx: -98px;
  --dy: -42px;
  animation-delay: 0s
}

.ops-viral-f2 {
  --dx: 98px;
  --dy: -40px;
  animation-delay: .45s
}

.ops-viral-f3 {
  --dx: -130px;
  --dy: 16px;
  animation-delay: .9s
}

.ops-viral-f4 {
  --dx: 130px;
  --dy: 12px;
  animation-delay: 1.35s
}

.ops-viral-f5 {
  --dx: -74px;
  --dy: 62px;
  animation-delay: 1.8s
}

.ops-viral-f6 {
  --dx: 74px;
  --dy: 64px;
  animation-delay: 2.25s
}

.ops-viral-hub {
  position: absolute;
  left: 50%;
  top: 45.2%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  z-index: 4
}

.ops-viral-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(240, 120, 60, .55);
  opacity: 0;
  animation: opsViralRing 2.7s ease-out infinite
}

.ops-viral-ring2 {
  animation-delay: .9s
}

.ops-viral-ring3 {
  animation-delay: 1.8s
}

@keyframes opsViralRing {
  0% {
    transform: scale(.6);
    opacity: .75
  }

  70% {
    opacity: 0
  }

  100% {
    transform: scale(2.1);
    opacity: 0
  }
}

.ops-viral-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: #fff;
  background: linear-gradient(140deg, #f2854a, #e05320);
  box-shadow: 0 6px 18px rgba(224, 83, 32, .55), inset 0 1px 1px rgba(255, 255, 255, .35);
  animation: opsViralCore 2.7s ease-in-out infinite
}

@keyframes opsViralCore {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.07)
  }
}

.ops-viral-node {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #1b1f29;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  z-index: 4;
  transform: translate(-50%, -50%);
  animation: opsViralNode 2.7s ease-in-out infinite
}

@keyframes opsViralNode {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1)
  }

  45%,
  60% {
    transform: translate(-50%, -50%) scale(1.16)
  }
}

.ops-viral-n1 {
  left: 21.2%;
  top: 20.2%;
  color: #e0398f;
  animation-delay: .15s
}

.ops-viral-n2 {
  left: 78.8%;
  top: 21.4%;
  color: #3ddc84;
  animation-delay: .6s
}

.ops-viral-n3 {
  left: 11.8%;
  top: 54.8%;
  color: #4f8cff;
  animation-delay: 1.05s
}

.ops-viral-n4 {
  left: 88.2%;
  top: 52.4%;
  color: #7c5cff;
  animation-delay: 1.5s
}

.ops-viral-n5 {
  left: 28.2%;
  top: 82.1%;
  color: #f2a63f;
  animation-delay: 1.95s
}

.ops-viral-n6 {
  left: 71.8%;
  top: 83.3%;
  color: #4f8cff;
  animation-delay: 2.4s
}

.ops-viral-foot {
  display: flex;
  align-items: stretch;
  gap: 9px;
  padding: 11px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-viral-metric {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: #161922;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 8px 10px 7px;
  overflow: hidden
}

.ops-viral-mlabel {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #8b93a2
}

.ops-viral-mlabel i {
  color: #4f8cff;
  font-size: 9px
}

.ops-viral-mnum {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
  font-size: clamp(13px, 4.1vw, 16.5px);
  font-weight: 800;
  letter-spacing: -.3px;
  white-space: nowrap;
  color: #fff
}

.ops-viral-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(61, 220, 132, .15);
  padding: 1px 5px;
  border-radius: 6px;
  animation: opsViralDelta 2.2s ease-in-out infinite
}

.ops-viral-delta i {
  font-size: 8px
}

@keyframes opsViralDelta {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-1.5px)
  }
}

.ops-viral-sparkwrap {
  position: relative;
  margin-top: 5px
}

.ops-viral-spark {
  display: block;
  width: 100%;
  height: 28px
}

.ops-viral-sparkfill {
  fill: url(#opsViralGrad)
}

.ops-viral-sparkline {
  fill: none;
  stroke: #e05320;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke
}

.ops-viral-sparkflow {
  fill: none;
  stroke: #ffdcbb;
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 57;
  animation: opsViralSpark 2s linear infinite
}

@keyframes opsViralSpark {
  from {
    stroke-dashoffset: 60
  }

  to {
    stroke-dashoffset: 0
  }
}

.ops-viral-sparkdot {
  position: absolute;
  top: -2px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2854a;
  animation: opsViralDot 1.8s ease-out infinite
}

@keyframes opsViralDot {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 133, 74, .6)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(242, 133, 74, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(242, 133, 74, 0)
  }
}

.ops-viral-trend {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #e05320, #f2854a);
  box-shadow: 0 6px 16px rgba(224, 83, 32, .35);
  animation: opsViralTrend 2.8s ease-in-out infinite
}

@keyframes opsViralTrend {

  0%,
  100% {
    box-shadow: 0 6px 16px rgba(224, 83, 32, .32)
  }

  50% {
    box-shadow: 0 9px 24px rgba(224, 83, 32, .55)
  }
}

.ops-viral-trend>i {
  font-size: 16px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25))
}

.ops-viral-tmeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1
}

.ops-viral-tlabel {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  opacity: .92
}

.ops-viral-trank {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.3px
}

.ops-viral-trend::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  animation: opsViralShine 3.6s ease-in-out infinite
}

@keyframes opsViralShine {
  0% {
    left: -70%
  }

  55% {
    left: 135%
  }

  100% {
    left: 135%
  }
}

.ops-viral-chip-1 {
  top: 34px;
  left: -6px
}

.ops-viral-chip-1 i {
  color: #e05320
}

.ops-viral-chip-2 {
  top: 150px;
  right: -10px
}

.ops-viral-chip-2 i {
  color: #4f8cff
}

.ops-viral-chip-3 {
  bottom: 64px;
  left: -4px
}

.ops-viral-chip-3 i {
  color: #3ddc84
}

@media (prefers-reduced-motion: reduce) {
  .ops-viral * {
    animation: none !important
  }

  .ops-viral-flow,
  .ops-viral-ring {
    opacity: 1 !important
  }
}

/* ---- youtube-marketing (ytm) ---- */
.ops-ytm {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  color: #fff;
  font-family: inherit
}

.ops-ytm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-ytm-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #c7ccd6;
  letter-spacing: .2px
}

.ops-ytm-file i {
  color: #e05320;
  font-size: 12px
}

.ops-ytm-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ff6b85;
  background: rgba(255, 0, 51, .14);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-ytm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff0033;
  animation: opsYtmPulse 1.8s ease-out infinite
}

@keyframes opsYtmPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 51, .55)
  }

  70% {
    box-shadow: 0 0 0 7px rgba(255, 0, 51, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 51, 0)
  }
}

.ops-ytm-stage {
  padding: 14px;
  background: radial-gradient(120% 90% at 50% -8%, rgba(255, 0, 51, .14), transparent 60%), #14161d
}

.ops-ytm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px
}

.ops-ytm-ava {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  background: linear-gradient(135deg, #ff0033, #e05320);
  box-shadow: 0 6px 16px rgba(255, 0, 51, .45);
  animation: opsYtmAva 3.4s ease-in-out infinite
}

.ops-ytm-ava i {
  margin-left: 2px
}

@keyframes opsYtmAva {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }
}

.ops-ytm-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.ops-ytm-name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 800;
  color: #eef1f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-ytm-name i {
  color: #9aa2b1;
  font-size: 11px
}

.ops-ytm-count {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: .5px
}

.ops-ytm-cbase {
  font-weight: 800
}

.ops-ytm-odo {
  display: inline-block;
  height: 20px;
  overflow: hidden
}

.ops-ytm-strip {
  display: flex;
  flex-direction: column;
  animation: opsYtmOdo 2.2s steps(10, end) infinite
}

.ops-ytm-strip-slow {
  animation-duration: 22s
}

.ops-ytm-strip span {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center
}

@keyframes opsYtmOdo {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-200px)
  }
}

.ops-ytm-clabel {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #8b93a2
}

.ops-ytm-clabel b {
  color: #16b877;
  font-weight: 800
}

.ops-ytm-sub {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: default;
  font-family: inherit;
  background: #ff0033;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 8px 13px;
  border-radius: 100px;
  box-shadow: 0 0 0 0 rgba(255, 0, 51, .5);
  animation: opsYtmSub 2.6s ease-out infinite;
  white-space: nowrap
}

.ops-ytm-sub i {
  font-size: 11px;
  transform-origin: 50% 18%;
  animation: opsYtmBell 2.6s ease-in-out infinite
}

@keyframes opsYtmSub {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 51, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 9px rgba(255, 0, 51, 0)
  }
}

@keyframes opsYtmBell {

  0%,
  70%,
  100% {
    transform: rotate(0)
  }

  77% {
    transform: rotate(13deg)
  }

  85% {
    transform: rotate(-9deg)
  }

  93% {
    transform: rotate(4deg)
  }
}

.ops-ytm-graph {
  position: relative;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 10px 12px 8px
}

.ops-ytm-gtop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px
}

.ops-ytm-gtitle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #8b93a2
}

.ops-ytm-gtitle i {
  color: #e05320;
  font-size: 9px
}

.ops-ytm-gval {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 800;
  color: #fff
}

.ops-ytm-gval i {
  color: #3ddc84;
  font-size: 10px
}

.ops-ytm-plot {
  position: relative;
  height: 84px
}

.ops-ytm-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible
}

.ops-ytm-grid {
  stroke: rgba(255, 255, 255, .06);
  stroke-width: 1;
  vector-effect: non-scaling-stroke
}

.ops-ytm-area {
  fill: url(#opsYtmFill);
  opacity: 0;
  animation: opsYtmArea 6.5s ease-in-out infinite
}

.ops-ytm-line {
  fill: none;
  stroke: url(#opsYtmStroke);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 4px 7px rgba(255, 0, 51, .4));
  animation: opsYtmDraw 6.5s ease-in-out infinite
}

@keyframes opsYtmDraw {
  0% {
    stroke-dashoffset: 100
  }

  40%,
  100% {
    stroke-dashoffset: 0
  }
}

@keyframes opsYtmArea {

  0%,
  8% {
    opacity: 0
  }

  44%,
  100% {
    opacity: 1
  }
}

.ops-ytm-scan {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(255, 0, 51, 0), rgba(255, 0, 51, .75), rgba(255, 0, 51, 0));
  opacity: 0;
  animation: opsYtmScan 6.5s ease-in-out infinite
}

@keyframes opsYtmScan {
  0% {
    left: 0;
    opacity: 0
  }

  8% {
    opacity: .85
  }

  38% {
    left: 100%;
    opacity: .85
  }

  46%,
  100% {
    left: 100%;
    opacity: 0
  }
}

.ops-ytm-tip {
  position: absolute;
  left: 100%;
  top: 18%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff0033;
  opacity: 0;
  box-shadow: 0 0 9px rgba(255, 0, 51, .85);
  animation: opsYtmTip 6.5s ease-in-out infinite
}

.ops-ytm-tip::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 0, 51, .55);
  animation: opsYtmRing 1.9s ease-out infinite
}

@keyframes opsYtmTip {

  0%,
  36% {
    opacity: 0;
    transform: scale(.3)
  }

  44% {
    opacity: 1;
    transform: scale(1)
  }

  100% {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes opsYtmRing {
  0% {
    transform: scale(.5);
    opacity: .85
  }

  100% {
    transform: scale(2.6);
    opacity: 0
  }
}

.ops-ytm-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05)
}

.ops-ytm-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto
}

.ops-ytm-stat-r {
  text-align: right
}

.ops-ytm-slab {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #8b93a2
}

.ops-ytm-snum {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 14px;
  font-weight: 800;
  color: #fff
}

.ops-ytm-stat-r .ops-ytm-snum {
  justify-content: flex-end
}

.ops-ytm-snum small {
  font-size: 9px;
  font-weight: 700;
  color: #8b93a2
}

.ops-ytm-up {
  color: #16b877
}

.ops-ytm-up i {
  font-size: 10px
}

.ops-ytm-spark {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 30px
}

.ops-ytm-spark span {
  width: 5px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, #ff0033, #f2854a);
  transform-origin: bottom;
  transform: scaleY(.35);
  animation: opsYtmSpark 2.8s ease-in-out infinite
}

@keyframes opsYtmSpark {

  0%,
  100% {
    transform: scaleY(.35)
  }

  50% {
    transform: scaleY(1)
  }
}

.ops-ytm-spark span:nth-child(1) {
  height: 12px;
  animation-delay: 0s
}

.ops-ytm-spark span:nth-child(2) {
  height: 18px;
  animation-delay: .16s
}

.ops-ytm-spark span:nth-child(3) {
  height: 14px;
  animation-delay: .32s
}

.ops-ytm-spark span:nth-child(4) {
  height: 22px;
  animation-delay: .48s
}

.ops-ytm-spark span:nth-child(5) {
  height: 17px;
  animation-delay: .64s
}

.ops-ytm-spark span:nth-child(6) {
  height: 26px;
  animation-delay: .8s
}

.ops-ytm-spark span:nth-child(7) {
  height: 23px;
  animation-delay: .96s
}

.ops-ytm-chip-1 {
  top: 24px;
  left: -8px
}

.ops-ytm-chip-1 i {
  color: #ff0033
}

.ops-ytm-chip-2 {
  top: 150px;
  right: -12px
}

.ops-ytm-chip-2 i {
  color: #e05320
}

.ops-ytm-chip-3 {
  bottom: 54px;
  left: -6px
}

.ops-ytm-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion: reduce) {
  .ops-ytm * {
    animation: none !important
  }

  .ops-ytm-area,
  .ops-ytm-tip {
    opacity: 1 !important
  }

  .ops-ytm-line {
    stroke-dashoffset: 0 !important
  }
}

/* ---- mobile-app-marketing-and-advertising (aso) ---- */
.ops-aso {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- window bar ---- */
.ops-aso-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-aso-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: #c7ccd6;
  letter-spacing: .2px;
}

.ops-aso-file i {
  color: #e05320;
  font-size: 12px;
}

.ops-aso-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #7fe0a8;
  background: rgba(61, 220, 132, .10);
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ops-aso-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, .55);
  animation: opsAsoPulse 1.8s ease-in-out infinite;
}

@keyframes opsAsoPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55);
    opacity: 1
  }

  50% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0);
    opacity: .6
  }
}

/* ---- stage ---- */
.ops-aso-stage {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(224, 83, 32, .12), transparent 60%),
    radial-gradient(120% 80% at 0% 100%, rgba(79, 140, 255, .09), transparent 60%);
}

/* ---- app listing ---- */
.ops-aso-app {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 13px;
  padding: 8px 10px;
}

.ops-aso-icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  background: linear-gradient(140deg, #e05320, #f2854a);
  box-shadow: 0 6px 14px rgba(224, 83, 32, .4);
  overflow: hidden;
}

.ops-aso-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: opsAsoShine 3.8s ease-in-out infinite;
}

@keyframes opsAsoShine {

  0%,
  72% {
    left: -60%
  }

  90%,
  100% {
    left: 135%
  }
}

.ops-aso-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ops-aso-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.ops-aso-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 10.5px;
  min-width: 0;
}

.ops-aso-stars {
  color: #f2a63f;
  font-size: 9.5px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.ops-aso-rate {
  color: #e7eaf0;
  font-weight: 700;
  flex-shrink: 0;
}

.ops-aso-cat {
  color: #8b93a3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-aso-cta {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .6px;
  color: #4f8cff;
  background: rgba(79, 140, 255, .14);
  border: 1px solid rgba(79, 140, 255, .35);
  padding: 4px 13px;
  border-radius: 20px;
  animation: opsAsoGet 2.6s ease-in-out infinite;
}

@keyframes opsAsoGet {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 140, 255, .35)
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 0 11px 0 rgba(79, 140, 255, .18)
  }
}

/* ---- funnel ---- */
.ops-aso-funnel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.ops-aso-step {
  position: relative;
  height: 27px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  color: #fff;
  opacity: 1;
  background: rgba(255, 255, 255, .05);
  animation: opsAsoRise .55s cubic-bezier(.22, 1, .36, 1) both;
}

.ops-aso-step-1 {
  width: 100%;
  animation-delay: .05s
}

.ops-aso-step-2 {
  width: 74%;
  animation-delay: .22s
}

.ops-aso-step-3 {
  width: 50%;
  animation-delay: .39s
}

@keyframes opsAsoRise {
  from {
    opacity: 0;
    transform: translateY(9px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.ops-aso-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 8px;
  transform-origin: left center;
  transform: scaleX(1);
  animation: opsAsoFill .85s cubic-bezier(.22, 1, .36, 1) both;
}

.ops-aso-step-1 .ops-aso-fill {
  background: linear-gradient(90deg, #3a6fd8, #4f8cff);
  animation-delay: .15s
}

.ops-aso-step-2 .ops-aso-fill {
  background: linear-gradient(90deg, #e05320, #f2854a);
  animation-delay: .32s
}

.ops-aso-step-3 .ops-aso-fill {
  background: linear-gradient(90deg, #12a06a, #3ddc84);
  animation-delay: .49s
}

@keyframes opsAsoFill {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

.ops-aso-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .30) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: opsAsoShimmer 3s ease-in-out infinite;
}

.ops-aso-step-1::after {
  animation-delay: 1.05s
}

.ops-aso-step-2::after {
  animation-delay: 1.3s
}

.ops-aso-step-3::after {
  animation-delay: 1.55s
}

@keyframes opsAsoShimmer {

  0%,
  55% {
    transform: translateX(-100%)
  }

  80%,
  100% {
    transform: translateX(100%)
  }
}

.ops-aso-lbl {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .96);
  white-space: nowrap;
}

.ops-aso-lbl i {
  font-size: 9.5px;
  opacity: .92
}

.ops-aso-val {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ops-aso-conv {
  font-size: 9px;
  font-weight: 700;
  color: #9aa2b1;
  letter-spacing: .3px;
  line-height: 1;
  padding: 1px 0;
  opacity: 1;
  animation: opsAsoConv .5s ease-out both;
}

.ops-aso-conv::before {
  content: "\25BE";
  margin-right: 4px;
  color: #6a7182;
}

.ops-aso-conv-1 {
  animation-delay: .6s
}

.ops-aso-conv-2 {
  animation-delay: .78s
}

@keyframes opsAsoConv {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.ops-aso-flow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ops-aso-drop {
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, .85);
  transform: translate(-50%, 0);
  opacity: 0;
  animation: opsAsoDrop 2.4s ease-in infinite;
}

.ops-aso-drop-1 {
  top: 4px;
  animation-delay: 0s
}

.ops-aso-drop-2 {
  top: 48px;
  animation-delay: .8s
}

.ops-aso-drop-3 {
  top: 92px;
  animation-delay: 1.6s
}

@keyframes opsAsoDrop {
  0% {
    opacity: 0;
    transform: translate(-50%, -8px)
  }

  22% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 44px)
  }
}

/* ---- footer ---- */
.ops-aso-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 10px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.ops-aso-count {
  flex: 1;
  min-width: 0;
}

.ops-aso-count-lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #8b93a3;
}

.ops-aso-count-num {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.ops-aso-up {
  color: #3ddc84;
  font-size: 11px;
  animation: opsAsoUp 1.6s ease-in-out infinite;
}

@keyframes opsAsoUp {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }
}

.ops-aso-num-wrap {
  display: inline-flex;
  align-items: flex-end;
}

.ops-aso-count-static {
  font-size: 16px;
  line-height: 18px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}

.ops-aso-ones-win {
  display: inline-block;
  width: 11px;
  height: 18px;
  overflow: hidden;
}

.ops-aso-ones-roll {
  display: flex;
  flex-direction: column;
  animation: opsAsoOnes 5s steps(10) infinite;
}

.ops-aso-ones-roll b {
  display: block;
  width: 11px;
  height: 18px;
  line-height: 18px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@keyframes opsAsoOnes {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-180px)
  }
}

.ops-aso-chart {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 46px;
}

.ops-aso-svg {
  display: block;
  width: 120px;
  height: 46px;
  overflow: visible;
}

.ops-aso-area {
  fill: rgba(61, 220, 132, .14);
  stroke: none;
  animation: opsAsoArea 2.2s ease-out both;
}

@keyframes opsAsoArea {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.ops-aso-line {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  animation: opsAsoDraw 2.1s ease-out both;
}

@keyframes opsAsoDraw {
  from {
    stroke-dashoffset: 200
  }

  to {
    stroke-dashoffset: 0
  }
}

.ops-aso-end {
  fill: #3ddc84;
  animation: opsAsoEnd 1.8s ease-in-out infinite;
}

@keyframes opsAsoEnd {

  0%,
  100% {
    r: 2.6;
    opacity: 1
  }

  50% {
    r: 3.7;
    opacity: .7
  }
}

.ops-aso-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 14px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(61, 220, 132, .28), transparent);
  transform: translateX(-16px);
  animation: opsAsoScan 3.6s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes opsAsoScan {
  0% {
    transform: translateX(-16px)
  }

  62%,
  100% {
    transform: translateX(118px)
  }
}

.ops-aso-badge {
  position: absolute;
  top: -3px;
  right: 0;
  font-size: 8.5px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(61, 220, 132, .12);
  padding: 1px 5px;
  border-radius: 6px;
  animation: opsAsoBadge .5s ease-out both;
  animation-delay: 1.5s;
}

@keyframes opsAsoBadge {
  from {
    opacity: 0;
    transform: translateY(-3px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ---- floating chips (position + icon colour only) ---- */
.ops-aso-chip-1 {
  top: 22px;
  left: -6px;
}

.ops-aso-chip-1 i {
  color: #3ddc84;
}

.ops-aso-chip-2 {
  top: 150px;
  right: -12px;
}

.ops-aso-chip-2 i {
  color: #e05320;
}

.ops-aso-chip-3 {
  bottom: 56px;
  left: -6px;
}

.ops-aso-chip-3 i {
  color: #4f8cff;
}

@media (prefers-reduced-motion:reduce) {
  .ops-aso * {
    animation: none !important
  }

  .ops-aso-drop {
    opacity: 1 !important
  }

  .ops-aso-line {
    stroke-dashoffset: 0 !important
  }
}

/* ---- crowdfunding-app-development (cf) — custom fundraising campaign card ---- */
.ops-cf-chip-1 {
  top: 26px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-cf-chip-2 {
  top: 150px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-cf-chip-3 {
  bottom: 62px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-cf-chip-1 i {
  color: #e0398f;
}

.ops-cf-chip-2 i {
  color: #e05320;
}

.ops-cf-chip-3 i {
  color: #4f8cff;
}

.ops-cf {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #14161d;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  overflow: hidden;
  text-align: left;
}

.ops-cf-bar {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: #c7ccd8;
}

.ops-cf-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.ops-cf-title i {
  color: #e05320;
}

.ops-cf-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #3ddc84;
}

.ops-cf-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsCfPulse 1.5s ease-out infinite;
}

@keyframes opsCfPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
  }

  100% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0);
  }
}

.ops-cf-hero {
  position: relative;
  height: 92px;
  background: linear-gradient(135deg, #16b877, #0f8f5e);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .9);
  font-size: 34px;
  overflow: hidden;
}

.ops-cf-cat {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, .28);
  padding: 3px 8px;
  border-radius: 5px;
}

.ops-cf-pop {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 800;
  color: #16b877;
  background: #fff;
  padding: 3px 9px;
  border-radius: 100px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
  opacity: 0;
  animation: opsCfPop 4s ease-in-out infinite;
}

@keyframes opsCfPop {

  0%,
  55% {
    opacity: 0;
    transform: translateY(6px) scale(.9);
  }

  62% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }

  80% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }

  90%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.ops-cf-body {
  padding: 13px 14px 15px;
}

.ops-cf-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.ops-cf-progress {
  height: 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.ops-cf-progress-fill {
  display: block;
  height: 100%;
  width: 78%;
  border-radius: 100px;
  background: linear-gradient(90deg, #16b877, #3ddc84);
  transform-origin: left;
  animation: opsCfFill 4s ease-in-out infinite;
}

@keyframes opsCfFill {
  0% {
    transform: scaleX(.1);
  }

  45%,
  100% {
    transform: scaleX(1);
  }
}

.ops-cf-stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 11px 0;
}

.ops-cf-stat b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.ops-cf-stat i {
  font-size: 9.5px;
  font-style: normal;
  color: #9aa0b0;
}

.ops-cf-pctwrap {
  text-align: right;
}

.ops-cf-pct {
  color: #3ddc84 !important;
}

.ops-cf-meta {
  display: flex;
  gap: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 10.5px;
  color: #9aa0b0;
}

.ops-cf-meta i {
  color: #e05320;
}

.ops-cf-meta b {
  color: #fff;
}

.ops-cf-btn {
  margin-top: 13px;
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 11px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #e05320, #f2854a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: default;
  box-shadow: 0 8px 20px rgba(224, 83, 32, .35);
  animation: opsCfBtn 2.2s ease-in-out infinite;
}

@keyframes opsCfBtn {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {

  .ops-cf *,
  .ops-cf {
    animation: none !important;
  }

  .ops-cf-progress-fill {
    transform: scaleX(1) !important;
  }
}

/* ---- digital-marketing (dm) — custom performance dashboard in hero aside ---- */
.ops-dm-aside {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.ops-dm-chip-1 {
  top: 22px;
  left: -8px;
  animation: opsAvFloat 4.2s ease-in-out infinite;
}

.ops-dm-chip-2 {
  top: 140px;
  right: -12px;
  animation: opsAvFloat 4.2s ease-in-out infinite .9s;
}

.ops-dm-chip-3 {
  bottom: 54px;
  left: -6px;
  animation: opsAvFloat 4.2s ease-in-out infinite 1.8s;
}

.ops-dm-chip-1 i {
  color: #16b877;
}

.ops-dm-chip-2 i {
  color: #e05320;
}

.ops-dm-chip-3 i {
  color: #4f8cff;
}

.ops-dm {
  position: relative;
  z-index: 3;
  width: min(360px, 86vw);
  margin: 0 auto;
  background: #14161d;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  overflow: hidden;
  text-align: left;
}

.ops-dm-bar {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: #c7ccd8;
}

.ops-dm-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.ops-dm-title i {
  color: #e05320;
}

.ops-dm-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #3ddc84;
}

.ops-dm-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsCfPulse 1.5s ease-out infinite;
}

.ops-dm-kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ops-dm-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ops-dm-kpi-cap {
  font-size: 10px;
  color: #9aa0b0;
}

.ops-dm-kpi-val {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
}

.ops-dm-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #3ddc84;
}

.ops-dm-spark {
  flex: 1;
  height: 40px;
}

.ops-dm-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ops-dm-spark polyline {
  fill: none;
  stroke: #16b877;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: opsDmDraw 3.6s ease-out infinite;
}

@keyframes opsDmDraw {
  0% {
    stroke-dashoffset: 240;
  }

  45%,
  100% {
    stroke-dashoffset: 0;
  }
}

.ops-dm-channels {
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ops-dm-ch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ops-dm-ch-lab {
  flex: 0 0 62px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #cfd4de;
}

.ops-dm-ch-lab i {
  font-size: 10px;
  color: #8b90a0;
}

.ops-dm-track {
  flex: 1;
  height: 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ops-dm-fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  transform-origin: left;
}

.ops-dm-fill.f1 {
  width: 84%;
  background: linear-gradient(90deg, #16b877, #3ddc84);
  animation: opsDmGrow 3.4s ease-in-out infinite;
}

.ops-dm-fill.f2 {
  width: 62%;
  background: linear-gradient(90deg, #e05320, #f2854a);
  animation: opsDmGrow 3.4s ease-in-out infinite .25s;
}

.ops-dm-fill.f3 {
  width: 54%;
  background: linear-gradient(90deg, #4f8cff, #7aa0f2);
  animation: opsDmGrow 3.4s ease-in-out infinite .5s;
}

@keyframes opsDmGrow {
  0% {
    transform: scaleX(.15);
  }

  50%,
  100% {
    transform: scaleX(1);
  }
}

.ops-dm-ch b {
  flex: 0 0 32px;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.ops-dm-foot {
  display: flex;
  gap: 10px;
  padding: 11px 14px 13px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 10.5px;
  color: #9aa0b0;
}

.ops-dm-foot span {
  flex: 1;
}

.ops-dm-foot b {
  color: #16b877;
  font-weight: 800;
}

.ops-dm-foot span:last-child b {
  color: #f2854a;
}

@media (prefers-reduced-motion: reduce) {

  .ops-dm *,
  .ops-dm {
    animation: none !important;
  }

  .ops-dm-fill {
    transform: scaleX(1) !important;
  }

  .ops-dm-spark polyline {
    stroke-dashoffset: 0 !important;
  }
}

/* ============================================================================
   PRODUCT DETAIL visuals (agent-designed) — animated dashboards in hero aside
   ============================================================================ */
/* product hero visual: strip the aside card so the visual stands alone */
.ops-prodvis-aside {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ---- hostel-management-software (host) ---- */
.ops-host {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #eef1f6;
  line-height: 1.2;
  --ho: #e05320;
  --ho2: #f2854a;
  --hg: #3ddc84;
  --hb: #4f8cff;
  --ha: #f2a63f;
}

.ops-host * {
  box-sizing: border-box;
}

/* window bar */
.ops-host-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-host-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ops-host-logo {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(135deg, var(--ho), var(--ho2));
  color: #fff;
  font-size: 11px;
  box-shadow: 0 3px 9px rgba(224, 83, 32, .45);
}

.ops-host-appname {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .2px;
  flex: none;
}

.ops-host-crumb {
  font-size: 10px;
  color: #9aa3b2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: 7px;
}

.ops-host-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #c7f9df;
  background: rgba(61, 220, 132, .12);
  border: 1px solid rgba(61, 220, 132, .28);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
}

.ops-host-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hg);
  position: relative;
  flex: none;
}

.ops-host-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hg);
  animation: opsHostPulse 2s ease-out infinite;
}

/* body */
.ops-host-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* KPI header */
.ops-host-kpi {
  display: flex;
  gap: 11px;
  align-items: stretch;
  opacity: 0;
  animation: opsHostRise .5s ease .05s forwards;
}

.ops-host-occ {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
}

.ops-host-gauge {
  position: relative;
  width: 60px;
  height: 60px;
}

.ops-host-ring {
  width: 60px;
  height: 60px;
  display: block;
}

.ops-host-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 7;
}

.ops-host-ring-fg {
  fill: none;
  stroke: url(#ops-host-grad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 24.6;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: opsHostRing 5s ease-in-out infinite;
}

.ops-host-gauge-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.5px;
  animation: opsHostBeat 3s ease-in-out infinite;
}

.ops-host-gauge-val i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: #9aa3b2;
  margin-left: 1px;
}

.ops-host-occ-label {
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

.ops-host-occ-sub {
  font-size: 9px;
  color: #9aa3b2;
}

.ops-host-fee {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 13px;
  padding: 9px 11px;
}

.ops-host-fee-label {
  font-size: 9.5px;
  color: #9aa3b2;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ops-host-fee-label i {
  color: var(--ho2);
}

.ops-host-fee-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.ops-host-fee-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.6px;
}

.ops-host-fee-val em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #c3ccda;
  margin-left: 1px;
}

.ops-host-trend {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--hg);
  background: rgba(61, 220, 132, .13);
  padding: 2px 7px;
  border-radius: 999px;
}

.ops-host-trend i {
  font-size: 9px;
  animation: opsHostBob 2.4s ease-in-out infinite;
}

.ops-host-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ops-host-fee-fill {
  display: block;
  height: 100%;
  width: 78%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ho), var(--ho2));
  transform-origin: left;
  animation: opsHostGrow 4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.ops-host-fee-foot {
  font-size: 8.5px;
  color: #8b93a3;
}

/* room grid */
.ops-host-rooms {
  opacity: 0;
  animation: opsHostRise .5s ease .13s forwards;
}

.ops-host-rooms-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.ops-host-rooms-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ops-host-rooms-t b {
  font-size: 11.5px;
  font-weight: 800;
}

.ops-host-rooms-t span {
  font-size: 9px;
  color: #9aa3b2;
}

.ops-host-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ops-host-lg {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  color: #9aa3b2;
  white-space: nowrap;
}

.ops-host-lg::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
}

.ops-host-lg-o::before {
  background: linear-gradient(135deg, var(--ho), var(--ho2));
}

.ops-host-lg-v::before {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
}

.ops-host-lg-c::before {
  background: rgba(242, 166, 63, .35);
  border: 1px solid var(--ha);
}

.ops-host-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  overflow: hidden;
  border-radius: 8px;
}

.ops-host-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  left: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  animation: opsHostSweep 3.8s ease-in-out infinite;
}

.ops-host-tile {
  position: relative;
  height: 21px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(6px) scale(.92);
  animation: opsHostPop .45s ease forwards;
  animation-delay: calc(var(--i, 0)*45ms);
}

.ops-host-tile--occ {
  background: linear-gradient(135deg, rgba(224, 83, 32, .92), rgba(242, 133, 74, .9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.ops-host-tile--vac {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #8b93a3;
}

.ops-host-tile--clean {
  background: rgba(242, 166, 63, .16);
  border: 1px solid rgba(242, 166, 63, .42);
  color: var(--ha);
  font-size: 9px;
}

/* mess + attendance */
.ops-host-foot {
  display: flex;
  gap: 9px;
  opacity: 0;
  animation: opsHostRise .5s ease .21s forwards;
}

.ops-host-mess,
.ops-host-att {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ops-host-foot-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: #c3ccda;
}

.ops-host-mess .ops-host-foot-h i {
  color: var(--ha);
}

.ops-host-att .ops-host-foot-h i {
  color: var(--hb);
}

.ops-host-menu {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  color: #eef1f6;
}

.ops-host-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  color: #9aa3b2;
}

.ops-host-tag i {
  color: var(--hg);
}

.ops-host-att-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ops-host-att-row b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.ops-host-att-row small {
  font-size: 9px;
  color: #9aa3b2;
}

.ops-host-att-fill {
  display: block;
  height: 100%;
  width: 73%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hb), #8fb8ff);
  transform-origin: left;
  animation: opsHostGrow 4s cubic-bezier(.4, 0, .2, 1) .25s infinite;
}

/* floating chips: position + icon color only */
.ops-host-chip-1 {
  position: absolute;
  top: 24px;
  left: -8px;
  z-index: 6;
}

.ops-host-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px;
  z-index: 6;
}

.ops-host-chip-3 {
  position: absolute;
  bottom: 60px;
  left: -6px;
  z-index: 6;
}

.ops-host-chip-1 i {
  color: #e05320;
}

.ops-host-chip-2 i {
  color: #4f8cff;
}

.ops-host-chip-3 i {
  color: #16b877;
}

/* keyframes */
@keyframes opsHostPulse {
  0% {
    transform: scale(1);
    opacity: .7
  }

  100% {
    transform: scale(2.7);
    opacity: 0
  }
}

@keyframes opsHostRing {
  0% {
    stroke-dashoffset: 176
  }

  32% {
    stroke-dashoffset: 24.6
  }

  100% {
    stroke-dashoffset: 24.6
  }
}

@keyframes opsHostGrow {
  0% {
    transform: scaleX(0)
  }

  30% {
    transform: scaleX(1)
  }

  100% {
    transform: scaleX(1)
  }
}

@keyframes opsHostPop {
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

@keyframes opsHostSweep {
  0% {
    transform: translateX(-140%)
  }

  16% {
    opacity: 1
  }

  84% {
    opacity: 1
  }

  100% {
    transform: translateX(340%)
  }
}

@keyframes opsHostBob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }
}

@keyframes opsHostBeat {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.05)
  }
}

@keyframes opsHostRise {
  0% {
    opacity: 0;
    transform: translateY(9px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@media (prefers-reduced-motion:reduce) {
  .ops-host * {
    animation: none !important
  }

  .ops-host-kpi,
  .ops-host-rooms,
  .ops-host-foot,
  .ops-host-tile {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-host-fee-fill,
  .ops-host-att-fill {
    transform: none !important
  }

  .ops-host-sweep {
    opacity: 0 !important
  }

  .ops-host-ring-fg {
    stroke-dashoffset: 24.6 !important;
    transform: rotate(-90deg) !important
  }
}

/* =============================================================================
   CONTACT page — branded social icon buttons (replaced plain text links)
   ============================================================================= */
.ops-social-sub {
  color: #565d6d;
  font-size: 14px;
  margin: 0 0 16px;
  /* max-width: 340px; */
}

.ops-social-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 12px;
}

.ops-social-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15, 17, 23, .12);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.ops-social-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(15, 17, 23, .2);
  filter: brightness(1.06);
}

.ops-social-icon i {
  line-height: 1;
}

.ops-social-fb {
  background: #1877f2;
}

.ops-social-tw {
  background: #0f1419;
}

.ops-social-ig {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.ops-social-in {
  background: #0a66c2;
}

.ops-social-pin {
  background: #e60023;
}

/* ---- billing-software (bill) ---- */
.ops-bill {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: inherit;
  color: #fff;
}

.ops-bill-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-bill-app {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #cfd3dc;
  letter-spacing: .2px;
}

.ops-bill-logo {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
  background: linear-gradient(135deg, #f2854a, #e05320);
  box-shadow: 0 3px 9px rgba(224, 83, 32, .45);
}

.ops-bill-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #9aa1ad;
  background: rgba(255, 255, 255, .04);
  padding: 3px 9px;
  border-radius: 20px;
}

.ops-bill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsBillDot 1.8s ease-out infinite;
}

.ops-bill-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-bill-tab {
  font-size: 10px;
  font-weight: 600;
  color: #777d89;
  padding: 3px 9px;
  border-radius: 7px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ops-bill-tab i {
  font-size: 8.5px;
}

.ops-bill-tabon {
  color: #f2854a;
  background: rgba(224, 83, 32, .14);
}

.ops-bill-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: #3ddc84;
  white-space: nowrap;
}

.ops-bill-live i {
  font-size: 9px;
}

.ops-bill-body {
  padding: 11px 12px;
  background: radial-gradient(130% 80% at 78% 0%, rgba(224, 83, 32, .12), transparent 55%), #14161d;
}

.ops-bill-kpi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ops-bill-kpi-main {
  min-width: 0;
}

.ops-bill-kpi-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #aeb4bf;
}

.ops-bill-kpi-label i {
  color: #f2854a;
  font-size: 9px;
}

.ops-bill-kpi-num {
  margin-top: 3px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .4px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  animation: opsBillNum 4.2s ease-in-out infinite;
}

.ops-bill-kpi-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  flex-wrap: wrap;
}

.ops-bill-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(22, 184, 119, .16);
  padding: 2px 7px;
  border-radius: 6px;
  animation: opsBillTrend 3s ease-in-out infinite;
}

.ops-bill-trend i {
  font-size: 9px;
}

.ops-bill-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: #9aa1ad;
}

.ops-bill-mini i {
  font-size: 8.5px;
  color: #f2a63f;
}

.ops-bill-chart {
  flex: none;
  width: 38%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.ops-bill-chart-cap {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #7c828e;
}

.ops-bill-bars {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.ops-bill-bars>span {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #f2854a, #e05320);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: opsBillBars 4.6s ease-in-out infinite;
}

.ops-bill-bars>span:nth-child(1) {
  animation-delay: 0s;
}

.ops-bill-bars>span:nth-child(2) {
  animation-delay: .13s;
}

.ops-bill-bars>span:nth-child(3) {
  animation-delay: .26s;
}

.ops-bill-bars>span:nth-child(4) {
  animation-delay: .39s;
}

.ops-bill-bars>span:nth-child(5) {
  animation-delay: .52s;
}

.ops-bill-bars>span:nth-child(6) {
  animation-delay: .65s;
}

.ops-bill-bhot {
  background: linear-gradient(180deg, #8affc4, #16b877) !important;
  box-shadow: 0 0 8px 1px rgba(61, 220, 132, .55);
  animation-delay: .78s !important;
}

.ops-bill-cols {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 9px;
  margin-top: 11px;
}

.ops-bill-inv {
  border-radius: 12px;
  padding: 9px 10px 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.ops-bill-inv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ops-bill-inv-id {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #cfd3dc;
}

.ops-bill-inv-id i {
  color: #4f8cff;
  font-size: 9.5px;
}

.ops-bill-inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #3ddc84;
  background: rgba(22, 184, 119, .16);
  padding: 2px 6px;
  border-radius: 20px;
  opacity: 1;
  animation: opsBillStampIn .55s .5s both, opsBillStampGlow 2.8s 1.2s ease-in-out infinite;
}

.ops-bill-inv-badge i {
  font-size: 8.5px;
}

.ops-bill-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  opacity: 1;
  animation: opsBillLine .5s both;
}

.ops-bill-l1 {
  animation-delay: .35s;
}

.ops-bill-l2 {
  animation-delay: .47s;
}

.ops-bill-l3 {
  animation-delay: .59s;
}

.ops-bill-ln {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d6dae2;
  font-weight: 600;
}

.ops-bill-lq {
  font-size: 9px;
  font-weight: 600;
  color: #8b929e;
  flex: none;
}

.ops-bill-la {
  font-size: 10px;
  font-weight: 700;
  color: #eef1f6;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.ops-bill-gst {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 1px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, .12);
  font-size: 8.5px;
  font-weight: 600;
  color: #9aa1ad;
}

.ops-bill-gst .ops-bill-gl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ops-bill-gst .ops-bill-gl i {
  color: #f2a63f;
  font-size: 8px;
}

.ops-bill-ga {
  color: #e6e9ef;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ops-bill-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}

.ops-bill-total>span:first-child {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #aeb4bf;
}

.ops-bill-tamt {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #f2854a, #e05320);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: opsBillNum 4.2s ease-in-out infinite .6s;
}

.ops-bill-stock {
  border-radius: 12px;
  padding: 9px 9px 8px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
  border: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ops-bill-stock-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #f2a63f;
}

.ops-bill-stock-head i {
  font-size: 9px;
  animation: opsBillWarn 1.9s ease-in-out infinite;
}

.ops-bill-srow {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ops-bill-sic {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 8.5px;
  flex: none;
  color: #fff;
}

.ops-bill-crit .ops-bill-sic {
  background: linear-gradient(135deg, #f2854a, #e05320);
}

.ops-bill-low .ops-bill-sic {
  background: linear-gradient(135deg, #f2c04f, #f2a63f);
}

.ops-bill-swrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ops-bill-sname {
  font-size: 9.5px;
  font-weight: 600;
  color: #d1d5dd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-bill-sbar {
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.ops-bill-sbar>span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  animation: opsBillSFill 1.8s ease-out .4s forwards;
}

.ops-bill-crit .ops-bill-sbar>span {
  background: linear-gradient(90deg, #f2854a, #e05320);
}

.ops-bill-low .ops-bill-sbar>span {
  background: linear-gradient(90deg, #f2c04f, #f2a63f);
}

.ops-bill-sq {
  font-size: 11px;
  font-weight: 800;
  flex: none;
  font-variant-numeric: tabular-nums;
  min-width: 16px;
  text-align: right;
}

.ops-bill-crit .ops-bill-sq {
  color: #f2854a;
}

.ops-bill-low .ops-bill-sq {
  color: #f2c04f;
}

.ops-bill-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: #0f1117;
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-size: 9.5px;
  font-weight: 600;
  color: #9aa1ad;
}

.ops-bill-gstin {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  letter-spacing: .2px;
}

.ops-bill-gstin i {
  color: #4f8cff;
  font-size: 9px;
}

.ops-bill-wire {
  position: relative;
  flex: 1;
  height: 12px;
}

.ops-bill-wire::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  border-radius: 2px;
}

.ops-bill-wdot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #8affc4, #16b877);
  box-shadow: 0 0 8px 2px rgba(61, 220, 132, .6);
  animation: opsBillWire 2.8s ease-in-out infinite;
}

.ops-bill-einv {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #3ddc84;
}

.ops-bill-einv i {
  font-size: 9.5px;
}

.ops-bill-chip-1 {
  top: 24px;
  left: -8px;
}

.ops-bill-chip-2 {
  top: 150px;
  right: -12px;
}

.ops-bill-chip-3 {
  bottom: 60px;
  left: -6px;
}

.ops-bill-chip-1 i {
  color: #e05320;
}

.ops-bill-chip-2 i {
  color: #16b877;
}

.ops-bill-chip-3 i {
  color: #f2a63f;
}

@keyframes opsBillDot {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0);
  }
}

@keyframes opsBillBars {
  0% {
    transform: scaleY(0);
  }

  14% {
    transform: scaleY(1);
  }

  86% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0);
  }
}

@keyframes opsBillNum {

  0%,
  82%,
  100% {
    text-shadow: none;
  }

  90% {
    text-shadow: 0 0 12px rgba(255, 255, 255, .5);
  }
}

@keyframes opsBillTrend {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes opsBillLine {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes opsBillStampIn {
  from {
    opacity: 0;
    transform: scale(.7);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes opsBillStampGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0);
  }

  50% {
    box-shadow: 0 0 10px 1px rgba(61, 220, 132, .45);
  }
}

@keyframes opsBillSFill {
  from {
    width: 0;
  }

  to {
    width: var(--w);
  }
}

@keyframes opsBillWarn {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .45;
    transform: scale(1.12);
  }
}

@keyframes opsBillWire {
  0% {
    left: 2%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    left: 98%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-bill * {
    animation: none !important;
  }

  .ops-bill-bars>span {
    transform: none !important;
  }

  .ops-bill-line,
  .ops-bill-inv-badge {
    opacity: 1 !important;
    transform: none !important;
  }

  .ops-bill-sbar>span {
    width: var(--w) !important;
  }

  .ops-bill-wdot {
    opacity: 1 !important;
  }
}

/* ---- grocery-app-development (groc) ---- */
.ops-groc {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  color: #fff;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

/* window bar */
.ops-groc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ops-groc-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ops-groc-logo {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e05320, #f2854a);
  color: #fff;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(224, 83, 32, .42);
}

.ops-groc-appname {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
}

.ops-groc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #3ddc84;
  background: rgba(61, 220, 132, .12);
  padding: 3px 9px;
  border-radius: 20px;
}

.ops-groc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, .5);
  animation: opsGrocPulse 1.9s ease-out infinite;
}

@keyframes opsGrocPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0);
  }
}

/* body */
.ops-groc-body {
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* KPI */
.ops-groc-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ops-groc-kpi-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ops-groc-kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
}

.ops-groc-kpi-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ops-groc-kpi-num {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1;
  color: #fff;
  animation: opsGrocRise .7s .1s ease both;
}

@keyframes opsGrocRise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ops-groc-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: #3ddc84;
  background: rgba(61, 220, 132, .13);
  padding: 2px 6px;
  border-radius: 6px;
}

.ops-groc-kpi-trend i {
  font-size: 9px;
}

.ops-groc-spark {
  width: 96px;
  height: 32px;
  flex: none;
}

.ops-groc-spark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.ops-groc-spark-area {
  fill: rgba(242, 133, 74, .14);
  stroke: none;
}

.ops-groc-spark-base {
  fill: none;
  stroke: rgba(255, 255, 255, .13);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ops-groc-spark-line {
  fill: none;
  stroke: #f2854a;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: opsGrocDraw 4.6s ease-in-out infinite;
}

@keyframes opsGrocDraw {
  0% {
    stroke-dashoffset: 150;
  }

  55% {
    stroke-dashoffset: 0;
  }

  86% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 150;
  }
}

/* categories */
.ops-groc-cats {
  display: flex;
  gap: 6px;
}

.ops-groc-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .72);
  animation: opsGrocCat 4.5s ease-in-out infinite;
}

.ops-groc-cat i {
  font-size: 10px;
}

.ops-groc-cat-a i {
  color: #f2854a;
}

.ops-groc-cat-b i {
  color: #3ddc84;
}

.ops-groc-cat-c i {
  color: #4f8cff;
}

.ops-groc-cat-a {
  animation-delay: 0s;
}

.ops-groc-cat-b {
  animation-delay: 1.5s;
}

.ops-groc-cat-c {
  animation-delay: 3s;
}

@keyframes opsGrocCat {

  0%,
  32%,
  100% {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .72);
  }

  8%,
  24% {
    background: rgba(224, 83, 32, .18);
    border-color: rgba(224, 83, 32, .55);
    color: #fff;
  }
}

/* product list */
.ops-groc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ops-groc-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .05);
  opacity: 0;
  transform: translateX(-10px);
  animation: opsGrocItem .55s ease forwards;
}

.ops-groc-item-1 {
  animation-delay: .25s;
}

.ops-groc-item-2 {
  animation-delay: .42s;
}

@keyframes opsGrocItem {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ops-groc-thumb {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex: none;
}

.ops-groc-item-1 .ops-groc-thumb {
  background: rgba(242, 166, 63, .16);
  color: #f2a63f;
}

.ops-groc-item-2 .ops-groc-thumb {
  background: rgba(79, 140, 255, .16);
  color: #4f8cff;
}

.ops-groc-pname {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-groc-pname em {
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
  margin-left: 4px;
}

.ops-groc-price {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex: none;
}

.ops-groc-add {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(135deg, #e05320, #f2854a);
  color: #fff;
  font-size: 10px;
  box-shadow: 0 4px 10px rgba(224, 83, 32, .35);
}

.ops-groc-item-1 .ops-groc-add {
  animation: opsGrocTap 3.2s ease-in-out infinite;
}

@keyframes opsGrocTap {

  0%,
  100% {
    transform: scale(1);
  }

  7% {
    transform: scale(.8);
  }

  15% {
    transform: scale(1.08);
  }

  24% {
    transform: scale(1);
  }
}

/* cart total */
.ops-groc-cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 11px;
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(224, 83, 32, .17), rgba(242, 133, 74, .06));
  border: 1px solid rgba(224, 83, 32, .3);
}

.ops-groc-cart-left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
}

.ops-groc-cart-ico {
  position: relative;
  color: #f2854a;
  font-size: 13px;
}

.ops-groc-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 8px;
  background: #e05320;
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 5px rgba(224, 83, 32, .5);
  animation: opsGrocBadge 3.2s ease-in-out infinite;
}

@keyframes opsGrocBadge {

  0%,
  10%,
  100% {
    transform: scale(1);
  }

  18% {
    transform: scale(1.3);
  }

  30% {
    transform: scale(1);
  }
}

.ops-groc-cart-total {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
}

/* delivery tracking */
.ops-groc-track {
  padding-top: 1px;
}

.ops-groc-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.ops-groc-track-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.ops-groc-track-title i {
  color: #4f8cff;
}

.ops-groc-eta {
  font-size: 10.5px;
  font-weight: 800;
  color: #f2854a;
  animation: opsGrocEta 2.4s ease-in-out infinite;
}

@keyframes opsGrocEta {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

.ops-groc-rail {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .09);
  margin: 0 9px 9px;
}

.ops-groc-rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #e05320, #f2854a);
  width: 14%;
  z-index: 0;
  animation: opsGrocFill 5s ease-in-out infinite;
}

@keyframes opsGrocFill {
  0% {
    width: 14%;
  }

  45% {
    width: 53%;
  }

  90% {
    width: 92%;
  }

  100% {
    width: 92%;
  }
}

.ops-groc-stop {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14161d;
  border: 2px solid rgba(255, 255, 255, .25);
  z-index: 1;
}

.ops-groc-stop-1 {
  left: 14%;
  animation: opsGrocStop1 5s ease-in-out infinite;
}

.ops-groc-stop-2 {
  left: 53%;
  animation: opsGrocStop2 5s ease-in-out infinite;
}

.ops-groc-stop-3 {
  left: 92%;
  animation: opsGrocStop3 5s ease-in-out infinite;
}

@keyframes opsGrocStop1 {

  0%,
  10% {
    border-color: rgba(255, 255, 255, .25);
    background: #14161d;
  }

  16%,
  100% {
    border-color: #f2854a;
    background: #f2854a;
  }
}

@keyframes opsGrocStop2 {

  0%,
  42% {
    border-color: rgba(255, 255, 255, .25);
    background: #14161d;
  }

  48%,
  100% {
    border-color: #f2854a;
    background: #f2854a;
  }
}

@keyframes opsGrocStop3 {

  0%,
  86% {
    border-color: rgba(255, 255, 255, .25);
    background: #14161d;
  }

  92%,
  100% {
    border-color: #f2854a;
    background: #f2854a;
  }
}

.ops-groc-courier {
  position: absolute;
  top: 50%;
  left: 14%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #14161d;
  border: 2px solid #f2854a;
  color: #f2854a;
  font-size: 9px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
  z-index: 2;
  animation: opsGrocRide 5s ease-in-out infinite;
}

@keyframes opsGrocRide {
  0% {
    left: 14%;
  }

  45% {
    left: 53%;
  }

  90% {
    left: 92%;
  }

  100% {
    left: 92%;
  }
}

.ops-groc-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
}

.ops-groc-step-1 {
  color: rgba(255, 255, 255, .5);
}

.ops-groc-step-2 {
  color: #f2854a;
  font-weight: 700;
}

.ops-groc-step-3 {
  color: rgba(255, 255, 255, .4);
}

/* chips: position + icon color only */
.ops-groc-chip-1 {
  position: absolute;
  top: 24px;
  left: -8px;
}

.ops-groc-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px;
}

.ops-groc-chip-3 {
  position: absolute;
  bottom: 60px;
  left: -6px;
}

.ops-groc-chip-1 i {
  color: #e05320;
}

.ops-groc-chip-2 i {
  color: #4f8cff;
}

.ops-groc-chip-3 i {
  color: #7c5cff;
}

@media (prefers-reduced-motion:reduce) {
  .ops-groc * {
    animation: none !important;
  }

  .ops-groc-item {
    opacity: 1 !important;
    transform: none !important;
  }

  .ops-groc-kpi-num {
    opacity: 1 !important;
    transform: none !important;
  }

  .ops-groc-add {
    transform: none !important;
  }

  .ops-groc-cart-badge {
    transform: none !important;
  }

  .ops-groc-spark-line {
    stroke-dashoffset: 0 !important;
  }

  .ops-groc-cat-a {
    background: rgba(224, 83, 32, .18) !important;
    border-color: rgba(224, 83, 32, .55) !important;
    color: #fff !important;
  }

  .ops-groc-rail-fill {
    width: 53% !important;
  }

  .ops-groc-courier {
    left: 53% !important;
    transform: translate(-50%, -50%) !important;
  }

  .ops-groc-stop-1,
  .ops-groc-stop-2 {
    border-color: #f2854a !important;
    background: #f2854a !important;
  }
}

/* ---- hospital-management-system (hosp) ---- */
.ops-hosp {
  width: min(360px, 86vw);
  margin: 0 auto;
  position: relative;
  z-index: 3;
  border-radius: 18px;
  overflow: hidden;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #fff;
  text-align: left
}

.ops-hosp * {
  box-sizing: border-box
}

@property --opsHospPat {
  syntax: '<integer>';
  inherits: true;
  initial-value: 248
}

@property --opsHospApp {
  syntax: '<integer>';
  inherits: true;
  initial-value: 64
}

@property --opsHospBed {
  syntax: '<integer>';
  inherits: true;
  initial-value: 83
}

/* window bar */
.ops-hosp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hosp-file {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .2px
}

.ops-hosp-file i {
  color: #e05320;
  font-size: 12px
}

.ops-hosp-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #3ddc84;
  background: rgba(22, 184, 119, .12);
  border: 1px solid rgba(22, 184, 119, .22);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-hosp-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsHospPulse 1.6s ease-in-out infinite
}

@keyframes opsHospPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0)
  }
}

/* KPI strip */
.ops-hosp-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hosp-kpi {
  padding: 10px 11px 11px;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .05)
}

.ops-hosp-kpi:last-child {
  border-right: 0
}

.ops-hosp-klabel {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap
}

.ops-hosp-klabel i {
  font-size: 8.5px;
  color: #4f8cff
}

.ops-hosp-kpi:nth-child(2) .ops-hosp-klabel i {
  color: #e05320
}

.ops-hosp-kpi:nth-child(3) .ops-hosp-klabel i {
  color: #16b877
}

.ops-hosp-kval {
  margin-top: 5px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
  display: flex;
  align-items: baseline
}

.ops-hosp-pct {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, .6);
  margin-left: 1px
}

.ops-hosp-count::after {
  font-variant-numeric: tabular-nums
}

.ops-hosp-cPat {
  --opsHospPat: 248
}

.ops-hosp-cPat::after {
  content: counter(opsHospPat);
  counter-reset: opsHospPat var(--opsHospPat, 248);
  animation: opsHospCPat 2.2s cubic-bezier(.2, .75, .2, 1) forwards
}

@keyframes opsHospCPat {
  from {
    --opsHospPat: 0
  }

  to {
    --opsHospPat: 248
  }
}

.ops-hosp-cApp {
  --opsHospApp: 64
}

.ops-hosp-cApp::after {
  content: counter(opsHospApp);
  counter-reset: opsHospApp var(--opsHospApp, 64);
  animation: opsHospCApp 2.2s cubic-bezier(.2, .75, .2, 1) .12s forwards
}

@keyframes opsHospCApp {
  from {
    --opsHospApp: 0
  }

  to {
    --opsHospApp: 64
  }
}

.ops-hosp-cBed {
  --opsHospBed: 83
}

.ops-hosp-cBed::after {
  content: counter(opsHospBed);
  counter-reset: opsHospBed var(--opsHospBed, 83);
  animation: opsHospCBed 2.2s cubic-bezier(.2, .75, .2, 1) .24s forwards
}

@keyframes opsHospCBed {
  from {
    --opsHospBed: 0
  }

  to {
    --opsHospBed: 83
  }
}

.ops-hosp-ktrend {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

.ops-hosp-ktrend.is-up {
  color: #3ddc84
}

.ops-hosp-ktrend.is-up i {
  font-size: 9px
}

.ops-hosp-ktrend.is-wait {
  color: #f2a63f
}

.ops-hosp-wdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f2a63f;
  box-shadow: 0 0 5px rgba(242, 166, 63, .7);
  animation: opsHospBlink 1.4s ease-in-out infinite
}

@keyframes opsHospBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

.ops-hosp-kbar {
  margin-top: 8px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden
}

.ops-hosp-kbarfill {
  display: block;
  height: 100%;
  width: 83%;
  border-radius: 3px;
  background: linear-gradient(90deg, #16b877, #3ddc84);
  transform-origin: left;
  animation: opsHospBar 2.4s cubic-bezier(.3, .7, .2, 1) forwards
}

@keyframes opsHospBar {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

/* ECG vitals monitor */
.ops-hosp-vitals {
  padding: 10px 12px 11px;
  background: #14161d;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hosp-vcap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px
}

.ops-hosp-vtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .5)
}

.ops-hosp-vtitle i {
  color: #3ddc84;
  font-size: 9px
}

.ops-hosp-vtitle b {
  color: rgba(255, 255, 255, .72);
  font-weight: 800
}

.ops-hosp-hr {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, .65);
  font-variant-numeric: tabular-nums
}

.ops-hosp-hr b {
  color: #fff;
  font-size: 12px;
  font-weight: 800
}

.ops-hosp-hr i {
  color: #ff5a6a;
  font-size: 11px;
  animation: opsHospHeart 1.45s ease-in-out infinite
}

@keyframes opsHospHeart {

  0%,
  100% {
    transform: scale(1)
  }

  12% {
    transform: scale(1.35)
  }

  24% {
    transform: scale(1)
  }

  36% {
    transform: scale(1.18)
  }
}

.ops-hosp-ecg {
  position: relative;
  height: 44px;
  border-radius: 9px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(61, 220, 132, .06), transparent 70%), #0c0e13;
  border: 1px solid rgba(61, 220, 132, .12);
  background-image: repeating-linear-gradient(90deg, rgba(61, 220, 132, .05) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(61, 220, 132, .045) 0 1px, transparent 1px 14px)
}

.ops-hosp-ecg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block
}

.ops-hosp-ecgbase {
  stroke: rgba(61, 220, 132, .16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke
}

.ops-hosp-ecgline {
  fill: none;
  stroke: #3ddc84;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(61, 220, 132, .7));
  animation: opsHospEcg 3.6s linear infinite
}

@keyframes opsHospEcg {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-300px)
  }
}

.ops-hosp-ecg::before,
.ops-hosp-ecg::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  pointer-events: none;
  z-index: 2
}

.ops-hosp-ecg::before {
  left: 0;
  background: linear-gradient(90deg, #0c0e13, transparent)
}

.ops-hosp-ecg::after {
  right: 0;
  background: linear-gradient(270deg, #0c0e13, transparent)
}

.ops-hosp-ecgdot {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #a8ffce;
  box-shadow: 0 0 8px 2px rgba(61, 220, 132, .85);
  z-index: 3;
  animation: opsHospDot 3.6s ease-in-out infinite
}

@keyframes opsHospDot {

  0%,
  100% {
    transform: scale(.7);
    opacity: .55
  }

  50% {
    transform: scale(1.15);
    opacity: 1
  }
}

.ops-hosp-vstats {
  display: flex;
  gap: 6px;
  margin-top: 9px
}

.ops-hosp-vstat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 3px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap
}

.ops-hosp-vstat b {
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

.ops-hosp-vstat i {
  font-size: 8.5px
}

.ops-hosp-vstat:nth-child(1) i {
  color: #4f8cff
}

.ops-hosp-vstat:nth-child(2) i {
  color: #e0398f
}

.ops-hosp-vstat:nth-child(3) i {
  color: #f2a63f
}

.ops-hosp-vstat:nth-child(4) i {
  color: #7c5cff
}

/* appointments queue */
.ops-hosp-queue {
  padding: 10px 12px 11px;
  background: #12141b;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-hosp-qcap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 8px
}

.ops-hosp-qcap i {
  color: #4f8cff;
  font-size: 9px
}

.ops-hosp-qbadge {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 8.5px;
  font-weight: 700;
  color: #7fb0ff;
  background: rgba(79, 140, 255, .14);
  border: 1px solid rgba(79, 140, 255, .28);
  padding: 2px 7px;
  border-radius: 20px;
  animation: opsHospBlink 2.2s ease-in-out infinite
}

.ops-hosp-qrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 9px;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateX(-12px);
  animation: opsHospRow .55s cubic-bezier(.2, .7, .2, 1) forwards
}

.ops-hosp-qrow:last-child {
  margin-bottom: 0
}

.ops-hosp-qr1 {
  background: rgba(22, 184, 119, .09);
  border: 1px solid rgba(22, 184, 119, .22);
  position: relative;
  overflow: hidden;
  animation-delay: .15s
}

.ops-hosp-qr2 {
  animation-delay: .32s
}

.ops-hosp-qr3 {
  animation-delay: .49s
}

@keyframes opsHospRow {
  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.ops-hosp-qr1::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(61, 220, 132, .14), transparent);
  animation: opsHospSheen 3.6s ease-in-out 1s infinite
}

@keyframes opsHospSheen {
  0% {
    left: -40%
  }

  55%,
  100% {
    left: 120%
  }
}

.ops-hosp-qav {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px
}

.ops-hosp-av-blue {
  background: linear-gradient(135deg, #4f8cff, #3a6fe0)
}

.ops-hosp-av-purple {
  background: linear-gradient(135deg, #7c5cff, #5b40d6)
}

.ops-hosp-av-pink {
  background: linear-gradient(135deg, #e0398f, #c02574)
}

.ops-hosp-qwho {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15
}

.ops-hosp-qwho b {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-hosp-qwho span {
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-hosp-qtime {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums
}

.ops-hosp-qtag {
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 6px;
  border-radius: 20px;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1)
}

.ops-hosp-qtag.is-now {
  color: #0c0e13;
  background: linear-gradient(135deg, #16b877, #3ddc84);
  border-color: transparent;
  animation: opsHospNow 1.8s ease-in-out infinite
}

@keyframes opsHospNow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5)
  }

  60% {
    box-shadow: 0 0 0 5px rgba(61, 220, 132, 0)
  }
}

.ops-hosp-qtag.is-next {
  color: #f2b070;
  background: rgba(242, 133, 74, .14);
  border-color: rgba(242, 133, 74, .32)
}

/* bed grid */
.ops-hosp-beds {
  padding: 10px 12px 12px;
  background: #0f1117
}

.ops-hosp-bcap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 8px
}

.ops-hosp-bcap i {
  color: #16b877;
  font-size: 9px
}

.ops-hosp-blegend {
  margin-left: auto;
  display: flex;
  gap: 9px
}

.ops-hosp-lg {
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5)
}

.ops-hosp-ldot {
  width: 7px;
  height: 7px;
  border-radius: 2px
}

.ops-hosp-ldot.is-occ {
  background: #4f8cff;
  box-shadow: 0 0 5px rgba(79, 140, 255, .6)
}

.ops-hosp-ldot.is-free {
  background: #3ddc84;
  box-shadow: 0 0 5px rgba(61, 220, 132, .55)
}

.ops-hosp-bgrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px
}

.ops-hosp-bcell {
  position: relative;
  min-width: 0;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px
}

.ops-hosp-bcell.is-occ {
  background: rgba(79, 140, 255, .16);
  border: 1px solid rgba(79, 140, 255, .4);
  color: #bcd4ff
}

.ops-hosp-bcell.is-free {
  background: rgba(22, 184, 119, .14);
  border: 1px solid rgba(22, 184, 119, .4);
  color: #8ff0c2
}

.ops-hosp-admit {
  animation: opsHospAdmit 6.5s ease-in-out infinite
}

@keyframes opsHospAdmit {

  0%,
  48% {
    background: rgba(22, 184, 119, .14);
    border-color: rgba(22, 184, 119, .4);
    color: #8ff0c2
  }

  60%,
  96% {
    background: rgba(79, 140, 255, .16);
    border-color: rgba(79, 140, 255, .4);
    color: #bcd4ff
  }

  100% {
    background: rgba(22, 184, 119, .14);
    border-color: rgba(22, 184, 119, .4);
    color: #8ff0c2
  }
}

.ops-hosp-disch {
  animation: opsHospDisch 6.5s ease-in-out infinite
}

@keyframes opsHospDisch {

  0%,
  20% {
    background: rgba(79, 140, 255, .16);
    border-color: rgba(79, 140, 255, .4);
    color: #bcd4ff
  }

  34%,
  74% {
    background: rgba(22, 184, 119, .14);
    border-color: rgba(22, 184, 119, .4);
    color: #8ff0c2
  }

  88%,
  100% {
    background: rgba(79, 140, 255, .16);
    border-color: rgba(79, 140, 255, .4);
    color: #bcd4ff
  }
}

.ops-hosp-disch::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  border: 1px solid rgba(61, 220, 132, .7);
  opacity: 0;
  animation: opsHospDischRing 6.5s ease-in-out infinite
}

@keyframes opsHospDischRing {

  0%,
  26% {
    opacity: 0;
    transform: scale(.85)
  }

  34% {
    opacity: .9;
    transform: scale(1)
  }

  52%,
  100% {
    opacity: 0;
    transform: scale(1.15)
  }
}

/* floating chips */
.ops-hosp-chip-1 {
  top: 24px;
  left: -8px
}

.ops-hosp-chip-1 i {
  color: #4f8cff
}

.ops-hosp-chip-2 {
  top: 150px;
  right: -12px
}

.ops-hosp-chip-2 i {
  color: #e05320
}

.ops-hosp-chip-3 {
  bottom: 60px;
  left: -6px
}

.ops-hosp-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion: reduce) {
  .ops-hosp * {
    animation: none !important
  }

  .ops-hosp-ecgline {
    transform: none !important
  }

  .ops-hosp-qrow {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-hosp-kbarfill {
    transform: none !important
  }

  .ops-hosp-disch::after {
    opacity: 0 !important
  }
}

/* ---- hotel-management-software (htl) ---- */
.ops-htl {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #eef1f6;
  line-height: 1.2;
  --ho: #e05320;
  --ho2: #f2854a;
  --hg: #3ddc84;
  --hb: #4f8cff;
  --ha: #f2a63f;
  --hp: #7c5cff;
}

.ops-htl * {
  box-sizing: border-box;
}

/* window bar */
.ops-htl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-htl-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ops-htl-logo {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(135deg, var(--ho), var(--ho2));
  color: #fff;
  font-size: 11px;
  box-shadow: 0 3px 9px rgba(224, 83, 32, .45);
}

.ops-htl-appname {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .2px;
  flex: none;
}

.ops-htl-crumb {
  font-size: 10px;
  color: #9aa3b2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: 7px;
}

.ops-htl-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #c7f9df;
  background: rgba(61, 220, 132, .12);
  border: 1px solid rgba(61, 220, 132, .28);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
}

.ops-htl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hg);
  position: relative;
  flex: none;
}

.ops-htl-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--hg);
  animation: opsHtlPulse 2s ease-out infinite;
}

/* body */
.ops-htl-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* KPI header */
.ops-htl-kpi {
  display: flex;
  gap: 11px;
  align-items: stretch;
  opacity: 0;
  animation: opsHtlRise .5s ease .05s forwards;
}

.ops-htl-occ {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
}

.ops-htl-gauge {
  position: relative;
  width: 60px;
  height: 60px;
}

.ops-htl-ring {
  width: 60px;
  height: 60px;
  display: block;
}

.ops-htl-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 7;
}

.ops-htl-ring-fg {
  fill: none;
  stroke: url(#ops-htl-grad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 31.7;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: opsHtlRing 5s ease-in-out infinite;
}

.ops-htl-gauge-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.5px;
  animation: opsHtlBeat 3s ease-in-out infinite;
}

.ops-htl-gauge-val i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: #9aa3b2;
  margin-left: 1px;
}

.ops-htl-occ-label {
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

.ops-htl-occ-sub {
  font-size: 9px;
  color: #9aa3b2;
}

/* revenue block with 7-day spark chart */
.ops-htl-rev {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 13px;
  padding: 9px 11px;
}

.ops-htl-rev-label {
  font-size: 9.5px;
  color: #9aa3b2;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ops-htl-rev-label i {
  color: var(--ho2);
}

.ops-htl-rev-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.ops-htl-rev-val {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.6px;
}

.ops-htl-trend {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--hg);
  background: rgba(61, 220, 132, .13);
  padding: 2px 7px;
  border-radius: 999px;
}

.ops-htl-trend i {
  font-size: 9px;
  animation: opsHtlBob 2.4s ease-in-out infinite;
}

.ops-htl-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  padding-top: 2px;
}

.ops-htl-b {
  flex: 1;
  min-width: 0;
  height: var(--h, 50%);
  border-radius: 3px 3px 2px 2px;
  background: rgba(242, 133, 74, .30);
  transform-origin: bottom;
  transform: scaleY(0);
  animation: opsHtlBar 4.2s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: calc(var(--i, 0)*.11s);
}

.ops-htl-b--now {
  background: linear-gradient(180deg, var(--ho2), var(--ho));
  box-shadow: 0 0 9px rgba(224, 83, 32, .45);
}

.ops-htl-rev-foot {
  font-size: 8.5px;
  color: #8b93a3;
}

/* room status grid */
.ops-htl-rooms {
  opacity: 0;
  animation: opsHtlRise .5s ease .13s forwards;
}

.ops-htl-rooms-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.ops-htl-rooms-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ops-htl-rooms-t b {
  font-size: 11.5px;
  font-weight: 800;
}

.ops-htl-rooms-t span {
  font-size: 9px;
  color: #9aa3b2;
}

.ops-htl-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ops-htl-lg {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  color: #9aa3b2;
  white-space: nowrap;
}

.ops-htl-lg::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
}

.ops-htl-lg-b::before {
  background: linear-gradient(135deg, var(--ho), var(--ho2));
}

.ops-htl-lg-a::before {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
}

.ops-htl-lg-c::before {
  background: rgba(242, 166, 63, .35);
  border: 1px solid var(--ha);
}

.ops-htl-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  overflow: hidden;
  border-radius: 8px;
}

.ops-htl-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  left: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  animation: opsHtlSweep 3.8s ease-in-out infinite;
}

.ops-htl-tile {
  position: relative;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(6px) scale(.92);
  animation: opsHtlPop .45s ease forwards;
  animation-delay: calc(var(--i, 0)*45ms);
}

.ops-htl-tile--b {
  background: linear-gradient(135deg, rgba(224, 83, 32, .92), rgba(242, 133, 74, .9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.ops-htl-tile--a {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #8b93a3;
}

.ops-htl-tile--c {
  background: rgba(242, 166, 63, .16);
  border: 1px solid rgba(242, 166, 63, .42);
  color: var(--ha);
  font-size: 9px;
}

.ops-htl-tile--c i {
  animation: opsHtlSpin 3s ease-in-out infinite;
}

/* arrivals / check-in list */
.ops-htl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  animation: opsHtlRise .5s ease .21s forwards;
}

.ops-htl-list-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ops-htl-list-t {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  color: #c3ccda;
}

.ops-htl-list-t i {
  color: var(--ho2);
}

.ops-htl-list-c {
  font-size: 8.5px;
  color: #9aa3b2;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 2px 7px;
  border-radius: 999px;
  flex: none;
}

.ops-htl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 11px;
  padding: 6px 8px;
  opacity: 0;
  transform: translateX(-10px);
  animation: opsHtlRow .5s cubic-bezier(.34, 1.4, .5, 1) forwards;
  animation-delay: calc(.3s + var(--i, 0)*.12s);
}

.ops-htl-av {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px;
}

.ops-htl-av-1 {
  background: linear-gradient(135deg, var(--ho), var(--ha));
}

.ops-htl-av-2 {
  background: linear-gradient(135deg, var(--hb), var(--hp));
}

.ops-htl-av-3 {
  background: linear-gradient(135deg, #e0398f, var(--ho2));
}

.ops-htl-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ops-htl-who b {
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-htl-who small {
  font-size: 8.5px;
  color: #9aa3b2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-htl-nights {
  flex: none;
  font-size: 12px;
  font-weight: 800;
  color: #eef1f6;
}

.ops-htl-nights i {
  font-style: normal;
  font-size: 8px;
  font-weight: 600;
  color: #8b93a3;
  margin-left: 1px;
}

.ops-htl-pill {
  flex: none;
  font-size: 8px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.ops-htl-pill-in {
  color: #bff3d6;
  background: rgba(61, 220, 132, .14);
  border: 1px solid rgba(61, 220, 132, .3);
}

.ops-htl-pill-arr {
  color: #cfe0ff;
  background: rgba(79, 140, 255, .14);
  border: 1px solid rgba(79, 140, 255, .32);
}

.ops-htl-pill-arr::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hb);
  margin-right: 4px;
  vertical-align: middle;
  animation: opsHtlBlink 1.4s ease-in-out infinite;
}

.ops-htl-pill-due {
  color: #ffe3b0;
  background: rgba(242, 166, 63, .14);
  border: 1px solid rgba(242, 166, 63, .32);
}

/* floating chips: position + icon color only */
.ops-htl-chip-1 {
  position: absolute;
  top: 24px;
  left: -8px;
  z-index: 6;
}

.ops-htl-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px;
  z-index: 6;
}

.ops-htl-chip-3 {
  position: absolute;
  bottom: 60px;
  left: -6px;
  z-index: 6;
}

.ops-htl-chip-1 i {
  color: #e05320;
}

.ops-htl-chip-2 i {
  color: #4f8cff;
}

.ops-htl-chip-3 i {
  color: #16b877;
}

/* keyframes */
@keyframes opsHtlPulse {
  0% {
    transform: scale(1);
    opacity: .7
  }

  100% {
    transform: scale(2.7);
    opacity: 0
  }
}

@keyframes opsHtlRing {
  0% {
    stroke-dashoffset: 176
  }

  32% {
    stroke-dashoffset: 31.7
  }

  100% {
    stroke-dashoffset: 31.7
  }
}

@keyframes opsHtlBar {
  0% {
    transform: scaleY(0)
  }

  30% {
    transform: scaleY(1)
  }

  100% {
    transform: scaleY(1)
  }
}

@keyframes opsHtlPop {
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

@keyframes opsHtlSweep {
  0% {
    transform: translateX(-140%)
  }

  16% {
    opacity: 1
  }

  84% {
    opacity: 1
  }

  100% {
    transform: translateX(340%)
  }
}

@keyframes opsHtlBob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }
}

@keyframes opsHtlBeat {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.05)
  }
}

@keyframes opsHtlRise {
  0% {
    opacity: 0;
    transform: translateY(9px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsHtlRow {
  0% {
    opacity: 0;
    transform: translateX(-10px)
  }

  100% {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes opsHtlSpin {

  0%,
  100% {
    transform: rotate(-12deg)
  }

  50% {
    transform: rotate(12deg)
  }
}

@keyframes opsHtlBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

@media (prefers-reduced-motion:reduce) {
  .ops-htl * {
    animation: none !important
  }

  .ops-htl-kpi,
  .ops-htl-rooms,
  .ops-htl-list,
  .ops-htl-row,
  .ops-htl-tile,
  .ops-htl-b {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-htl-sweep {
    opacity: 0 !important
  }

  .ops-htl-ring-fg {
    stroke-dashoffset: 31.7 !important;
    transform: rotate(-90deg) !important
  }
}

/* ---- school-management-system (schl) ---- */
.ops-schl {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: inherit;
  color: #fff
}

.ops-schl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-schl-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px
}

.ops-schl-brand i {
  color: #e05320;
  font-size: 13px
}

.ops-schl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #3ddc84;
  background: rgba(61, 220, 132, .1);
  border: 1px solid rgba(61, 220, 132, .22);
  padding: 3px 9px;
  border-radius: 999px
}

.ops-schl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsSchlPulse 2s ease-in-out infinite
}

@keyframes opsSchlPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .55)
  }

  50% {
    box-shadow: 0 0 0 5px rgba(61, 220, 132, 0)
  }
}

.ops-schl-body {
  padding: 12px 12px 13px
}

.ops-schl-kpi {
  display: flex;
  gap: 10px;
  align-items: flex-end
}

.ops-schl-kpi-main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.ops-schl-kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .55);
  font-weight: 600
}

.ops-schl-kpi-label i {
  color: #4f8cff;
  font-size: 10px
}

.ops-schl-kpi-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #e05320, #f2854a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: opsSchlPop .7s cubic-bezier(.2, .9, .3, 1.3) both
}

.ops-schl-kpi-num em {
  font-size: 17px;
  font-style: normal;
  -webkit-text-fill-color: #f2854a;
  color: #f2854a
}

@keyframes opsSchlPop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(.9)
  }

  100% {
    opacity: 1;
    transform: none
  }
}

.ops-schl-kpi-sub {
  font-size: 9.5px;
  color: rgba(255, 255, 255, .4);
  font-weight: 500
}

.ops-schl-chart {
  flex: 1 1 auto;
  min-width: 0
}

.ops-schl-cols {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px
}

.ops-schl-col {
  position: relative;
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #4f8cff, #3a6fe0);
  transform-origin: bottom;
  transform: scaleY(0);
  animation: opsSchlGrow 1s cubic-bezier(.2, .85, .3, 1) forwards
}

.ops-schl-col b {
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  opacity: 0;
  animation: opsSchlFade .5s ease .9s forwards
}

.ops-schl-c1 {
  height: 96%;
  animation-delay: .1s
}

.ops-schl-c2 {
  height: 91%;
  animation-delay: .2s
}

.ops-schl-c3 {
  height: 98%;
  background: linear-gradient(180deg, #e05320, #f2854a);
  animation-delay: .3s
}

.ops-schl-c4 {
  height: 78%;
  animation-delay: .4s
}

.ops-schl-c5 {
  height: 88%;
  animation-delay: .5s
}

.ops-schl-c6 {
  height: 97%;
  animation-delay: .6s
}

@keyframes opsSchlGrow {
  to {
    transform: scaleY(1)
  }
}

@keyframes opsSchlFade {
  to {
    opacity: 1
  }
}

.ops-schl-axis {
  display: flex;
  gap: 5px;
  margin-top: 4px
}

.ops-schl-axis span {
  flex: 1;
  text-align: center;
  font-size: 8px;
  color: rgba(255, 255, 255, .35);
  font-weight: 600
}

.ops-schl-period {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 10px
}

.ops-schl-plabel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #f2a63f
}

.ops-schl-plabel i {
  font-size: 9px
}

.ops-schl-slots {
  display: flex;
  gap: 5px;
  flex: 1;
  min-width: 0
}

.ops-schl-slot {
  flex: 1;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .4);
  font-style: normal;
  border: 1px solid transparent
}

.ops-schl-slot.ops-schl-done {
  color: rgba(255, 255, 255, .65);
  background: rgba(79, 140, 255, .12)
}

.ops-schl-slot.ops-schl-live {
  color: #fff;
  background: linear-gradient(90deg, #e05320, #f2854a);
  border-color: rgba(242, 133, 74, .5);
  animation: opsSchlGlow 2.4s ease-in-out infinite
}

@keyframes opsSchlGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(224, 83, 32, .5)
  }

  50% {
    box-shadow: 0 0 10px 1px rgba(224, 83, 32, .45)
  }
}

.ops-schl-stats {
  display: flex;
  gap: 9px;
  margin-top: 9px
}

.ops-schl-fee {
  flex: 1.4;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px;
  background: rgba(22, 184, 119, .07);
  border: 1px solid rgba(22, 184, 119, .18);
  border-radius: 11px
}

.ops-schl-st-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(22, 184, 119, .18);
  color: #3ddc84;
  font-size: 12px
}

.ops-schl-st-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px
}

.ops-schl-st-lab {
  font-size: 9px;
  color: rgba(255, 255, 255, .5);
  font-weight: 600
}

.ops-schl-st-val {
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 5px
}

.ops-schl-up {
  font-size: 9px;
  font-weight: 700;
  color: #3ddc84;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 2px
}

.ops-schl-progress {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden
}

.ops-schl-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
  border-radius: 999px;
  background: linear-gradient(90deg, #16b877, #3ddc84);
  transform-origin: left;
  transform: scaleX(0);
  animation: opsSchlFill 1.4s cubic-bezier(.2, .85, .3, 1) .5s forwards
}

@keyframes opsSchlFill {
  to {
    transform: scaleX(1)
  }
}

.ops-schl-mini {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ops-schl-m {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .05);
  opacity: 0;
  transform: translateX(8px);
  animation: opsSchlIn .5s ease forwards
}

.ops-schl-m1 {
  animation-delay: .7s
}

.ops-schl-m2 {
  animation-delay: .85s
}

.ops-schl-m i {
  font-size: 11px
}

.ops-schl-m1 i {
  color: #7c5cff
}

.ops-schl-m2 i {
  color: #e0398f
}

.ops-schl-m b {
  font-size: 12px;
  font-weight: 800
}

.ops-schl-m span {
  font-size: 8.5px;
  color: rgba(255, 255, 255, .42);
  font-weight: 600;
  margin-left: auto
}

@keyframes opsSchlIn {
  to {
    opacity: 1;
    transform: none
  }
}

.ops-schl-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(224, 83, 32, .12), rgba(242, 133, 74, .04));
  border: 1px solid rgba(242, 133, 74, .16);
  overflow: hidden;
  position: relative
}

.ops-schl-notice i {
  color: #f2854a;
  font-size: 11px;
  animation: opsSchlRing 3s ease-in-out infinite
}

@keyframes opsSchlRing {

  0%,
  88%,
  100% {
    transform: rotate(0)
  }

  91% {
    transform: rotate(-12deg)
  }

  95% {
    transform: rotate(12deg)
  }
}

.ops-schl-notice span {
  flex: 1;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.ops-schl-notice em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #e05320, #f2854a);
  padding: 2px 6px;
  border-radius: 999px
}

.ops-schl-chip-1 {
  position: absolute;
  top: 24px;
  left: -8px
}

.ops-schl-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px
}

.ops-schl-chip-3 {
  position: absolute;
  bottom: 60px;
  left: -6px
}

.ops-schl-chip-1 i {
  color: #4f8cff
}

.ops-schl-chip-2 i {
  color: #f2a63f
}

.ops-schl-chip-3 i {
  color: #16b877
}

@media (prefers-reduced-motion:reduce) {
  .ops-schl * {
    animation: none !important
  }

  .ops-schl-kpi-num,
  .ops-schl-col b,
  .ops-schl-m {
    opacity: 1 !important
  }

  .ops-schl-col,
  .ops-schl-fill,
  .ops-schl-m {
    transform: none !important
  }
}

/* ---- jewellery-management-software (jewel) ---- */
.ops-jewel {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #eef1f6;
  line-height: 1.2;
  --jo: #e05320;
  --jo2: #f2854a;
  --jgold: #f2a63f;
  --jgold2: #f7cf6b;
  --jup: #3ddc84;
  --jdn: #ff7a7a;
  --jb: #4f8cff;
  --jmut: #9aa3b2;
}

.ops-jewel * {
  box-sizing: border-box;
}

.ops-jewel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-jewel-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ops-jewel-logo {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(135deg, var(--jo), var(--jgold));
  color: #fff;
  font-size: 11px;
  box-shadow: 0 3px 9px rgba(224, 83, 32, .45);
}

.ops-jewel-appname {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .2px;
  flex: none;
}

.ops-jewel-crumb {
  font-size: 10px;
  color: var(--jmut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: 7px;
}

.ops-jewel-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #f7d79a;
  background: rgba(242, 166, 63, .12);
  border: 1px solid rgba(242, 166, 63, .30);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
}

.ops-jewel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jgold2);
  position: relative;
  flex: none;
}

.ops-jewel-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--jgold2);
  animation: opsJewelPulse 2s ease-out infinite;
}

.ops-jewel-ticker {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #12141b, #191510);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  height: 26px;
  overflow: hidden;
}

.ops-jewel-tk-tag {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 100%;
  color: #12141b;
  background: linear-gradient(135deg, var(--jgold), var(--jgold2));
  font-size: 11px;
  font-weight: 900;
}

.ops-jewel-tk-win {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ops-jewel-tk-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: opsJewelTicker 18s linear infinite;
}

.ops-jewel-tk-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 15px;
  font-size: 9.5px;
  white-space: nowrap;
  position: relative;
}

.ops-jewel-tk-item::after {
  content: "\2666";
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(242, 166, 63, .5);
  font-size: 6px;
}

.ops-jewel-tk-k {
  color: #c3ccda;
  font-weight: 700;
}

.ops-jewel-tk-v {
  color: #fff;
  font-weight: 800;
}

.ops-jewel-tk-u {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  color: var(--jup);
}

.ops-jewel-tk-u i {
  font-size: 8px;
}

.ops-jewel-tk-u--dn {
  color: var(--jdn);
}

.ops-jewel-body {
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ops-jewel-kpi {
  display: flex;
  gap: 10px;
  align-items: stretch;
  opacity: 0;
  animation: opsJewelRise .5s ease .05s forwards;
}

.ops-jewel-gauge-wrap {
  flex: none;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: linear-gradient(180deg, rgba(242, 166, 63, .08), rgba(255, 255, 255, .01));
  border: 1px solid rgba(242, 166, 63, .14);
  border-radius: 13px;
  padding: 6px 4px;
}

.ops-jewel-gauge {
  position: relative;
  width: 54px;
  height: 54px;
}

.ops-jewel-ring {
  width: 54px;
  height: 54px;
  display: block;
}

.ops-jewel-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 7;
}

.ops-jewel-ring-fg {
  fill: none;
  stroke: url(#ops-jewel-grad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 45.8;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: opsJewelRing 5s ease-in-out infinite;
}

.ops-jewel-gauge-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.5px;
  animation: opsJewelBeat 3s ease-in-out infinite;
}

.ops-jewel-gauge-val i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: var(--jmut);
  margin-left: 1px;
}

.ops-jewel-gauge-label {
  font-size: 10px;
  font-weight: 700;
  margin-top: 3px;
}

.ops-jewel-gauge-sub {
  font-size: 8px;
  color: var(--jmut);
}

.ops-jewel-val {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 13px;
  padding: 8px 11px;
}

.ops-jewel-val-label {
  font-size: 9.5px;
  color: var(--jmut);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ops-jewel-val-label i {
  color: var(--jgold);
}

.ops-jewel-val-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.ops-jewel-val-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: #fff;
  background: linear-gradient(100deg, #fff 18%, #f7cf6b 34%, #ffe9b0 46%, #f2a63f 60%, #fff 82%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: opsJewelShimmer 5s linear infinite;
}

.ops-jewel-val-num em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  -webkit-text-fill-color: #c9b17a;
  margin-left: 1px;
}

.ops-jewel-trend {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--jup);
  background: rgba(61, 220, 132, .13);
  padding: 2px 7px;
  border-radius: 999px;
}

.ops-jewel-trend i {
  font-size: 9px;
  animation: opsJewelBob 2.4s ease-in-out infinite;
}

.ops-jewel-spark {
  width: 100%;
  height: 26px;
  display: block;
  margin-top: 1px;
}

.ops-jewel-spark-fill {
  fill: url(#ops-jewel-spk);
  opacity: 0;
  animation: opsJewelFade .8s ease 1.1s forwards;
}

.ops-jewel-spark-line {
  fill: none;
  stroke: var(--jgold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: opsJewelDraw 4.6s ease-in-out infinite;
}

.ops-jewel-val-foot {
  font-size: 8.5px;
  color: #8b93a3;
}

.ops-jewel-inv {
  opacity: 0;
  animation: opsJewelRise .5s ease .13s forwards;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 13px;
  padding: 8px 9px;
}

.ops-jewel-inv-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.ops-jewel-inv-t {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.ops-jewel-inv-t b {
  font-size: 11.5px;
  font-weight: 800;
}

.ops-jewel-inv-t span {
  font-size: 9px;
  color: var(--jmut);
}

.ops-jewel-inv-legend {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ops-jewel-lg {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  font-weight: 700;
  color: var(--jmut);
  white-space: nowrap;
}

.ops-jewel-lg::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.ops-jewel-lg-24::before {
  background: linear-gradient(135deg, #f7cf6b, #ffe9b0);
}

.ops-jewel-lg-22::before {
  background: linear-gradient(135deg, var(--jo), var(--jgold));
}

.ops-jewel-lg-18::before {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
}

.ops-jewel-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ops-jewel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  animation: opsJewelPop .45s ease forwards;
  animation-delay: calc(var(--i, 0)*95ms + .18s);
}

.ops-jewel-ico {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--jgold);
  background: rgba(242, 166, 63, .12);
  border: 1px solid rgba(242, 166, 63, .2);
}

.ops-jewel-nm {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: #eef1f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-jewel-pur {
  flex: none;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 5px;
  letter-spacing: .3px;
}

.ops-jewel-pur--24 {
  color: #241c07;
  background: linear-gradient(135deg, #f7cf6b, #ffe9b0);
}

.ops-jewel-pur--22 {
  color: #f7d79a;
  background: rgba(242, 166, 63, .15);
  border: 1px solid rgba(242, 166, 63, .36);
}

.ops-jewel-pur--18 {
  color: #c9d4e6;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
}

.ops-jewel-wt {
  flex: none;
  width: 52px;
  text-align: right;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ops-jewel-wt i {
  font-style: normal;
  font-size: 8px;
  color: var(--jmut);
  margin-left: 1px;
  font-weight: 600;
}

.ops-jewel-amt {
  flex: none;
  width: 44px;
  text-align: right;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--jgold);
  font-variant-numeric: tabular-nums;
}

.ops-jewel-bill {
  display: flex;
  gap: 9px;
  align-items: stretch;
  opacity: 0;
  animation: opsJewelRise .5s ease .21s forwards;
}

.ops-jewel-bill-l {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: rgba(61, 220, 132, .06);
  border: 1px solid rgba(61, 220, 132, .16);
  border-radius: 11px;
  padding: 7px 10px;
}

.ops-jewel-bill-h {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #c3ccda;
}

.ops-jewel-bill-h i {
  color: var(--jup);
}

.ops-jewel-bill-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.ops-jewel-bill-row b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.4px;
}

.ops-jewel-bill-row small {
  font-size: 8.5px;
  color: var(--jmut);
}

.ops-jewel-bill-r {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 11px;
  padding: 7px 10px;
}

.ops-jewel-mk-lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 9px;
  color: var(--jmut);
  font-weight: 600;
}

.ops-jewel-mk-lbl b {
  color: var(--jgold);
  font-weight: 800;
  font-size: 10px;
}

.ops-jewel-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ops-jewel-mk-fill {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jo), var(--jgold));
  transform-origin: left;
  animation: opsJewelGrow 4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.ops-jewel-mk-foot {
  font-size: 8px;
  color: #8b93a3;
}

.ops-jewel-chip-1 {
  position: absolute;
  top: 24px;
  left: -8px;
  z-index: 6;
}

.ops-jewel-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px;
  z-index: 6;
}

.ops-jewel-chip-3 {
  position: absolute;
  bottom: 60px;
  left: -6px;
  z-index: 6;
}

.ops-jewel-chip-1 i {
  color: #f2a63f;
}

.ops-jewel-chip-2 i {
  color: #e05320;
}

.ops-jewel-chip-3 i {
  color: #16b877;
}

@keyframes opsJewelPulse {
  0% {
    transform: scale(1);
    opacity: .7
  }

  100% {
    transform: scale(2.7);
    opacity: 0
  }
}

@keyframes opsJewelTicker {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

@keyframes opsJewelRing {
  0% {
    stroke-dashoffset: 176
  }

  34% {
    stroke-dashoffset: 45.8
  }

  100% {
    stroke-dashoffset: 45.8
  }
}

@keyframes opsJewelGrow {
  0% {
    transform: scaleX(0)
  }

  30% {
    transform: scaleX(1)
  }

  100% {
    transform: scaleX(1)
  }
}

@keyframes opsJewelPop {
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsJewelRise {
  0% {
    opacity: 0;
    transform: translateY(9px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsJewelBob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }
}

@keyframes opsJewelBeat {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.05)
  }
}

@keyframes opsJewelDraw {
  0% {
    stroke-dashoffset: 180;
    opacity: 0
  }

  10% {
    opacity: 1
  }

  50% {
    stroke-dashoffset: 0
  }

  90% {
    stroke-dashoffset: 0;
    opacity: 1
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0
  }
}

@keyframes opsJewelFade {
  to {
    opacity: 1
  }
}

@keyframes opsJewelShimmer {
  0% {
    background-position: 0% 0
  }

  100% {
    background-position: 220% 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .ops-jewel * {
    animation: none !important
  }

  .ops-jewel-kpi,
  .ops-jewel-inv,
  .ops-jewel-bill,
  .ops-jewel-row {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-jewel-mk-fill {
    transform: none !important
  }

  .ops-jewel-spark-line {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important
  }

  .ops-jewel-spark-fill {
    opacity: 1 !important
  }

  .ops-jewel-ring-fg {
    stroke-dashoffset: 45.8 !important;
    transform: rotate(-90deg) !important
  }

  .ops-jewel-val-num {
    -webkit-text-fill-color: #f7cf6b !important;
    background: none !important;
    color: #f7cf6b !important
  }
}

/* ---- sabji-mandi-management-software (sabji) ---- */
.ops-sabji {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #eef1f6;
  line-height: 1.2;
  --so: #e05320;
  --so2: #f2854a;
  --sg: #22c55e;
  --sg2: #3ddc84;
  --sb: #4f8cff;
  --sa: #f2a63f;
  --sup: #ef5a4f;
}

.ops-sabji * {
  box-sizing: border-box;
}

.ops-sabji-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-sabji-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ops-sabji-logo {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(135deg, var(--sg2), var(--so));
  color: #fff;
  font-size: 11px;
  box-shadow: 0 3px 9px rgba(34, 197, 94, .4);
}

.ops-sabji-appname {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .2px;
  flex: none;
}

.ops-sabji-crumb {
  font-size: 10px;
  color: #9aa3b2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: 7px;
}

.ops-sabji-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: #c7f9df;
  background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(34, 197, 94, .3);
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
}

.ops-sabji-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sg);
  position: relative;
  flex: none;
}

.ops-sabji-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sg);
  animation: opsSabjiPulse 2s ease-out infinite;
}

.ops-sabji-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ops-sabji-kpi {
  display: flex;
  gap: 11px;
  align-items: stretch;
  opacity: 0;
  animation: opsSabjiRise .5s ease .05s forwards;
}

.ops-sabji-gauge-wrap {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
}

.ops-sabji-gauge {
  position: relative;
  width: 60px;
  height: 60px;
}

.ops-sabji-ring {
  width: 60px;
  height: 60px;
  display: block;
}

.ops-sabji-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 7;
}

.ops-sabji-ring-fg {
  fill: none;
  stroke: url(#ops-sabji-grad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 45.8;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: opsSabjiRing 5s ease-in-out infinite;
}

.ops-sabji-gauge-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.5px;
  animation: opsSabjiBeat 3s ease-in-out infinite;
}

.ops-sabji-gauge-val i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: #9aa3b2;
  margin-left: 1px;
}

.ops-sabji-gauge-label {
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

.ops-sabji-gauge-sub {
  font-size: 9px;
  color: #9aa3b2;
}

.ops-sabji-total {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 13px;
  padding: 9px 11px;
}

.ops-sabji-total-label {
  font-size: 9.5px;
  color: #9aa3b2;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ops-sabji-total-label i {
  color: var(--so2);
}

.ops-sabji-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.ops-sabji-total-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.6px;
}

.ops-sabji-total-val em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #c3ccda;
  margin-left: 1px;
}

.ops-sabji-trend {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
}

.ops-sabji-trend--up {
  color: var(--sg);
  background: rgba(34, 197, 94, .14);
}

.ops-sabji-trend i {
  font-size: 9px;
  animation: opsSabjiBob 2.4s ease-in-out infinite;
}

.ops-sabji-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ops-sabji-total-fill {
  display: block;
  height: 100%;
  width: 82%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--so), var(--so2));
  transform-origin: left;
  animation: opsSabjiGrow 4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.ops-sabji-total-foot {
  font-size: 8.5px;
  color: #8b93a3;
}

.ops-sabji-rates {
  opacity: 0;
  animation: opsSabjiRise .5s ease .13s forwards;
}

.ops-sabji-rates-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.ops-sabji-rates-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ops-sabji-rates-t b {
  font-size: 11.5px;
  font-weight: 800;
}

.ops-sabji-rates-t span {
  font-size: 9px;
  color: #9aa3b2;
}

.ops-sabji-live {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 8.5px;
  font-weight: 700;
  color: #9aa3b2;
}

.ops-sabji-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sg);
  animation: opsSabjiBlink 1.6s ease-in-out infinite;
}

.ops-sabji-list {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .05);
}

.ops-sabji-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  left: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: opsSabjiSweep 4.2s ease-in-out infinite;
}

.ops-sabji-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  opacity: 0;
  transform: translateY(6px);
  animation: opsSabjiPop .45s ease forwards;
  animation-delay: calc(var(--i, 0)*90ms + .18s);
}

.ops-sabji-row+.ops-sabji-row {
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.ops-sabji-veg {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.ops-sabji-veg--tom {
  background: linear-gradient(135deg, #ef5a4f, #f2854a);
}

.ops-sabji-veg--oni {
  background: linear-gradient(135deg, #a06bff, #7c47e6);
}

.ops-sabji-veg--pot {
  background: linear-gradient(135deg, #f2a63f, #d98324);
}

.ops-sabji-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.ops-sabji-name b {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ops-sabji-name i {
  font-size: 8.5px;
  font-style: normal;
  color: #9aa3b2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ops-sabji-price {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.3px;
  flex: none;
}

.ops-sabji-price em {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  color: #9aa3b2;
  margin-left: 1px;
}

.ops-sabji-arrow {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  width: 44px;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 0;
  border-radius: 999px;
}

.ops-sabji-arrow i {
  font-size: 10px;
}

.ops-sabji-arrow--up {
  color: var(--sup);
  background: rgba(239, 90, 79, .13);
}

.ops-sabji-arrow--down {
  color: var(--sg);
  background: rgba(34, 197, 94, .14);
}

.ops-sabji-arrow--up i {
  animation: opsSabjiBob 2.2s ease-in-out infinite;
}

.ops-sabji-arrow--down i {
  animation: opsSabjiBobD 2.2s ease-in-out infinite;
}

.ops-sabji-foot {
  display: flex;
  gap: 9px;
  opacity: 0;
  animation: opsSabjiRise .5s ease .21s forwards;
}

.ops-sabji-weigh,
.ops-sabji-vend {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ops-sabji-foot-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  color: #c3ccda;
  white-space: nowrap;
}

.ops-sabji-weigh .ops-sabji-foot-h i {
  color: var(--sa);
  animation: opsSabjiBob 2.6s ease-in-out infinite;
}

.ops-sabji-vend .ops-sabji-foot-h i {
  color: var(--sb);
}

.ops-sabji-weigh-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.ops-sabji-weigh-val {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
  transform-origin: left center;
  animation: opsSabjiBeat 2.6s ease-in-out infinite;
}

.ops-sabji-weigh-val em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #c3ccda;
  margin-left: 1px;
}

.ops-sabji-weigh-veg {
  font-size: 8.5px;
  color: #9aa3b2;
  margin-left: auto;
  white-space: nowrap;
}

.ops-sabji-weigh-fill {
  display: block;
  height: 100%;
  width: 81%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sa), #f8c46b);
  transform-origin: left;
  animation: opsSabjiGrow 3.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.ops-sabji-weigh-foot {
  font-size: 8px;
  color: #8b93a3;
  white-space: nowrap;
}

.ops-sabji-vend-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.ops-sabji-vend-row b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.ops-sabji-vend-row small {
  font-size: 8.5px;
  color: #9aa3b2;
}

.ops-sabji-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 20px;
  margin-top: auto;
}

.ops-sabji-spark span {
  flex: 1;
  height: var(--h);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sg2), var(--sg));
  transform-origin: bottom;
  animation: opsSabjiBar 2.8s ease-in-out infinite;
}

.ops-sabji-spark span:nth-child(2) {
  animation-delay: .2s;
}

.ops-sabji-spark span:nth-child(3) {
  animation-delay: .4s;
}

.ops-sabji-spark span:nth-child(4) {
  animation-delay: .6s;
}

.ops-sabji-spark span:nth-child(5) {
  animation-delay: .8s;
}

.ops-sabji-chip-1 {
  position: absolute;
  top: 24px;
  left: -8px;
  z-index: 6;
}

.ops-sabji-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px;
  z-index: 6;
}

.ops-sabji-chip-3 {
  position: absolute;
  bottom: 60px;
  left: -6px;
  z-index: 6;
}

.ops-sabji-chip-1 i {
  color: #e05320;
}

.ops-sabji-chip-2 i {
  color: #4f8cff;
}

.ops-sabji-chip-3 i {
  color: #22c55e;
}

@keyframes opsSabjiPulse {
  0% {
    transform: scale(1);
    opacity: .7
  }

  100% {
    transform: scale(2.7);
    opacity: 0
  }
}

@keyframes opsSabjiRing {
  0% {
    stroke-dashoffset: 176
  }

  32% {
    stroke-dashoffset: 45.8
  }

  100% {
    stroke-dashoffset: 45.8
  }
}

@keyframes opsSabjiGrow {
  0% {
    transform: scaleX(0)
  }

  30% {
    transform: scaleX(1)
  }

  100% {
    transform: scaleX(1)
  }
}

@keyframes opsSabjiPop {
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsSabjiSweep {
  0% {
    transform: translateX(-140%)
  }

  16% {
    opacity: 1
  }

  84% {
    opacity: 1
  }

  100% {
    transform: translateX(340%)
  }
}

@keyframes opsSabjiBob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-2px)
  }
}

@keyframes opsSabjiBobD {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(2px)
  }
}

@keyframes opsSabjiBeat {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.05)
  }
}

@keyframes opsSabjiRise {
  0% {
    opacity: 0;
    transform: translateY(9px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opsSabjiBar {

  0%,
  100% {
    transform: scaleY(.55)
  }

  50% {
    transform: scaleY(1)
  }
}

@keyframes opsSabjiBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

@media (prefers-reduced-motion:reduce) {
  .ops-sabji * {
    animation: none !important
  }

  .ops-sabji-kpi,
  .ops-sabji-rates,
  .ops-sabji-foot,
  .ops-sabji-row {
    opacity: 1 !important;
    transform: none !important
  }

  .ops-sabji-total-fill,
  .ops-sabji-weigh-fill,
  .ops-sabji-spark span {
    transform: none !important
  }

  .ops-sabji-sweep {
    opacity: 0 !important
  }

  .ops-sabji-ring-fg {
    stroke-dashoffset: 45.8 !important;
    transform: rotate(-90deg) !important
  }
}

/* ---- e-learning (elrn) ---- */
.ops-elrn {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  font-family: inherit
}

.ops-elrn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.ops-elrn-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px
}

.ops-elrn-brand i {
  color: #e05320;
  font-size: 13px
}

.ops-elrn-live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #3ddc84;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(61, 220, 132, .1);
  border: 1px solid rgba(61, 220, 132, .25);
  padding: 3px 8px;
  border-radius: 20px
}

.ops-elrn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  animation: opsElrnPulse 1.8s ease-in-out infinite
}

@keyframes opsElrnPulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(61, 220, 132, .5)
  }

  50% {
    opacity: .5;
    box-shadow: 0 0 0 5px rgba(61, 220, 132, 0)
  }
}

.ops-elrn-body {
  padding: 12px
}

.ops-elrn-video {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px
}

.ops-elrn-thumb {
  position: relative;
  width: 118px;
  height: 70px;
  flex: 0 0 auto;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2140, #3a2a5a 55%, #7c5cff)
}

.ops-elrn-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(224, 83, 32, .4), transparent 60%)
}

.ops-elrn-livebadge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #e0398f;
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 5px;
  z-index: 2
}

.ops-elrn-livebadge i {
  font-size: 5px;
  animation: opsElrnBlink 1.2s steps(1) infinite
}

@keyframes opsElrnBlink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .2
  }
}

.ops-elrn-watch {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(15, 17, 23, .6);
  color: #fff;
  font-size: 8.5px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 5px;
  z-index: 2;
  backdrop-filter: blur(2px)
}

.ops-elrn-watch i {
  font-size: 7px;
  color: #4f8cff
}

.ops-elrn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  animation: opsElrnPlay 2.4s ease-in-out infinite
}

.ops-elrn-play i {
  color: #e05320;
  font-size: 11px;
  margin-left: 2px
}

@keyframes opsElrnPlay {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1)
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12)
  }
}

.ops-elrn-seek {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, .18);
  z-index: 2
}

.ops-elrn-seek::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, #e05320, #f2854a);
  animation: opsElrnSeek 5s linear infinite
}

@keyframes opsElrnSeek {
  0% {
    width: 8%
  }

  100% {
    width: 96%
  }
}

.ops-elrn-vmeta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0
}

.ops-elrn-vtitle {
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25
}

.ops-elrn-vsub {
  color: rgba(255, 255, 255, .5);
  font-size: 10.5px
}

.ops-elrn-mid {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.ops-elrn-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex: 0 0 auto
}

.ops-elrn-ring svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg)
}

.ops-elrn-track {
  fill: none;
  stroke: rgba(255, 255, 255, .09);
  stroke-width: 7
}

.ops-elrn-prog {
  fill: none;
  stroke: url(#none);
  stroke: #e05320;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 201;
  stroke-dashoffset: 201;
  animation: opsElrnRing 2.6s cubic-bezier(.4, 0, .2, 1) forwards
}

@keyframes opsElrnRing {
  to {
    stroke-dashoffset: 64
  }
}

.ops-elrn-ringval {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 19px;
  font-weight: 700
}

.ops-elrn-ringval i {
  font-size: 10px;
  font-style: normal;
  color: #f2854a;
  font-weight: 600
}

.ops-elrn-ringlbl {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .5);
  font-size: 8.5px;
  letter-spacing: .4px;
  text-transform: uppercase
}

.ops-elrn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ops-elrn-li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  opacity: 0;
  transform: translateX(10px);
  animation: opsElrnSlide .5s ease forwards
}

.ops-elrn-li i {
  font-size: 11px;
  color: #3ddc84;
  flex: 0 0 auto
}

.ops-elrn-li-1 {
  animation-delay: .5s
}

.ops-elrn-li-2 {
  animation-delay: .85s
}

.ops-elrn-li-3 {
  animation-delay: 1.2s
}

.ops-elrn-li-4 {
  animation-delay: 1.55s
}

.ops-elrn-li-4 {
  color: rgba(255, 255, 255, .5)
}

.ops-elrn-li-4 i {
  color: #f2a63f;
  animation: opsElrnSpin 1.4s linear infinite
}

@keyframes opsElrnSlide {
  to {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes opsElrnSpin {
  to {
    transform: rotate(360deg)
  }
}

.ops-elrn-stats {
  display: flex;
  justify-content: space-between;
  padding-top: 11px;
  gap: 8px
}

.ops-elrn-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  text-align: center
}

.ops-elrn-snum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: 700
}

.ops-elrn-stat:nth-child(1) .ops-elrn-snum i {
  color: #4f8cff
}

.ops-elrn-stat:nth-child(2) .ops-elrn-snum i {
  color: #3ddc84
}

.ops-elrn-stat:nth-child(3) .ops-elrn-snum i {
  color: #f2a63f
}

.ops-elrn-snum i {
  font-size: 10px
}

.ops-elrn-slbl {
  color: rgba(255, 255, 255, .45);
  font-size: 9px;
  letter-spacing: .3px;
  text-transform: uppercase
}

.ops-elrn-cert {
  position: absolute;
  right: 10px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #e05320, #f2854a);
  border-radius: 12px;
  padding: 8px 12px 8px 10px;
  box-shadow: 0 10px 26px rgba(224, 83, 32, .4);
  z-index: 5;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  animation: opsElrnCert 6s ease-in-out infinite
}

.ops-elrn-certico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.ops-elrn-certico i {
  color: #fff;
  font-size: 14px;
  animation: opsElrnShine 6s ease-in-out infinite
}

.ops-elrn-certtxt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  color: #fff
}

.ops-elrn-certtxt b {
  font-size: 11.5px;
  font-weight: 700
}

.ops-elrn-certtxt {
  font-size: 9.5px;
  color: rgba(255, 255, 255, .85)
}

@keyframes opsElrnCert {

  0%,
  10% {
    opacity: 0;
    transform: translateY(14px) scale(.9)
  }

  18%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }

  82%,
  100% {
    opacity: 0;
    transform: translateY(14px) scale(.9)
  }
}

@keyframes opsElrnShine {

  0%,
  100% {
    transform: rotate(0)
  }

  20%,
  60% {
    transform: rotate(0)
  }

  68% {
    transform: rotate(-18deg)
  }

  76% {
    transform: rotate(18deg)
  }

  84% {
    transform: rotate(0)
  }
}

.ops-elrn-chip-1 {
  position: absolute;
  top: 24px;
  left: -8px
}

.ops-elrn-chip-1 i {
  color: #4f8cff
}

.ops-elrn-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px
}

.ops-elrn-chip-2 i {
  color: #e0398f
}

.ops-elrn-chip-3 {
  position: absolute;
  bottom: 60px;
  left: -6px
}

.ops-elrn-chip-3 i {
  color: #3ddc84
}

@media (prefers-reduced-motion:reduce) {
  .ops-elrn * {
    animation: none !important
  }

  .ops-elrn-prog {
    stroke-dashoffset: 64
  }

  .ops-elrn-li {
    opacity: 1;
    transform: none
  }

  .ops-elrn-cert {
    opacity: 1;
    transform: none
  }

  .ops-elrn-play {
    transform: translate(-50%, -50%)
  }
}

/* ---- performance-marketing (perf) ---- */
.ops-perf-chip-1 {
  position: absolute;
  top: 24px;
  left: -8px;
}

.ops-perf-chip-2 {
  position: absolute;
  top: 150px;
  right: -12px;
}

.ops-perf-chip-3 {
  position: absolute;
  bottom: 60px;
  left: -6px;
}

.ops-perf-chip-1 i {
  color: #e05320;
}

.ops-perf-chip-2 i {
  color: #f2a63f;
}

.ops-perf-chip-3 i {
  color: #16b877;
}

.ops-perf {
  width: min(360px, 86vw);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  z-index: 3;
  box-shadow: 0 26px 60px rgba(15, 17, 23, .32);
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, .07);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}

.ops-perf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #0f1117;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ops-perf-app {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
}

.ops-perf-app i {
  color: #e05320;
  font-size: 12px;
}

.ops-perf-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #f2a63f;
  background: rgba(242, 166, 63, .12);
  padding: 3px 8px;
  border-radius: 20px;
}

.ops-perf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2a63f;
  animation: opsPerfPulse 1.8s ease-in-out infinite;
}

.ops-perf-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ops-perf-kpirow {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.ops-perf-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 0 0 auto;
}

.ops-perf-klabel {
  font-size: 9.5px;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.ops-perf-kval {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(90deg, #e05320, #f2854a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: opsPerfRise .7s ease-out both;
}

.ops-perf-kx {
  font-size: 18px;
  font-weight: 700;
}

.ops-perf-ktrend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #3ddc84;
}

.ops-perf-ktrend i {
  font-size: 11px;
}

.ops-perf-chart {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ops-perf-clegend {
  display: flex;
  gap: 11px;
  justify-content: flex-end;
  font-size: 9px;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
}

.ops-perf-clegend i {
  font-size: 6px;
  vertical-align: middle;
  margin-right: 3px;
}

.ops-perf-lg-a {
  color: #4f8cff;
}

.ops-perf-lg-b {
  color: #f2854a;
}

.ops-perf-svg {
  width: 100%;
  height: 48px;
  display: block;
}

.ops-perf-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.ops-perf-line-a {
  stroke: #4f8cff;
  animation: opsPerfDraw 2.6s ease-out .2s forwards;
}

.ops-perf-line-b {
  stroke: url(#none);
  stroke: #f2854a;
  animation: opsPerfDraw 2.6s ease-out .5s forwards;
}

.ops-perf-funnel {
  display: flex;
  gap: 6px;
}

.ops-perf-fstep {
  flex: 1;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 11px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: opsPerfSlide .5s ease-out forwards;
}

.ops-perf-f1 {
  animation-delay: .35s;
}

.ops-perf-f2 {
  animation-delay: .5s;
}

.ops-perf-f3 {
  animation-delay: .65s;
}

.ops-perf-fstep i {
  font-size: 12px;
}

.ops-perf-f1 i {
  color: #7c5cff;
}

.ops-perf-f2 i {
  color: #4f8cff;
}

.ops-perf-f3 i {
  color: #16b877;
}

.ops-perf-fnum {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.ops-perf-flab {
  font-size: 8.5px;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
  letter-spacing: .2px;
}

.ops-perf-f3 {
  background: rgba(22, 184, 119, .1);
  border-color: rgba(22, 184, 119, .28);
}

.ops-perf-chan {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ops-perf-crow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 3px;
  align-items: center;
  opacity: 0;
  transform: translateX(-8px);
  animation: opsPerfIn .5s ease-out forwards;
}

.ops-perf-cr1 {
  animation-delay: .8s;
}

.ops-perf-cr2 {
  animation-delay: .95s;
}

.ops-perf-cname {
  grid-row: 1;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ops-perf-cname i {
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.ops-perf-cr1 .ops-perf-cname i {
  color: #4f8cff;
}

.ops-perf-cr2 .ops-perf-cname i {
  color: #4f8cff;
}

.ops-perf-cspend {
  grid-row: 1;
  grid-column: 3;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.ops-perf-cbarwrap {
  grid-row: 2;
  grid-column: 1 / 3;
  height: 6px;
  background: rgba(255, 255, 255, .06);
  border-radius: 6px;
  overflow: hidden;
}

.ops-perf-cbar {
  display: block;
  height: 100%;
  border-radius: 6px;
  width: 0;
  transform-origin: left;
}

.ops-perf-cbar-g {
  background: linear-gradient(90deg, #4f8cff, #7c5cff);
  animation: opsPerfGrowG 1.4s cubic-bezier(.2, .8, .3, 1) 1s forwards;
}

.ops-perf-cbar-m {
  background: linear-gradient(90deg, #e0398f, #f2854a);
  animation: opsPerfGrowM 1.4s cubic-bezier(.2, .8, .3, 1) 1.15s forwards;
}

.ops-perf-ccpa {
  grid-row: 2;
  grid-column: 3;
  font-size: 9.5px;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
  text-align: right;
}

@keyframes opsPerfPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(242, 166, 63, .5);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(242, 166, 63, 0);
  }
}

@keyframes opsPerfDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes opsPerfRise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes opsPerfSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes opsPerfIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes opsPerfGrowG {
  to {
    width: 78%;
  }
}

@keyframes opsPerfGrowM {
  to {
    width: 54%;
  }
}

@media (prefers-reduced-motion:reduce) {
  .ops-perf * {
    animation: none !important;
  }

  .ops-perf-kval,
  .ops-perf-fstep,
  .ops-perf-crow {
    opacity: 1 !important;
    transform: none !important;
  }

  .ops-perf-line {
    stroke-dashoffset: 0 !important;
  }

  .ops-perf-cbar-g {
    width: 78% !important;
  }

  .ops-perf-cbar-m {
    width: 54% !important;
  }
}

.template_logo_brand_cards_custom {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
  margin: 0 auto;
}

/* Quill Editor Alignment Classes for Frontend */
.ql-align-center {
  text-align: center !important;
}

.ql-align-right {
  text-align: right !important;
}

.ql-align-justify {
  text-align: justify !important;
}

.ql-align-left {
  text-align: left !important;
}

/* Restore list styles for rich text wrappers */
.tp-pd-2-overview-wrap ul,
.template_logo_brand_cards_custom ul {
  list-style-type: disc !important;
  margin-left: 20px !important;
  padding-left: 20px !important;
  margin-bottom: 15px !important;
}

.tp-pd-2-overview-wrap ol,
.template_logo_brand_cards_custom ol {
  list-style-type: decimal !important;
  margin-left: 20px !important;
  padding-left: 20px !important;
  margin-bottom: 15px !important;
}

.tp-pd-2-overview-wrap li,
.template_logo_brand_cards_custom li {
  margin-bottom: 8px !important;
  display: list-item !important;
}

.mobile_app_template_hero_label {
  color: #ea5523 !important;
  font-weight: 700 !important;
}

.ops-logostrip-cell_home_page img {
  border-radius: 0 !important;
}



/* Swiper Pagination Dot Customization */
.ops-prod-shots-slider .swiper-pagination-bullet {
  background-color: #ccc;
  opacity: 1;
}

.ops-prod-shots-slider .swiper-pagination-bullet-active {
  background-color: #ea5523;
}

/* New Social Icons */
.ops-social-yt {
  background: #ff0000;
}

.ops-social-wa {
  background: #25d366;
}