/* SmartNet preloader — animated logo on brand navy. Pure CSS; preloader.js removes it when the page is ready.
   If JavaScript never runs, the CSS fallback below fades it out after 4 s anyway. */
#sn-preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #04437a 0%, #02325B 45%, #011a31 100%);
  color: #fff; font-family: Poppins, system-ui, sans-serif; transition: opacity .55s ease, visibility .55s; animation: sn-pl-fallback .6s ease 4s forwards; }
#sn-preloader.done { opacity: 0; visibility: hidden; }
@keyframes sn-pl-fallback { to { opacity: 0; visibility: hidden; } }
.sn-pl { display: grid; justify-items: center; gap: 22px; }
.sn-pl-stage { position: relative; width: 230px; height: 230px; display: grid; place-items: center; }
.sn-pl-ring { position: absolute; inset: 0; animation: sn-spin 2.4s linear infinite; }
.sn-pl-ring.r2 { inset: 18px; animation-duration: 3.4s; animation-direction: reverse; }
.sn-pl-ring circle { fill: none; stroke-linecap: round; }
.sn-pl-ring .a { stroke: #E10706; stroke-width: 3.2; stroke-dasharray: 120 400; animation: sn-dash 2.4s ease-in-out infinite; }
.sn-pl-ring .b { stroke: rgba(125, 176, 234, .85); stroke-width: 2; stroke-dasharray: 60 300; }
.sn-pl-ring .t { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
@keyframes sn-spin { to { transform: rotate(360deg); } }
@keyframes sn-dash { 0% { stroke-dasharray: 20 500; } 50% { stroke-dasharray: 190 330; } 100% { stroke-dasharray: 20 500; } }
.sn-pl-logo { position: relative; width: 150px; height: 50px; animation: sn-pop .9s cubic-bezier(.2, .9, .25, 1.2) both; }
.sn-pl-logo img { width: 100%; height: 100%; display: block; }
/* light sweep, masked to the logo's own pixels */
.sn-pl-logo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.95) 48%, transparent 66%);
  background-size: 250% 100%; -webkit-mask: url(/img/brand/smartnet-logo-white.png) center / contain no-repeat; mask: url(/img/brand/smartnet-logo-white.png) center / contain no-repeat;
  animation: sn-shine 1.8s ease-in-out .5s infinite; }
@keyframes sn-pop { 0% { opacity: 0; transform: scale(.6); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes sn-shine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
.sn-pl-word { display: flex; gap: .08em; font-size: 13px; font-weight: 600; letter-spacing: .42em; padding-left: .42em; }
.sn-pl-word span { opacity: 0; transform: translateY(8px); animation: sn-up .5s ease forwards; }
.sn-pl-word span.red { color: #ff4d4d; }
@keyframes sn-up { to { opacity: 1; transform: none; } }
.sn-pl-bar { width: 160px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.sn-pl-bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #E10706, #ff6b6b); animation: sn-bar 1.1s ease-in-out infinite; }
@keyframes sn-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  .sn-pl-ring, .sn-pl-ring .a, .sn-pl-logo, .sn-pl-logo::after, .sn-pl-bar i { animation: none; }
  .sn-pl-word span { animation: none; opacity: 1; transform: none; }
}