/* ==========================================================================
   Mat Media - Liquid Glass system (public site)
   Frosted blur + saturation, inner specular edge, moving liquid sheen and a
   pointer-following highlight (--gx/--gy set by mm-fx.js). Progressive: falls
   back to a soft translucent card when backdrop-filter is unsupported.
   ========================================================================== */
:root{--mmg-blue:38,120,239;--mmg-red:239,38,38}

.mm-glass{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.18));
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 18px 40px rgba(31,45,90,.14),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.25),
    inset 0 0 22px rgba(255,255,255,.28);
  transition:transform .45s cubic-bezier(.22,.9,.3,1),box-shadow .45s ease;
}
/* pointer-following specular highlight */
.mm-glass::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(260px circle at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.75),rgba(255,255,255,0) 60%);
  opacity:.55;transition:opacity .4s ease;
}
.mm-glass:hover::before{opacity:.95}
/* slow liquid sheen sweeping across the surface */
.mm-glass::after{
  content:"";position:absolute;top:-40%;left:-60%;width:45%;height:180%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:rotate(18deg);animation:mmgSheen 7s ease-in-out infinite;
}
@keyframes mmgSheen{0%,55%{left:-60%}100%{left:140%}}
@media (hover:hover){.mm-glass:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(31,45,90,.2),inset 0 1px 0 #fff,inset 0 0 26px rgba(255,255,255,.4)}}

/* dark / colored backdrop variant (over the brand gradient) */
.mm-glass-dark{
  background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.07));
  border-color:rgba(255,255,255,.35);
  box-shadow:0 18px 40px rgba(10,20,60,.28),inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 24px rgba(255,255,255,.1);
}
.mm-glass-dark::before{background:radial-gradient(260px circle at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.5),rgba(255,255,255,0) 60%)}

/* floating liquid orbs (decor behind glass) */
.mm-orb{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;z-index:0;opacity:.55;
  animation:mmOrb 14s ease-in-out infinite}
.mm-orb.b{background:rgb(var(--mmg-blue))}
.mm-orb.r{background:rgb(var(--mmg-red))}
.mm-orb.p{background:#8b5cf6}
@keyframes mmOrb{
  0%,100%{transform:translate(0,0) scale(1) rotate(0)}
  33%{transform:translate(40px,-30px) scale(1.15) rotate(20deg)}
  66%{transform:translate(-30px,25px) scale(.92) rotate(-15deg)}
}

/* ---------- Existing elements upgraded to glass ---------- */
/* Hero trust row */
.hero-trust-row{
  display:inline-flex !important;padding:10px 20px 10px 12px;border-radius:60px;
  background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.3));
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 12px 30px rgba(31,45,90,.12),inset 0 1px 0 #fff;
}
.hero-badge-img{width:200px !important}

/* Expand Services button: liquid glass pill + brand-gradient text */
.mm-fixed-toggle-btn{
  background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) padding-box,
             linear-gradient(120deg,#2678ef,#ef2626) border-box !important;
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 8px 24px rgba(var(--mmg-blue),.18),inset 0 1px 0 rgba(255,255,255,.95) !important;
  padding:10px 24px !important;
}
.mm-grad-text{
  background:linear-gradient(120deg,#2678ef 0%,#ef2626 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:mmgText 5s linear infinite;
  position:relative;z-index:2;
}
@keyframes mmgText{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.mm-fixed-toggle-btn:hover .mm-grad-text{-webkit-text-fill-color:#fff;color:#fff;background:none;animation:none}

/* Secondary pill buttons get a frosted fill */
.octf-btn-secondary:not(.mm-btn-gradient){
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

@media (prefers-reduced-motion:reduce){
  .mm-glass::after,.mm-orb,.mm-grad-text{animation:none !important}
}

/* ===== Liquid-glass finish for every brand-gradient block (portfolio, stats band, footer) ===== */
.mm-animated-gradient{
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 2px 0 rgba(255,255,255,.85),inset 0 -2px 6px rgba(255,255,255,.22),inset 0 0 90px rgba(255,255,255,.12),0 24px 60px rgba(38,120,239,.22);
}
.mm-animated-gradient::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.12) 55%,rgba(255,255,255,0) 100%),
    radial-gradient(70% 90% at 10% 0%,rgba(255,255,255,.32),transparent 60%),
    radial-gradient(60% 70% at 100% 100%,rgba(255,255,255,.16),transparent 65%),
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);
  background-size:100% 280px,100% 100%,100% 100%,260% 100%;background-position:0 0,0 0,0 0,-30% 0;background-repeat:no-repeat;
}
@media (prefers-reduced-motion:reduce){.mm-animated-gradient::after{animation:none}}

