/* =====================================================================
   CyberZeus — global brand layer  v2
   One stylesheet that gives every page the same modern, enterprise look.
   Fonts : Bebas Neue (display) · Space Mono (labels/buttons) · DM Sans (body)
   Accent: red #e21f36 + yellow #eef304
   Loaded last (via components/header.php) so it governs the whole site.
   ===================================================================== */
:root{
  --cz-red:#e21f36; --cz-red-dark:#b51529; --cz-red-soft:rgba(226,31,54,.07);
  --cz-yellow:#eef304; --cz-black:#111111; --cz-dark:#16181d; --cz-dark2:#1e2128;
  --cz-bg:#f5f6f7; --cz-text:#111111; --cz-sub:#4a4d5e; --cz-muted:#7a7d8e;
  --cz-border:#e4e6ea;
  --cz-display:'Bebas Neue',sans-serif;
  --cz-mono:'Space Mono',monospace;
  --cz-body:'DM Sans',sans-serif;
  --cz-shadow:0 18px 50px rgba(17,17,17,.10);
  --cz-shadow-sm:0 8px 24px rgba(17,17,17,.06);
}

/* ---------- base polish ---------- */
html{scroll-behavior:smooth;}
body{font-family:var(--cz-body)!important;color:var(--cz-text);}
p,li,td,th,label,blockquote,input,textarea,
.optech-default-content p,.hero-desc,.optech-portfolio-data p,
.cz-feature p,.cz-step p{font-family:var(--cz-body)!important;}
::selection{background:var(--cz-red);color:#fff;}
:focus-visible{outline:2px solid var(--cz-red);outline-offset:2px;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:#eceef1;}
::-webkit-scrollbar-thumb{background:#c3c7cf;border-radius:20px;border:3px solid #eceef1;}
::-webkit-scrollbar-thumb:hover{background:var(--cz-red);}

/* ---------- display headings -> Bebas Neue ---------- */
h1,h2,h3,
.shorttitle-lft,.optech-hero-content h1,.optech-section-title h2,
.optech-default-content h2,.optech-cta-content h2,.optech-portfolio-data h4,
.optech-iconbox-data4 h4,.optech-infobox-data h5,
.cz-cta h2,.cz-feature h4,.cz-step h4,.cz-band h2{
  font-family:var(--cz-display)!important;
  text-transform:uppercase;letter-spacing:.5px;line-height:.95;font-weight:400;
}
.optech-hero-content h1{font-size:clamp(54px,8vw,104px);letter-spacing:-1px;line-height:.9;}
.shorttitle-lft,.optech-section-title h2,.optech-default-content h2,.optech-cta-content h2{
  font-size:clamp(36px,4.6vw,60px);}
.shorttitle-lft span,.optech-section-title h2 span,
.optech-hero-content h1 span,.optech-hero-content h1 em{color:var(--cz-red)!important;font-style:normal;}

/* section-title accent bar */
.optech-section-title h2::after,.optech-default-content h2::after{
  content:"";display:block;width:56px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--cz-red),#ff5d52);margin-top:18px;}
.optech-section-title.center h2::after{margin-left:auto;margin-right:auto;}

/* ---------- eyebrows / labels -> Space Mono ---------- */
.cz-eyebrow,.optech-hero-content h5,.optech-footer-title h5,
.mega-menu .title,.keyclients h4,.optech-infobox-data p{
  font-family:var(--cz-mono)!important;text-transform:uppercase;
  letter-spacing:2px;font-weight:700;}
.optech-hero-content h5{color:var(--cz-red)!important;font-size:13px;letter-spacing:3px;
  display:inline-flex;align-items:center;gap:10px;}
.optech-hero-content h5::before{content:"";width:26px;height:2px;background:var(--cz-red);display:inline-block;}
.cz-eyebrow{color:var(--cz-red)!important;display:inline-flex;align-items:center;gap:10px;}
.cz-eyebrow::before{content:"";width:22px;height:2px;background:var(--cz-red);display:inline-block;}

/* ---------- buttons ---------- */
.optech-default-btn,.optech-default-btn .btn-wraper,.btn,.header-btn,.btn-danger,
.login-btn,#optech-subscription-btn,.optech-portfolio-btn{
  font-family:var(--cz-mono)!important;text-transform:uppercase;letter-spacing:2px;font-weight:700;}
.optech-default-btn,.btn,.header-btn,.btn-danger,#optech-subscription-btn{
  border-radius:3px!important;transition:all .25s ease!important;}
.optech-default-btn{background:var(--cz-red)!important;color:#fff!important;
  border:2px solid var(--cz-red)!important;box-shadow:0 6px 22px rgba(226,31,54,.26);}
.optech-default-btn:hover{background:transparent!important;color:var(--cz-red)!important;
  box-shadow:none;transform:translateY(-2px);}
.optech-default-btn.optech-white-btn{background:#fff!important;color:var(--cz-black)!important;
  border:1.5px solid var(--cz-border)!important;box-shadow:none;}
.optech-default-btn.optech-white-btn:hover{border-color:var(--cz-red)!important;
  color:var(--cz-red)!important;background:var(--cz-red-soft)!important;}
.btn-danger,.header-btn{background:var(--cz-red)!important;border:2px solid var(--cz-red)!important;color:#fff!important;}
.btn-danger:hover,.header-btn:hover{background:var(--cz-red-dark)!important;border-color:var(--cz-red-dark)!important;transform:translateY(-2px);}

/* ---------- header + nav ---------- */
.site-header{border-bottom:1px solid rgba(255,255,255,.06);}
.menu-main>li>a{font-family:var(--cz-body)!important;font-weight:600;position:relative;}
.menu-main>li>a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;
  background:var(--cz-red);transition:width .3s ease;}
.menu-main>li:hover>a::after{width:100%;}

/* ---------- cards: portfolio / iconbox / cz ---------- */
.optech-portfolio-wrap,.optech-iconbox-wrap4,.optech-iconbox-wrap3,
.optech-iconbox-wrap,.cz-feature,.cz-step{
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;}
.optech-iconbox-wrap4:hover,.optech-iconbox-wrap3:hover,.optech-iconbox-wrap:hover,
.cz-feature:hover,.cz-step:hover{transform:translateY(-8px);box-shadow:var(--cz-shadow);}
.cz-feature,.cz-step{border-radius:8px!important;position:relative;overflow:hidden;}
.cz-feature::before,.cz-step::before{content:"";position:absolute;left:0;top:0;height:4px;width:0;
  background:linear-gradient(90deg,var(--cz-red),#ff5d52);transition:width .35s ease;}
.cz-feature:hover::before,.cz-step:hover::before{width:100%;}
.cz-feature .ic,.cz-step .num{border-radius:8px!important;}

/* portfolio image zoom */
.optech-portfolio-thumb{overflow:hidden;border-radius:8px!important;}
.optech-portfolio-thumb img{transition:transform .6s cubic-bezier(.2,.7,.2,1)!important;border-radius:8px!important;}
.optech-portfolio-wrap:hover .optech-portfolio-thumb img{transform:scale(1.07);}

/* ---------- cz component polish ---------- */
.cz-stat .n{color:var(--cz-yellow)!important;font-family:var(--cz-display)!important;letter-spacing:1px;}
.cz-stat .l{font-family:var(--cz-mono)!important;text-transform:uppercase;letter-spacing:2px;}
.cz-band,.cz-cta,.cz-gallery img,.cz-users,.cz-visual svg,.cz-visual img{border-radius:10px!important;}
.cz-cta{position:relative;overflow:hidden;}
.cz-cta::after{content:"";position:absolute;inset:0;
  background:radial-gradient(600px circle at 80% -20%,rgba(255,255,255,.18),transparent 60%);pointer-events:none;}
.cz-chip{border-radius:3px!important;font-family:var(--cz-mono)!important;
  text-transform:uppercase;letter-spacing:1px;font-size:12px!important;transition:.25s;}
.cz-chip:hover{border-color:var(--cz-red)!important;}
.cz-gallery img{transition:transform .5s ease,box-shadow .35s ease;}
.cz-gallery img:hover{transform:translateY(-4px);box-shadow:var(--cz-shadow);}

/* ---------- premium logo wall (frameworks) ---------- */
.clients_logo_box img{filter:grayscale(1);opacity:.62;transition:filter .35s ease,opacity .35s ease,transform .35s ease;}
.clients_logo_box:hover img{filter:none;opacity:1;transform:translateY(-3px);}

/* ---------- content links ---------- */
.optech-default-content a:not(.optech-default-btn){color:var(--cz-red);}
footer a,.optech-footer-menu a{transition:color .25s ease;}
footer a:hover,.optech-footer-menu a:hover{color:var(--cz-red)!important;}

/* ---------- accents on system bits ---------- */
.progress-wrap .progress-circle path{stroke:var(--cz-red)!important;}
.optech-preloader div{background:var(--cz-red)!important;}
.top-arrow{color:var(--cz-red);}

/* ---------- responsive niceties ---------- */
@media(max-width:767px){
  .optech-hero-content h1{font-size:clamp(40px,12vw,64px);}
  .optech-section-title h2::after,.optech-default-content h2::after{margin-top:12px;}
}

/* =====================================================================
   v3 additions — custom cursor · moving icons · readability
   ===================================================================== */

/* ---------- custom cursor (fine-pointer devices only) ---------- */
.cz-cursor,.cz-cursor-ring{display:none;}
@media (hover:hover) and (pointer:fine){
  body.cz-has-cursor,
  body.cz-has-cursor a,
  body.cz-has-cursor button,
  body.cz-has-cursor .optech-default-btn,
  body.cz-has-cursor .optech-portfolio-btn{cursor:none!important;}
  .cz-cursor{display:block;width:10px;height:10px;background:var(--cz-red);
    border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;
    z-index:99999;transform:translate(-50%,-50%);}
  .cz-cursor-ring{display:block;width:32px;height:32px;
    border:1.5px solid rgba(226,31,54,.55);border-radius:50%;position:fixed;
    top:0;left:0;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);
    transition:width .18s ease,height .18s ease,border-color .18s ease,background .18s ease;}
  .cz-cursor-ring.cz-hot{width:54px;height:54px;border-color:var(--cz-red);background:rgba(226,31,54,.08);}
  .cz-cursor-ring.cz-down{width:22px;height:22px;background:rgba(226,31,54,.16);}
}

/* ---------- moving icons + motion motifs ---------- */
@keyframes czFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes czSpin{to{transform:rotate(360deg)}}
@keyframes czPulse{0%,100%{box-shadow:0 0 0 0 rgba(226,31,54,.28)}70%{box-shadow:0 0 0 14px rgba(226,31,54,0)}}

.cz-feature .ic,.cz-step .num,
.optech-iconbox-icon4 img,.optech-iconbox-icon3 img,
.optech-infobox-icon i{animation:czFloat 4.5s ease-in-out infinite;will-change:transform;}
.cz-feature:hover .ic{transform:rotate(-6deg) scale(1.08);animation:czPulse 1.6s ease-out infinite;}
.optech-iconbox-wrap4:hover .optech-iconbox-icon4 img,
.optech-iconbox-wrap3:hover .optech-iconbox-icon3 img{transform:scale(1.12) rotate(-4deg);}

/* rotating accent frame behind product visuals */
.cz-visual{position:relative;}
.cz-visual::before{content:"";position:absolute;inset:-16px;border:1px dashed rgba(226,31,54,.35);
  border-radius:16px;animation:czSpin 30s linear infinite;pointer-events:none;}
.cz-visual::after{content:"";position:absolute;inset:-16px;border-top:2px solid var(--cz-red);
  border-radius:16px;animation:czSpin 12s linear infinite;pointer-events:none;opacity:.55;}

/* soft float on hero side thumbnails so heroes feel alive */
.optech-hero-thumb3 img,.optech-thumb img,.optech-thumb-position img{animation:czFloat 6s ease-in-out infinite;}

/* ---------- readability + flexibility ---------- */
body{font-size:16.5px;line-height:1.75;color:#1c1f26;}
p,.optech-default-content p,.hero-desc,.cz-feature p,.cz-step p,.optech-portfolio-data p{
  color:#3d4250;line-height:1.8;}
.optech-default-content p,.cz-users p{max-width:66ch;}
.optech-hero-content p{max-width:60ch;}
h1,h2,h3{overflow-wrap:break-word;}
img{max-width:100%;height:auto;}
.container{max-width:1240px;}

/* comfortable section rhythm on smaller screens */
@media(max-width:991px){
  .padding-tb-120{padding-top:70px!important;padding-bottom:70px!important;}
  .optech-section-padding{padding-top:70px!important;padding-bottom:70px!important;}
}
@media(max-width:575px){
  body{font-size:16px;}
  .cz-band,.cz-cta{padding:30px 20px!important;}
}

/* ---------- Global Presence region cards ---------- */
.cz-region{text-align:center;padding:30px 14px;border:1px solid rgba(255,255,255,.10);
  border-radius:10px;background:rgba(255,255,255,.03);
  transition:transform .35s ease,border-color .35s ease,background .35s ease;}
.cz-region:hover{transform:translateY(-8px);border-color:var(--cz-red);background:rgba(226,31,54,.08);}
.cz-region i{font-size:36px;color:var(--cz-red);display:inline-block;transition:transform .35s ease;}
.cz-region:hover i{transform:scale(1.18);}
.cz-region-name{font-family:var(--cz-display);text-transform:uppercase;letter-spacing:1px;
  font-size:26px;color:#fff;margin-top:12px;}

/* ---------- fix: legacy pages put the .shorttitle-lft HEADING class on body text ----------
   Keep paragraphs/lists that carry it as readable body copy, not giant uppercase display type. */
p.shorttitle-lft, ul.shorttitle-lft, ol.shorttitle-lft, li.shorttitle-lft, span.shorttitle-lft,
ul.shorttitle-lft li, ol.shorttitle-lft li{
  font-family:var(--cz-body)!important; text-transform:none!important;
  letter-spacing:normal!important; line-height:1.8!important; font-weight:400!important;
}
p.shorttitle-lft{font-size:17px!important; color:#3d4250!important;}
ul.shorttitle-lft, ol.shorttitle-lft, ul.shorttitle-lft li, ol.shorttitle-lft li, li.shorttitle-lft{font-size:16.5px!important;}
span.shorttitle-lft{font-size:inherit!important;}
p.shorttitle-lft span, ul.shorttitle-lft span, li.shorttitle-lft span{color:inherit!important;}

/* ===================================================================
   CyberZeus — modern branded preloader (overrides old dot loader)
   =================================================================== */
.optech-preloader-wrap{
  background:radial-gradient(120% 120% at 50% 40%,#12151c 0%,#0b0e13 60%,#070a0e 100%)!important;
  display:flex!important;align-items:center;justify-content:center;
  transition:opacity .5s ease,visibility .5s ease;
}
.optech-preloader-wrap.cz-done{opacity:0;visibility:hidden;pointer-events:none;}
/* hide the legacy 4 dots */
.optech-preloader-wrap .optech-preloader{width:auto!important;height:auto!important;}
.optech-preloader-wrap .optech-preloader div{display:none!important;}
/* branded loader: lightning logo + rotating ring */
.optech-preloader-wrap .optech-preloader::before{
  content:"";display:block;width:96px;height:96px;border-radius:50%;
  border:3px solid rgba(226,31,54,.18);border-top-color:#e21f36;
  animation:cz-spin .9s linear infinite;margin:0 auto;
}
.optech-preloader-wrap .optech-preloader::after{
  content:"";position:absolute;top:50%;left:50%;width:52px;height:52px;
  transform:translate(-50%,-50%);
  background:url('../images/favicon_updated.png') center/contain no-repeat;
  filter:drop-shadow(0 4px 14px rgba(226,31,54,.45));
  animation:cz-pulse 1.4s ease-in-out infinite;
}
@keyframes cz-spin{to{transform:rotate(360deg)}}
@keyframes cz-pulse{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}

/* =====================================================================
   ONE FONT — unify the whole site on Sora (icons fully preserved)
   Appended last so it wins the cascade. v3
   ===================================================================== */
:root{
  --cz-display:'Sora',sans-serif;
  --cz-body:'Sora',sans-serif;
  --cz-mono:'Sora',sans-serif;
}
body, h1,h2,h3,h4,h5,h6, p, a, ul,ol,li, span, div, label, blockquote,
input, textarea, select, button, table,td,th, small, strong, em, b, figcaption,
.cz-eyebrow,.optech-hero-content h1,.optech-hero-content h5,.shorttitle-lft,
.optech-section-title h2,.optech-default-content h2,.optech-cta-content h2,
.btn,.optech-default-btn,.card-link,.quick-link,.nav-tab,.cat-tab,
.cz-cta h2,.cz-feature h4,.cz-step h4,.cz-band h2,.cz-chip,.hero-tag,.hero-desc{
  font-family:'Sora',sans-serif !important;
}
/* keep display headings strong, single family */
h1,h2,h3,.optech-hero-content h1{ letter-spacing:-.5px; font-weight:700; text-transform:none; }
.optech-hero-content h1{ font-size:clamp(46px,7vw,88px); line-height:1.02; }

/* ---- PROTECT ICON FONTS (must stay after the Sora rule) ---- */
i,.fa,.fas,.far,.fab,.fal,.fad,.fa-solid,.fa-regular,.fa-light,.fa-thin,.fa-duotone,
[class^="fa-"],[class*=" fa-"]{
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands","Font Awesome 5 Free","Font Awesome 5 Brands"!important;
}
.fab,.fa-brands,i.fa-brands{ font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands"!important; }
[class^="ri-"],[class*=" ri-"]{ font-family:"remixicon"!important; }
.material-icons{ font-family:"Material Icons"!important; }
.material-symbols-outlined{ font-family:"Material Symbols Outlined"!important; }

/* ---- consistent, enterprise CTA styling site-wide ---- */
.cz-cta,.optech-cta-section,.cta-section{ border-radius:24px; }
.optech-default-btn{ letter-spacing:.3px; }

/* =====================================================================
   CyberZeus — Advanced Breadcrumb (.czbc)  v1
   ===================================================================== */
.czbc{
  position:relative;z-index:20;
  background:linear-gradient(100deg,#0b0e13 0%,#12151c 55%,#1a0e12 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  overflow:hidden;
}
.czbc::before{ /* animated brand sheen */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 180% at 88% 0%,rgba(226,31,54,.16),transparent 55%);
}
.czbc__inner{
  max-width:1290px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.czbc__left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0;}
/* category pill */
.czbc__pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Sora',sans-serif!important;font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;white-space:nowrap;color:#fff;
  border:1px solid transparent;
}
.czbc__pill i{font-size:12px;}
.czbc__pill--product{background:linear-gradient(120deg,#e21f36,#b0121f);box-shadow:0 6px 18px rgba(226,31,54,.35);}
.czbc__pill--service{background:linear-gradient(120deg,#1f6feb,#153e9e);box-shadow:0 6px 18px rgba(31,111,235,.32);}
.czbc__pill--company{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#e8eaf0;}
/* trail */
.czbc__trail{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap;min-width:0;}
.czbc__crumb{display:flex;align-items:center;gap:8px;font-family:'Sora',sans-serif!important;font-size:14px;}
.czbc__home{color:#e21f36;font-size:13px;}
.czbc__crumb a{color:#aeb4c2;text-decoration:none;transition:color .2s ease,transform .2s ease;}
.czbc__crumb a:hover{color:#fff;transform:translateY(-1px);}
.czbc__crumb.is-current span{color:#fff;font-weight:700;}
.czbc__sep{color:#4a5061;display:flex;align-items:center;font-size:12px;}
.czbc__sep i{opacity:.7;}
/* patent-pending badge */
.czbc__patent{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:'Sora',sans-serif!important;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#eef304;padding:8px 15px;border-radius:999px;
  background:linear-gradient(120deg,rgba(238,243,4,.10),rgba(238,243,4,.03));
  border:1px solid rgba(238,243,4,.42);position:relative;overflow:hidden;
}
.czbc__patent i{font-size:14px;color:#eef304;animation:czbc-spin 6s linear infinite;}
.czbc__patent::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(238,243,4,.28),transparent);
  transform:skewX(-18deg);animation:czbc-shine 3.4s ease-in-out infinite;
}
@keyframes czbc-spin{to{transform:rotate(360deg)}}
@keyframes czbc-shine{0%{left:-60%}55%,100%{left:130%}}
/* responsive */
@media(max-width:640px){
  .czbc__inner{padding:12px 16px;gap:10px;}
  .czbc__crumb{font-size:12.5px;}
  .czbc__pill{font-size:10px;padding:6px 11px;}
  .czbc__patent span{display:none;} /* keep the seal icon only on tiny screens */
  .czbc__patent{padding:8px 10px;}
}

/* =====================================================================
   Contrast fix — readable text on colored CTA/bands (v1)
   The CTA subtext was inheriting the theme's dark body colour on the
   red banner. Force white on headings/paragraphs only (button untouched).
   ===================================================================== */
.cz-cta h2, .cz-cta h3, .cz-cta p, .cz-cta .lead{ color:#ffffff !important; }
.cz-cta p{ opacity:.96; }
.cz-band h2, .cz-band h3, .cz-band h4, .cz-band p{ color:#ffffff !important; }
/* keep the white pill button's label brand-red on its white background */
.cz-cta .optech-default-btn,
.cz-cta .optech-default-btn .btn-wraper{ background:#ffffff !important; color:#E21F36 !important; }

/* =====================================================================
   FIX: breadcrumb was rendering behind the fixed header (overlap).
   Push its content below the nav; its dark bar backs the nav so the
   menu stays readable. Then reclaim the hero's nav-clearance padding
   on breadcrumb pages only (home has no .czbc, so it's untouched). v1
   ===================================================================== */
:root{ --cz-hdr-h:92px; }
@media (max-width:991px){ :root{ --cz-hdr-h:74px; } }
@media (max-width:575px){ :root{ --cz-hdr-h:64px; } }
.czbc{ position:relative; z-index:20; }
.czbc__inner{ padding-top:calc(var(--cz-hdr-h) + 18px) !important; padding-bottom:16px !important; }
.czbc ~ .optech-hero-section2{ padding-top:66px !important; }
.czbc ~ section.hero,
.czbc ~ .services-hero{ padding-top:70px !important; }

/* Let the hero background image show through the moving animation */
.optech-hero-section2 .cz-hero-video{ opacity:.34 !important; }

/* =====================================================================
   Real video background + animation in front (asset-management etc.)
   Layer order: bg video (0) -> particle animation (1) -> veil (2) -> text (3)
   ===================================================================== */
.cz-hero-bgvideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.cz-has-bgvideo .cz-hero-video{ z-index:1 !important; opacity:.30 !important; mix-blend-mode:screen; }
.cz-has-bgvideo .cz-hero-veil{ z-index:2 !important; background:linear-gradient(90deg,rgba(8,10,16,.78),rgba(8,10,16,.30)) !important; }
.cz-has-bgvideo .container{ position:relative; z-index:3; }

/* =====================================================================
   Product preview showcase (dashboard/UI mockups in page content)
   ===================================================================== */
.cz-shot-sub{max-width:640px;margin:14px auto 0;color:#8a93a6;font-size:16px;line-height:1.6}
.cz-shot{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(8,10,16,.45);background:#0d1017}
.cz-shot img{display:block;width:100%;height:auto}
.cz-shot-main{border-radius:20px;box-shadow:0 40px 90px rgba(8,10,16,.55)}
.cz-shot-main::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);border-radius:20px}
.cz-shot:hover{transform:translateY(-4px);transition:transform .3s ease}