/* ===== FAQ-GLASS-START (remove this whole block to revert) : glass only on the opened answer area ===== */
#faq .acc-item.active .acc-content{
  position:relative;overflow:hidden;isolation:isolate;margin-top:10px;padding:16px 22px !important;border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(226,236,255,.42) 55%,rgba(255,226,230,.4)) !important;
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 30px rgba(38,60,160,.12),inset 0 1.5px 0 #fff,inset 0 -2px 8px rgba(120,150,255,.1),inset 0 0 20px rgba(255,255,255,.5);
  animation:mmFaqOpen .45s cubic-bezier(.22,.9,.3,1) both;
}
#faq .acc-item.active .acc-content:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,0) 50%),radial-gradient(70% 90% at 8% 0%,rgba(255,255,255,.7),transparent 62%),linear-gradient(110deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);
  background-size:100% 100%,100% 100%,260% 100%;background-position:0 0,0 0,-130% 0;background-repeat:no-repeat;animation:mmFaqSheen 6s ease-in-out infinite;
}
#faq .acc-item.active .acc-content p{margin:0}
@keyframes mmFaqOpen{from{opacity:0;transform:translateY(-6px)}}
@keyframes mmFaqSheen{0%,45%{background-position:0 0,0 0,-130% 0}100%{background-position:0 0,0 0,130% 0}}
@media (prefers-reduced-motion:reduce){#faq .acc-item.active .acc-content,#faq .acc-item.active .acc-content:before{animation:none}}
/* ===== FAQ-GLASS-END ===== */

/* Header logo: square favicon was forced to 50x32 (stretched) -> keep true proportions */
.elementor-3772 .elementor-element.elementor-element-58a4eb50 .site__logo img.default_logo{width:38px!important;height:38px!important;max-width:none;object-fit:contain}

/* ===== LEFT SIDEBAR NAV (liquid glass, sticky). Revert: delete this block + restore header.php ===== */
#mm-side{display:none}
@media (min-width:1025px){
  #site-header .elementor-element-595a81d7,#site-header .elementor-element-4583b31e{display:none!important}
  #site-header .elementor-element-1c2ee495{width:100%!important}
  #mm-side{display:block;position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:9980}
  #mm-side .mm-side-in{position:relative;display:flex;flex-direction:column;gap:4px;width:56px;padding:10px 7px;border-radius:30px;overflow:hidden;white-space:nowrap;
    background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(240,243,252,.5));-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);
    border:1px solid rgba(38,60,160,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),inset 0 2px 0 #fff,inset 0 -2px 6px rgba(38,60,160,.07),0 22px 50px -16px rgba(38,60,160,.4);
    transition:width .35s cubic-bezier(.22,.9,.3,1)}
  #mm-side:hover .mm-side-in,#mm-side:focus-within .mm-side-in{width:214px}
  #mm-side .mm-side-in:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0) 40%)}
  #mm-side .mm-side-logo{position:relative;display:flex;align-items:center;gap:12px;height:40px;padding:0 4px;text-decoration:none;color:#12163a;font-weight:800;font-size:15px}
  #mm-side .mm-side-logo img{width:32px;height:32px;object-fit:contain;flex:none}
  #mm-side .mm-side-logo span,#mm-side .mm-si b{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s}
  #mm-side:hover .mm-side-logo span,#mm-side:hover .mm-si b,#mm-side:focus-within .mm-side-logo span,#mm-side:focus-within .mm-si b{opacity:1;transform:none;transition-delay:.08s}
  #mm-side .mm-side-sep{height:1px;margin:4px 6px 6px;background:linear-gradient(90deg,transparent,rgba(38,60,160,.18),transparent)}
  #mm-side .mm-si{position:relative;display:flex;align-items:center;gap:12px;height:42px;padding:0 3px;border-radius:50px;text-decoration:none!important;color:#5b6176!important;font-size:14px;font-weight:600;border:1px solid transparent;transition:background .3s,color .3s,box-shadow .3s}
  #mm-side .mm-si i{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:50%}
  #mm-side .mm-si b{font-weight:600}
  #mm-side .mm-si:hover{background:rgba(255,255,255,.75);color:#12163a!important;box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(38,60,160,.35)}
  #mm-side .mm-si.mm-on{color:#12163a!important;background:linear-gradient(120deg,rgba(38,120,239,.2),rgba(239,38,38,.15)),rgba(255,255,255,.8);border-color:rgba(255,255,255,.95);box-shadow:inset 0 1.5px 0 #fff,0 8px 18px -8px rgba(38,60,160,.45)}
  #mm-side .mm-si.mm-on i{background:linear-gradient(120deg,#2678ef,#ef2626);color:#fff;box-shadow:0 6px 14px -4px rgba(120,60,200,.6)}
  #mm-side .mm-si.mm-on:before{content:"";position:absolute;left:-11px;top:50%;width:3px;height:18px;margin-top:-9px;border-radius:3px;background:linear-gradient(180deg,#2678ef,#ef2626);box-shadow:0 0 10px rgba(239,38,38,.6)}
}

/* sidebar: Client Portal (top item) - isti font kao ostali, ikonica sa gradijent prstenom (razlicito od aktivne stavke) */
@media (min-width:1025px){
  #mm-side .mm-si.mm-portal{color:#5b6176!important;background:transparent;border-color:transparent}
  #mm-side .mm-si.mm-portal b{font-weight:600}
  #mm-side .mm-si.mm-portal i{width:34px;height:34px;box-sizing:border-box;border:1.5px solid transparent;color:#12163a;box-shadow:none;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#2678ef,#ef2626) border-box}
  #mm-side .mm-si.mm-portal:hover{background:rgba(255,255,255,.75);color:#12163a!important}
}

/* header na desktopu je prazan -> sakriven; Client Portal je u sidebaru i u hero-u */
@media (min-width:1025px){
  #site-header{display:none!important}
  #mm-side .mm-si.mm-portal b{background:linear-gradient(120deg,#2678ef,#ef2626);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}