*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#102d55;background:#fff}.top{background:#0769d8;color:white;padding:8px 4%;font-size:13px}.top span{float:right}header{height:88px;display:flex;align-items:center;gap:24px;padding:12px 4%;border-bottom:1px solid #e8eef7;background:#fff}.brand{display:flex;align-items:center;gap:10px;min-width:255px}.brand img{width:190px;height:64px;object-fit:contain;object-position:center}.brand-copy{display:none}.brand b{display:block;font-size:27px;color:#0867d0}.brand small{display:block;letter-spacing:5px;color:#123d73;font-size:11px}.brand em{font-style:normal;font-size:8px;color:#23456e}.search{display:flex;flex:1;max-width:560px}.search input,.tracking input{flex:1;padding:14px;border:1px solid #cdd9e9;border-radius:9px 0 0 9px}.search button,.tracking button{width:55px;border:0;background:#0874e8;color:#fff;border-radius:0 9px 9px 0}.account,.cart{font-size:14px;position:relative}.cart sup{background:red;color:#fff;border-radius:50%;padding:2px 6px;position:absolute;top:-9px;left:18px}nav{display:flex;align-items:center;gap:8px;padding:9px 3%;box-shadow:0 2px 8px #dce5f2;position:sticky;top:0;background:#fff;z-index:5}nav a{padding:11px 16px;color:#102d55;text-decoration:none;font-weight:700;font-size:13px;border-radius:9px}nav a.active,nav a:hover{background:#0874e8;color:#fff}.wa{margin-left:auto!important;background:#0a8f53!important;color:#fff!important}.hero{min-height:380px;background:linear-gradient(115deg,#06377d,#0877e8);color:white;padding:42px 5%;display:flex;overflow:hidden}.heroText{width:56%;z-index:1}.hero h1{font-size:47px;margin:0;font-weight:900}.hero h2{font-size:27px;margin:4px 0}.hero mark{background:none;color:#ffe000}.hero p{font-size:16px}.trust{display:flex;gap:25px;margin:25px 0}.trust span{display:flex;gap:8px;align-items:center}.trust b{font-size:11px}.buttons a,.service a,.promo a,.cctvGrid a{display:inline-block;background:#0792f7;color:#fff;padding:13px 20px;border-radius:9px;text-decoration:none;font-weight:700;margin-right:8px}.buttons .light{background:#fff;color:#123d73}.heroVisual{flex:1;position:relative;font-size:150px;display:flex;align-items:center;justify-content:center}.tower{font-size:130px}.cameras{position:absolute;font-size:45px;right:5%;bottom:15%}.section{padding:28px 3%}.sectionHead{display:flex;justify-content:space-between;align-items:center}.sectionHead h2{border-left:5px solid #0874e8;padding-left:10px;margin:0 0 17px}.sectionHead a{color:#0874e8;text-decoration:none;font-size:12px;font-weight:700}.categories{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.categories div{border:1px solid #e1e8f2;border-radius:9px;text-align:center;padding:16px;background:#fff;box-shadow:0 2px 8px #edf1f7;font-size:32px}.categories b{display:block;font-size:12px;margin-top:8px}.products{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.product{border:1px solid #dde6f1;border-radius:10px;padding:10px;position:relative;box-shadow:0 3px 12px #edf1f7;background:#fff}.product .pic{height:120px;background:#f5f8fc;border-radius:7px;display:grid;place-items:center;font-size:70px}.product label{position:absolute;top:18px;left:16px;background:#ef2b2b;color:#fff;padding:4px 7px;border-radius:5px;font-size:10px}.product h3{font-size:13px;margin:10px 0 5px}.product p{font-size:10px;color:#64748b;height:28px}.product strong{display:block;color:#e21d24;font-size:15px}.product small{display:block;color:#555;margin:7px 0}.product i{color:#0b8a4a;font-style:normal}.product button{width:100%;padding:9px;border:0;background:#0874e8;color:#fff;border-radius:7px;font-weight:700}.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:15px 3%}.service{background:linear-gradient(120deg,#06448f,#087ae8);border-radius:12px;color:#fff;padding:24px;display:flex;overflow:hidden}.service h2{margin:0}.checks{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:18px 0;font-size:12px}.servicePic{font-size:130px;display:grid;place-items:center}.muted{font-size:12px;color:#667}.cctvGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cctvGrid article{border:1px solid #e1e8f2;border-radius:9px;padding:17px;text-align:center}.cctvGrid strong{display:block;color:#e21d24;margin:8px 0}.cctvGrid a{font-size:11px;padding:9px;margin:0}.lower{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:15px;padding:30px 3%}.promo{background:#fff0d7;border-radius:12px;padding:25px}.promo span{background:#e52b20;color:white;padding:5px 15px;border-radius:5px;font-weight:900}.promo h2{font-size:25px}.promo a{background:#ef3a24}.tracking{border:1px solid #e0e7f1;border-radius:12px;padding:20px}.tracking>div:first-of-type{display:flex}.status{display:flex;align-items:center;justify-content:space-between;margin-top:25px;color:#0874e8}.status i{height:3px;background:#b7cce7;flex:1}.status small{display:block;color:#445;font-size:9px}.why p{background:#f4f8fd;border-radius:20px;padding:9px 14px;margin:7px}.why small{display:block;margin-left:25px;color:#718096}footer{background:#034783;color:#fff;padding:30px 5%;display:grid;grid-template-columns:1.3fr 1.5fr 1fr 1fr 1.5fr;gap:25px;font-size:12px}.footerBrand img{width:180px;height:72px;object-fit:contain;object-position:left center;display:block;margin-bottom:6px}.footerBrand small{display:block}.copyright{grid-column:1/-1;border-top:1px solid #4773a2;padding-top:15px} @media(max-width:900px){.top span{display:none}header{height:auto;flex-wrap:wrap}.brand{min-width:200px}.brand img{width:165px;height:56px}.search{order:3;flex-basis:100%;max-width:none}nav{overflow:auto}.heroText{width:100%}.heroVisual{display:none}.categories{grid-template-columns:repeat(4,1fr)}.products{grid-template-columns:repeat(3,1fr)}.split,.lower{grid-template-columns:1fr}.cctvGrid{grid-template-columns:repeat(2,1fr)}footer{grid-template-columns:1fr 1fr}}@media(max-width:560px){.brand img{width:145px;height:50px}.hero h1{font-size:32px}.trust{gap:10px;flex-wrap:wrap}.categories{grid-template-columns:repeat(2,1fr)}.products{grid-template-columns:repeat(2,1fr)}.product .pic{height:90px}.cctvGrid{grid-template-columns:1fr 1fr}footer{grid-template-columns:1fr}.top{font-size:10px}}

.web-auth{display:flex;gap:7px;align-items:center;white-space:nowrap}.web-auth a{display:inline-flex;align-items:center;justify-content:center;padding:9px 11px;border-radius:8px;text-decoration:none;font-size:12px;font-weight:800;border:1px solid #d6e2f2}.web-auth .login-tech{background:#0874e8;color:#fff;border-color:#0874e8}.web-auth .login-admin{background:#f4f8fd;color:#123d73}.web-auth a:hover{filter:brightness(.97)}@media(max-width:900px){.web-auth{order:4;width:100%;justify-content:flex-end}.web-auth a{flex:1;max-width:180px}}@media(max-width:560px){.web-auth{justify-content:stretch}.web-auth a{max-width:none;font-size:11px;padding:8px 7px}}

.web-auth{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.web-auth button{border:0;cursor:pointer;font:inherit;padding:9px 12px;border-radius:10px}.web-auth .login-tech{background:#e9f4ff;color:#0757a6}.web-auth .login-admin{background:#edf8ef;color:#166534}.web-login-modal{position:fixed;inset:0;background:rgba(5,20,45,.58);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999}.web-login-modal.open{display:flex}.web-login-box{width:min(430px,100%);background:#fff;border-radius:22px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.25);position:relative}.web-login-close{position:absolute;right:14px;top:12px;border:0;background:#eef4fb;border-radius:50%;width:36px;height:36px;font-size:22px;cursor:pointer}.web-login-icon{font-size:34px}.web-login-box h2{margin:8px 0 5px}.web-login-box p{margin:0 0 18px;color:#64748b}.web-login-role{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.web-login-role button{border:1px solid #d7e2f0;background:#f7fafc;padding:11px;border-radius:12px;cursor:pointer;font-weight:700}.web-login-role button.active{background:#e8f2ff;border-color:#2487e8;color:#0b63b5}.web-login-box label{display:block;font-weight:700;margin:10px 0;color:#334155}.web-login-box input{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid #d8e1ec;border-radius:10px;padding:12px;font:inherit}.web-login-submit{width:100%;border:0;border-radius:12px;background:#147de5;color:#fff;padding:13px;font-weight:800;font-size:15px;cursor:pointer;margin-top:10px}.web-login-note{display:block;color:#64748b;margin-top:14px;line-height:1.5}@media(max-width:800px){.web-auth{display:none}.web-login-role{grid-template-columns:1fr}.web-login-box{padding:22px}}
/* v1.55: single public login button */
.web-auth{display:flex!important;gap:8px;align-items:center;white-space:nowrap;flex-wrap:nowrap}
.web-auth .login-single{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;font:inherit;padding:10px 14px;border-radius:10px;background:#0874e8;color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(8,116,232,.18)}
.web-auth .login-single:hover{filter:brightness(.97)}
@media(max-width:900px){.web-auth{order:4;width:auto;justify-content:flex-end}.web-auth .login-single{padding:9px 12px;font-size:12px}}
@media(max-width:560px){.web-auth{width:100%;justify-content:stretch}.web-auth .login-single{width:100%;font-size:12px;padding:9px 10px}}


/* Connected service status lookup */
.statusResult{margin-top:14px;border-radius:16px;padding:14px 16px;background:rgba(255,255,255,.82);border:1px solid rgba(20,70,150,.10);display:none;text-align:left;box-shadow:0 10px 30px rgba(18,55,120,.08)}
.statusResult.success,.statusResult.error{display:block}.statusResult.error{background:#fff5f5;border-color:#ffd5d5;color:#8a2020}.statusResult.error small{display:block;margin-top:5px;color:#a15b5b}.statusFound{display:flex;gap:12px;align-items:center}.statusIcon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#edf5ff;font-size:21px}.statusFound div:nth-child(2){display:flex;flex-direction:column;gap:2px}.statusFound b{font-size:12px;color:#5d6d86}.statusFound strong{font-size:19px;color:#0b4aa2}.statusFound small{font-size:12px;color:#65738a;line-height:1.45}.statusMeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.statusMeta span{background:#f7faff;border-radius:10px;padding:9px;font-size:12px;color:#45556f}.statusMeta b{display:block;color:#7890ad;font-size:10px;text-transform:uppercase;margin-bottom:3px}.statusHistory{margin-top:13px;padding-top:11px;border-top:1px dashed #d7e1ef}.statusHistory h4{margin:0 0 9px;font-size:13px;color:#183e72}.statusHistoryItem{position:relative;padding:0 0 10px 15px;border-left:2px solid #dce8f7}.statusHistoryItem:before{content:'';position:absolute;left:-5px;top:2px;width:8px;height:8px;border-radius:50%;background:#2878d7}.statusHistoryItem b{font-size:12px;color:#1c4f8f}.statusHistoryItem small{margin-left:7px;color:#8190a4;font-size:10px}.statusHistoryItem p{margin:3px 0 0;font-size:11px;color:#65738a;line-height:1.4}.status span.active{color:#1467c7}.status span.current{font-weight:800;transform:scale(1.05)}
@media(max-width:700px){.statusMeta{grid-template-columns:1fr}.statusFound strong{font-size:16px}}
/* v1.60: Cek Status Servis dipindahkan ke area hero, menggantikan ilustrasi */
.heroVisual{align-items:center;justify-content:center;padding:0 0 0 28px}
.heroTracking{width:min(100%,560px);background:rgba(255,255,255,.97);color:#102d55;border:1px solid rgba(255,255,255,.55);border-radius:18px;padding:24px;box-shadow:0 18px 45px rgba(0,25,80,.28)}
.heroTracking h2{margin:0 0 7px;font-size:25px;color:#103b70}
.heroTracking p{margin:0 0 16px;color:#5d6b7d;font-size:13px}
.heroTrackInput{display:flex;width:100%}
.heroTrackInput input{flex:1;min-width:0;padding:14px;border:1px solid #cdd9e9;border-radius:10px 0 0 10px;font-size:14px;outline:none}
.heroTrackInput button{border:0;background:#0874e8;color:#fff;padding:0 20px;border-radius:0 10px 10px 0;font-weight:800;cursor:pointer}
.heroStatus{margin-top:20px}
.heroTracking .statusResult{margin-top:14px}
.lower{grid-template-columns:1fr 1fr}
@media(max-width:900px){.hero{padding:30px 4%;display:block}.heroText{width:100%}.heroVisual{padding:24px 0 0}.heroTracking{width:100%}.lower{grid-template-columns:1fr}}
@media(max-width:560px){.heroTracking{padding:17px}.heroTracking h2{font-size:20px}.heroTrackInput input{font-size:12px}.heroTrackInput button{padding:0 13px}.heroStatus{font-size:11px}.heroStatus small{font-size:8px}}

/* v1.61 compact service tracking result */
.heroTracking{width:min(100%,600px);padding:24px}
.heroTrackInput{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:stretch}
.heroTrackInput input{min-width:0}
.statusResult{margin-top:12px;border-radius:16px;padding:14px 15px;background:#fff;border:1px solid #dce8f7;box-shadow:0 8px 24px rgba(18,55,120,.08);text-align:left}
.statusResult.success,.statusResult.error{display:block}
.statusCompactHead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.statusCompactTitle{display:flex;flex-direction:column;gap:2px;min-width:0}
.statusCompactTitle span{font-size:10px;color:#7890ad;text-transform:uppercase;font-weight:700}
.statusCompactTitle b{font-size:17px;color:#123f78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statusBadge{padding:7px 11px;border-radius:999px;background:#19b66b;color:#fff;font-size:12px;white-space:nowrap}
.statusCompactMeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid #edf2f8}
.statusCompactMeta span{font-size:11px;color:#44566f;min-width:0;line-height:1.35}
.statusCompactMeta b,.statusNote b{display:block;font-size:9px;color:#7890ad;text-transform:uppercase;margin-bottom:2px}
.statusNote{margin-top:10px;padding:9px 11px;border-radius:11px;background:#eef7ff;color:#294d78;font-size:11px;line-height:1.4}
.statusNote span{display:block}
.statusErrorIcon{width:34px;height:34px;border-radius:50%;background:#ffe8e8;color:#c62828;display:grid;place-items:center;font-weight:900;font-size:18px;flex:0 0 auto}
.statusResult.error{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;background:#fff7f7;border-color:#ffd9d9;color:#8a2020}
.statusResult.error b{font-size:13px}.statusResult.error small{display:block;margin-top:3px;color:#a15b5b;line-height:1.35}
@media(max-width:700px){.heroTrackInput{grid-template-columns:1fr}.statusCompactMeta{grid-template-columns:1fr 1fr}.statusCompactHead{grid-template-columns:auto minmax(0,1fr)}.statusBadge{grid-column:2;justify-self:start}.heroTracking{padding:17px}}
@media(max-width:480px){.statusCompactMeta{grid-template-columns:1fr}.statusCompactTitle b{font-size:15px}}

/* v1.62 ultra-compact status result */
.heroVisual{align-items:center;min-height:0;height:auto}
.heroTracking{align-self:center;height:auto;min-height:0;max-height:none;overflow:visible}
.heroTracking .statusResult{height:auto;min-height:0;max-height:none;overflow:hidden}
.heroTracking .statusResult.error{display:flex;align-items:center;gap:9px;padding:10px 12px;margin-top:10px}
.heroTracking .statusResult.error .statusErrorIcon{width:28px;height:28px;font-size:15px}
.heroTracking .statusResult.error b{font-size:12px}
.heroTracking .statusResult.error small{font-size:10px;margin-top:2px;line-height:1.25}
.heroTracking .statusResult.success{padding:12px 13px}
.statusCompactMeta{margin-top:8px;padding-top:8px}
.statusNote{margin-top:8px;padding:7px 9px}
.category-card{border:0;background:#fff;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;gap:10px;min-height:72px;padding:14px 16px;border-radius:18px;box-shadow:0 8px 24px rgba(15,43,77,.08);transition:transform .2s ease,box-shadow .2s ease}
.category-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,43,77,.14)}
.category-card b{font-weight:700}

/* v1.86 MOBILE APP-LIKE RESPONSIVE */
@media (max-width:700px){
  html{scroll-behavior:smooth} body{font-size:13px;overflow-x:hidden}.top{padding:7px 12px;font-size:10px;white-space:nowrap;overflow:hidden}.top span{display:none}
  header{position:sticky;top:0;z-index:1000;display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);box-shadow:0 3px 18px rgba(15,43,77,.10)}
  header .brand{min-width:0}.brand img{width:38px;height:38px}.brand-copy em{display:none}.brand-copy b{font-size:13px}.brand-copy small{font-size:8px}.search{grid-column:1/-1;display:flex;width:100%;order:3}.search input{height:42px;border-radius:12px 0 0 12px;font-size:13px}.search button{height:42px;min-width:48px;border-radius:0 12px 12px 0}.account{display:none}.cart{font-size:12px}.cart b{display:none}.web-auth{grid-column:2;grid-row:1}.web-auth .login-single{padding:9px 10px;font-size:11px}
  nav{position:sticky;top:76px;z-index:900;overflow-x:auto;white-space:nowrap;padding:8px 10px;gap:7px;scrollbar-width:none}nav::-webkit-scrollbar{display:none}nav a{padding:8px 11px;font-size:11px;border-radius:999px}.hero{padding:24px 14px 18px;display:flex;flex-direction:column;gap:16px}.heroText h1{font-size:26px}.heroText h2{font-size:24px;line-height:1.12}.heroText p{font-size:12px}.trust{display:grid;grid-template-columns:1fr 1fr;gap:8px}.trust span{padding:9px;font-size:11px;border-radius:12px}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.buttons a{font-size:11px;padding:11px 8px;text-align:center}.heroVisual{padding:0}.heroTracking{border-radius:16px;padding:15px}.heroTracking h2{font-size:18px}.heroTrackInput{grid-template-columns:1fr}.heroTrackInput input,.heroTrackInput button{width:100%;box-sizing:border-box;border-radius:10px;height:43px}.heroTrackInput button{padding:0}.section{padding:18px 12px}.sectionHead{gap:8px}.sectionHead h2{font-size:19px}.sectionHead a{font-size:10px}.categories{grid-template-columns:repeat(2,1fr);gap:9px}.category-card{min-height:58px;padding:10px;border-radius:14px;font-size:12px}.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product{padding:10px;border-radius:14px}.product .pic{height:82px;border-radius:11px;font-size:34px}.product h3{font-size:12px;line-height:1.3}.product p{font-size:10px;min-height:27px}.product strong{font-size:13px}.product small{font-size:9px}.buy-product{font-size:10px!important;padding:9px 6px!important;border-radius:9px!important;width:100%}.split,.lower{grid-template-columns:1fr;gap:12px;padding:12px}.service{border-radius:16px;padding:18px}.servicePic{display:none}.checks{grid-template-columns:1fr 1fr!important;font-size:10px!important}.cctvGrid{grid-template-columns:1fr 1fr;gap:9px}.cctvGrid article{padding:12px;border-radius:13px}.cctvGrid strong{font-size:13px}.promo,.why{border-radius:16px;padding:18px}.promo h2{font-size:22px}.why h2{font-size:19px}footer{grid-template-columns:1fr 1fr;padding:24px 14px;font-size:11px}.footerBrand{grid-column:1/-1}.copyright{grid-column:1/-1}
}
@media(max-width:380px){.products{grid-template-columns:1fr 1fr}.heroText h1{font-size:23px}.heroText h2{font-size:21px}.categories{grid-template-columns:1fr 1fr}.cctvGrid{grid-template-columns:1fr}.buttons{grid-template-columns:1fr}.web-auth .login-single{font-size:10px;padding:8px}}


/* v1.80 MOBILE APP-LIKE BOTTOM NAVIGATION */
.mobile-bottom-nav,.mobile-more-sheet{display:none}
@media(max-width:700px){
  body{padding-bottom:76px}
  nav:not(.mobile-bottom-nav){display:none!important}
  .mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:5000;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:7px 6px;background:rgba(5,91,160,.96);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.22);border-radius:24px;box-shadow:0 14px 35px rgba(0,34,76,.28),inset 0 1px 0 rgba(255,255,255,.16)}
  .mobile-nav-item{min-width:0;min-height:56px;border:0;background:transparent;color:#dceeff;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:17px;font:inherit;cursor:pointer;padding:5px 2px;-webkit-tap-highlight-color:transparent}
  .mobile-nav-item span{font-size:21px;line-height:1}.mobile-nav-item b{font-size:9px;line-height:1.1;white-space:nowrap}.mobile-nav-item.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .mobile-more-sheet{position:fixed;inset:0;z-index:6000;display:none}.mobile-more-sheet.open{display:block}.mobile-more-backdrop{position:absolute;inset:0;background:rgba(3,20,42,.52);backdrop-filter:blur(4px)}
  .mobile-more-panel{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;color:#12355f;border-radius:24px;padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.28);animation:mobileSheetUp .18s ease-out}.mobile-more-head{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 12px;border-bottom:1px solid #e7eef7}.mobile-more-head b{font-size:15px}.mobile-more-head button{width:34px;height:34px;border:0;border-radius:50%;background:#eef4fb;color:#12355f;font-size:22px;cursor:pointer}.mobile-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding-top:12px}.mobile-more-grid a,.mobile-more-grid button{min-height:70px;border:1px solid #e3ebf5;background:#f8fbff;border-radius:15px;text-decoration:none;color:#12355f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:22px;cursor:pointer}.mobile-more-grid span{font-size:10px;font-weight:800}.mobile-more-grid a:hover,.mobile-more-grid button:hover{background:#edf6ff}
  header{top:0}.search{margin-top:1px}.hero{scroll-margin-top:10px}.section,.split,.lower,footer{scroll-margin-top:10px}
}
@media(max-width:380px){.mobile-bottom-nav{left:7px;right:7px;bottom:7px;border-radius:21px}.mobile-nav-item{min-height:53px}.mobile-nav-item span{font-size:19px}.mobile-nav-item b{font-size:8px}.mobile-more-grid{gap:7px}}
@keyframes mobileSheetUp{from{transform:translateY(18px);opacity:.7}to{transform:translateY(0);opacity:1}}
body.mobile-sheet-open{overflow:hidden}


/* v1.86 — website mobile navigation matches POS mobile style; desktop nav unchanged */
@media(max-width:700px){
  body{overflow-x:hidden!important;padding-bottom:88px!important}
  nav:not(.mobile-bottom-nav){display:none!important}
  .mobile-bottom-nav{left:10px!important;right:10px!important;bottom:8px!important;height:64px!important;padding:5px!important;gap:3px!important;border-radius:22px!important;background:rgba(7,91,190,.97)!important;box-shadow:0 12px 35px rgba(0,43,105,.3)!important}
  .mobile-nav-item{border-radius:16px!important;min-height:54px!important}
  .mobile-nav-item.active{background:#fff!important;color:#075fd0!important}
}
@media(min-width:701px){.mobile-bottom-nav,.mobile-more-sheet{display:none!important}}

/* v1.87 — WEBSITE MOBILE SAME APP STYLE */
@media (max-width:700px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{background:#f4f8fd!important;color:#102f55!important;padding-bottom:92px!important}
  .top{display:none!important}
  header{height:62px!important;min-height:62px!important;padding:8px 12px!important;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;background:linear-gradient(135deg,#075cc8,#0aa3e8)!important;color:#fff!important;border:0!important;position:sticky!important;top:0!important;z-index:1200!important}
  header .brand{min-width:0!important;flex:1!important;background:transparent!important;padding:0!important;margin:0!important;gap:7px!important}
  header .brand img{width:86px!important;height:42px!important;background:#fff!important;border-radius:10px!important;padding:3px!important;object-fit:contain!important}
  header .brand-copy{display:none!important}
  .search,.account,.cart{display:none!important}
  .web-auth{width:auto!important;order:0!important}
  .web-auth .login-single{width:auto!important;padding:9px 11px!important;border-radius:12px!important;font-size:11px!important;background:rgba(255,255,255,.15)!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)!important}
  nav:not(.mobile-bottom-nav){display:none!important}
  .hero{margin:10px 10px 12px!important;border-radius:22px!important;min-height:300px!important;padding:24px 18px!important}
  .heroText h1{font-size:27px!important;line-height:1.12!important}
  .heroText h2{font-size:21px!important}
  .heroText p{font-size:13px!important}
  .products,.categories,.cctvGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .mobile-bottom-nav{display:grid!important;position:fixed!important;left:10px!important;right:10px!important;bottom:8px!important;z-index:99999!important;grid-template-columns:repeat(5,1fr)!important;gap:3px!important;padding:5px!important;background:rgba(7,91,190,.97)!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:22px!important;box-shadow:0 12px 35px rgba(0,43,105,.3)!important;backdrop-filter:blur(16px)!important}
  .mobile-bottom-nav .mobile-nav-item{min-height:58px!important;border:0!important;background:transparent!important;color:#e9f4ff!important;border-radius:16px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:5px 2px!important}
  .mobile-bottom-nav .mobile-nav-item span{font-size:20px!important;line-height:1!important}
  .mobile-bottom-nav .mobile-nav-item b{font-size:9px!important;line-height:1.1!important;white-space:nowrap!important}
  .mobile-bottom-nav .mobile-nav-item.active{background:#fff!important;color:#075fd0!important}
  .mobile-more-sheet.open{display:block!important}
  .mobile-more-panel{margin-bottom:82px!important}
}
@media (min-width:701px){
  .mobile-bottom-nav,.mobile-more-sheet{display:none!important}
}

/* v1.90 FINAL MOBILE WEBSITE NAV FIX
   Keep bottom navigation compact; it must never become a full-screen overlay. */
@media (max-width:700px){
  body{padding-bottom:88px!important}
  .mobile-bottom-nav{
    display:grid!important;
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:8px!important;
    width:auto!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:5px!important;
    overflow:hidden!important;
    align-items:stretch!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    z-index:99999!important;
  }
  .mobile-bottom-nav .mobile-nav-item{
    min-height:0!important;
    height:54px!important;
    max-height:54px!important;
    box-sizing:border-box!important;
    margin:0!important;
  }
  .mobile-more-sheet{display:none!important}
  .mobile-more-sheet.open{display:block!important}
  .mobile-more-panel{max-height:70vh!important;overflow:auto!important}
}
@media(max-width:380px){
  .mobile-bottom-nav{height:60px!important;min-height:60px!important;max-height:60px!important;left:7px!important;right:7px!important;bottom:6px!important}
  .mobile-bottom-nav .mobile-nav-item{height:50px!important;max-height:50px!important}
}


/* v1.91 — HARD FIX: website mobile bottom navigation is compact and never covers content */
@media (max-width:700px){
  body{padding-bottom:76px!important;overflow-x:hidden!important}
  .mobile-bottom-nav{
    position:fixed!important;
    inset:auto 10px 8px 10px!important;
    width:auto!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    gap:3px!important;
    padding:5px!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    transform:none!important;
    z-index:99999!important;
  }
  .mobile-bottom-nav .mobile-nav-item{
    width:100%!important;height:54px!important;min-height:54px!important;max-height:54px!important;
    margin:0!important;padding:4px 2px!important;box-sizing:border-box!important;
  }
  .mobile-more-sheet{display:none!important;position:fixed!important;inset:0!important}
  .mobile-more-sheet.open{display:block!important}
  .mobile-more-panel{position:absolute!important;left:10px!important;right:10px!important;bottom:78px!important;max-height:70vh!important;overflow:auto!important;margin:0!important}
}
@media(max-width:380px){
  body{padding-bottom:70px!important}
  .mobile-bottom-nav{inset:auto 7px 6px 7px!important;height:58px!important;min-height:58px!important;max-height:58px!important}
  .mobile-bottom-nav .mobile-nav-item{height:48px!important;min-height:48px!important;max-height:48px!important}
}
@media(min-width:701px){.mobile-bottom-nav,.mobile-more-sheet{display:none!important}}


/* v1.92 — FINAL MOBILE NAV + ONLINE-FIRST STORAGE AUDIT PATCH */
@media (max-width:700px){
  /* Generic mobile nav sets top:76px; explicitly cancel it for the fixed bottom bar. */
  .mobile-bottom-nav{
    position:fixed!important;
    top:auto!important;
    right:10px!important;
    bottom:8px!important;
    left:10px!important;
    inset:auto 10px 8px 10px!important;
    width:auto!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    transform:none!important;
  }
}
@media (max-width:380px){
  .mobile-bottom-nav{top:auto!important;bottom:6px!important;inset:auto 7px 6px 7px!important;height:58px!important;min-height:58px!important;max-height:58px!important}
}

/* v1.94 RESPONSIVE FINAL — MOBILE BOTTOM NAV + FLUID VIEWPORT */
html{width:100%;min-width:0;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{width:100%;min-width:0;max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;height:auto}
*{min-width:0}

@media (max-width:700px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))!important}
  /* Public website navigation MUST stay at the bottom on every phone. */
  body > .mobile-bottom-nav,
  .mobile-bottom-nav{
    position:fixed!important;
    top:auto!important;
    right:max(7px,env(safe-area-inset-right))!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;
    left:max(7px,env(safe-area-inset-left))!important;
    width:auto!important;
    height:clamp(58px,16vw,66px)!important;
    min-height:58px!important;
    max-height:66px!important;
    margin:0!important;
    transform:none!important;
    z-index:999999!important;
  }
  .mobile-bottom-nav .mobile-nav-item{height:100%!important;min-height:0!important;max-height:none!important}
  .mobile-bottom-nav .mobile-nav-item span{font-size:clamp(18px,5vw,22px)!important}
  .mobile-bottom-nav .mobile-nav-item b{font-size:clamp(8px,2.3vw,10px)!important}
  header{max-width:100vw!important}
  .hero{width:auto!important;max-width:calc(100vw - 20px)!important;margin-left:10px!important;margin-right:10px!important}
  .section,.split,.lower{width:100%;max-width:100%;padding-left:clamp(14px,4vw,28px);padding-right:clamp(14px,4vw,28px)}
  .categories,.products,.cctvGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .product,.categories div,.cctvGrid article{min-width:0}
  .product h3,.product p{overflow-wrap:anywhere}
  .buttons{display:flex;flex-wrap:wrap;gap:8px}
  .buttons a{margin-right:0;flex:1 1 140px;text-align:center}
}

@media (max-width:420px){
  .hero{min-height:0!important;padding:22px 15px!important}
  .hero h1{font-size:clamp(24px,8vw,30px)!important}
  .hero h2{font-size:clamp(18px,5.5vw,22px)!important}
  .hero p{font-size:clamp(12px,3.5vw,14px)!important}
  .section{padding-top:22px;padding-bottom:22px}
  .categories,.products,.cctvGrid{gap:8px!important}
}

@media (min-width:701px){
  body{padding-bottom:0!important}
  .mobile-bottom-nav,.mobile-more-sheet{display:none!important}
}
/* v2.00: hero service status CTA above shopping/consultation buttons */
.hero-action-wrap{display:flex;flex-direction:column;gap:10px;max-width:560px}
.status-hero-button{display:block;text-align:center;background:#fff;color:#075fd0;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:800;box-shadow:0 5px 18px rgba(0,0,0,.12)}
.hero-action-wrap .buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hero-action-wrap .buttons a{margin-right:0;text-align:center}
@media(max-width:560px){.hero-action-wrap{width:100%;gap:8px}.status-hero-button{font-size:12px;padding:10px 12px}.hero-action-wrap .buttons{grid-template-columns:1fr 1fr;gap:7px}.hero-action-wrap .buttons a{font-size:10px;padding:10px 6px}}

/* v2.03 — Homepage redesign: remove product categories and promote service status */
.hero{min-height:340px;display:flex;align-items:center;justify-content:flex-start;background:linear-gradient(120deg,#053a86 0%,#0768d4 58%,#0b91ef 100%);position:relative}
.hero:after{content:"";position:absolute;right:-90px;top:-120px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 68%);pointer-events:none}
.heroText{width:min(900px,100%);position:relative;z-index:2}
.hero .buttons{margin-top:24px}
.status-section{margin:0;padding:26px 3% 18px;background:linear-gradient(180deg,#f5f9ff 0%,#fff 100%);scroll-margin-top:88px}
.status-section-head{max-width:1200px;margin:0 auto 15px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.status-kicker{display:inline-block;font-size:10px;font-weight:900;letter-spacing:1.2px;color:#0874e8;background:#e7f2ff;border-radius:999px;padding:6px 10px;margin-bottom:7px}
.status-section-head h2{margin:0;color:#123e74;font-size:25px}
.status-section-head p{margin:5px 0 0;color:#62748c;font-size:12px}
.status-see-all{color:#0874e8;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
.status-layout{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.95fr);gap:14px;align-items:stretch}
.status-tracker-card{background:#fff;border:1px solid #dce8f7;border-radius:18px;padding:17px;box-shadow:0 12px 32px rgba(17,68,130,.08)}
.status-tracker-title{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.status-search-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eaf4ff;color:#0874e8;font-size:27px;font-weight:900}
.status-tracker-title b{display:block;color:#123e74;font-size:17px}.status-tracker-title small{display:block;margin-top:3px;color:#74859a;font-size:10px}
.status-tracker-card .heroTrackInput{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:stretch}
.status-tracker-card .heroTrackInput input{border-radius:10px!important;border:1px solid #d3e0ef;padding:12px;font-size:12px;min-width:0}
.status-tracker-card .heroTrackInput button{border-radius:10px!important;padding:0 17px;min-height:43px;font-size:11px}
.status-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.status-quick-grid article{display:flex;align-items:center;gap:10px;padding:14px;border-radius:15px;border:1px solid #dce8f7;background:#fff;box-shadow:0 8px 22px rgba(17,68,130,.06)}
.status-quick-grid article:nth-child(1){background:#eef7ff}.status-quick-grid article:nth-child(2){background:#fff8e9}.status-quick-grid article:nth-child(3){background:#eefbf5}.status-quick-grid article:nth-child(4){background:#f3f0ff}
.status-quick-grid article>span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.75);font-size:21px;flex:0 0 auto}
.status-quick-grid b{display:block;font-size:12px;color:#173c6c}.status-quick-grid small{display:block;margin-top:3px;font-size:9px;color:#6b7c91;line-height:1.3}
.status-section .statusResult{margin-top:10px}
.status-section .statusCompactTitle b{font-size:15px}
.status-section .statusNote{background:#f0f7ff}
.status-section + .section{padding-top:22px}
@media(max-width:900px){
  .hero{min-height:0}.heroText{width:100%}.status-layout{grid-template-columns:1fr}.status-section-head{align-items:flex-start}.status-quick-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .hero{margin:10px 10px 12px!important;border-radius:22px!important;padding:24px 18px!important}
  .hero:after{width:260px;height:260px;right:-120px;top:-90px}
  .hero .buttons{margin-top:18px}
  .status-section{padding:18px 12px 10px}
  .status-section-head{display:block;margin-bottom:11px}.status-section-head h2{font-size:20px}.status-section-head p{font-size:11px}.status-see-all{display:none}
  .status-layout{gap:10px}.status-tracker-card{padding:13px;border-radius:16px}.status-tracker-title{margin-bottom:10px}.status-search-icon{width:36px;height:36px;font-size:23px}.status-tracker-title b{font-size:15px}.status-tracker-title small{font-size:9px}
  .status-tracker-card .heroTrackInput{grid-template-columns:1fr 1fr}.status-tracker-card .heroTrackInput button{grid-column:1/-1;height:40px}.status-tracker-card .heroTrackInput input{height:40px;padding:10px;font-size:11px}
  .status-quick-grid{grid-template-columns:1fr 1fr;gap:7px}.status-quick-grid article{padding:10px;border-radius:13px;gap:7px}.status-quick-grid article>span{width:32px;height:32px;font-size:17px;border-radius:10px}.status-quick-grid b{font-size:10px}.status-quick-grid small{font-size:8px}
  .section{padding-top:18px}
}
@media(max-width:380px){
  .status-section{padding-left:10px;padding-right:10px}.status-tracker-card .heroTrackInput{grid-template-columns:1fr}.status-tracker-card .heroTrackInput button{grid-column:auto}.status-quick-grid article{padding:8px}.status-quick-grid b{font-size:9px}.status-quick-grid small{font-size:7.5px}
}

/* v2.06 — responsive footer repair + address polish */
.site-footer{
  position:relative;
  overflow:hidden;
  margin-top:28px;
  padding:0;
  color:#fff;
  background:linear-gradient(145deg,#063f78 0%,#075ca8 48%,#0879d7 100%);
  border-top:1px solid rgba(255,255,255,.14);
}
.site-footer:before,.site-footer:after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(2px)}
.site-footer:before{width:520px;height:260px;right:-180px;top:-100px;background:rgba(45,168,255,.18)}
.site-footer:after{width:420px;height:220px;left:-180px;bottom:-120px;background:rgba(0,184,255,.14)}
.footer-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:42px 28px 24px}
.footer-brand-block{text-align:left;max-width:780px}
.footer-logo-wrap{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:18px;padding:8px 16px;box-shadow:0 12px 30px rgba(0,20,60,.22);margin-bottom:12px}
.footer-logo-wrap img{width:170px;height:62px;object-fit:contain}
.footer-brand-block h2{margin:0;font-size:24px;font-weight:900;letter-spacing:.2px}
.footer-tagline{margin:4px 0 8px;font-size:13px;font-weight:800;letter-spacing:.8px;color:#dff3ff}
.footer-services{margin:0;color:#eaf6ff;font-size:13px;line-height:1.6}
.footer-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.footer-info-card{display:flex;gap:14px;align-items:flex-start;min-height:110px;padding:18px;border:1px solid rgba(255,255,255,.34);border-radius:20px;background:rgba(255,255,255,.96);color:#143a65;box-shadow:0 12px 28px rgba(0,25,70,.16)}
.footer-info-card b{display:block;font-size:16px;margin-bottom:7px;color:#103a69}
.footer-info-card p{margin:0;font-size:13px;line-height:1.55;color:#46637e}
.footer-icon{width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#eaf5ff;font-size:21px}
.open-badge{display:inline-block;margin-top:8px;padding:5px 10px;border-radius:999px;background:#e7fff0;color:#138344;font-size:10px;font-weight:900}
.footer-wa{display:inline-block;margin-top:9px;color:#0875d1;text-decoration:none;font-weight:900;font-size:11px}
.social-mini{display:block;margin-top:8px;font-weight:900;color:#0875d1;font-size:15px}
.footer-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;padding:16px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.footer-trust span{text-align:center;font-size:11px;font-weight:800;color:#f2fbff}
.site-footer .copyright{text-align:center;margin-top:18px;color:#dceeff;font-size:11px}
@media(max-width:700px){
  .site-footer{margin-top:16px}
  .footer-inner{padding:30px 14px 18px}
  .footer-brand-block{text-align:left}
  .footer-logo-wrap{border-radius:14px;padding:6px 12px}
  .footer-logo-wrap img{width:150px;height:54px}
  .footer-brand-block h2{font-size:21px}
  .footer-tagline{font-size:11px}
  .footer-services{font-size:10px;line-height:1.5}
  .footer-info-grid{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .footer-info-card{min-height:0;padding:14px;border-radius:16px;gap:11px}
  .footer-info-card b{font-size:14px}
  .footer-info-card p{font-size:11px}
  .footer-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px;font-size:18px}
  .footer-trust{grid-template-columns:1fr 1fr;gap:8px;padding:13px 0}
  .footer-trust span{font-size:9px}
  .site-footer .copyright{font-size:9px;margin-top:14px}
}
@media(max-width:380px){
  .footer-inner{padding-left:11px;padding-right:11px}
  .footer-info-card{padding:12px}
  .footer-info-card p{font-size:10px}
  .footer-services{font-size:9px}
  .footer-trust span{font-size:8px}
}


/* v2.06 FINAL FOOTER OVERRIDES — neutralize legacy footer grid rules */
.site-footer{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  margin:28px 0 0!important;
  box-sizing:border-box!important;
}
.site-footer .footer-inner{
  display:block!important;
  width:100%!important;
  max-width:1180px!important;
  min-width:0!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
.site-footer .footer-brand-block,
.site-footer .footer-info-grid,
.site-footer .footer-trust,
.site-footer .copyright{min-width:0!important;box-sizing:border-box!important}
.site-footer .footer-info-card{width:100%!important;box-sizing:border-box!important;min-width:0!important}
@media(max-width:700px){
  .site-footer{margin:16px 0 0!important}
  .site-footer .footer-inner{padding:26px 14px calc(86px + env(safe-area-inset-bottom))!important}
  .site-footer .footer-info-grid{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .site-footer .footer-info-card{display:flex!important;width:100%!important;max-width:none!important}
  .site-footer .footer-brand-block{width:100%!important}
  .site-footer .footer-trust{width:100%!important}
}
@media(min-width:701px){
  .site-footer .footer-inner{padding:42px 28px 28px!important}
  .site-footer .footer-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* v2.23 — HEADER/HERO VISUAL REFINEMENT ONLY
   LOCK: no business logic, data flow, API, authentication, POS, database or other modules changed. */

/* Desktop: clean topbar/header/navigation without overlap */
@media (min-width:701px){
  body{overflow-x:hidden;background:#f5f9ff}
  .top{
    min-height:42px;box-sizing:border-box;padding:10px 4vw;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    background:linear-gradient(90deg,#086bd8,#0a8fe8);color:#fff;
    font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;
  }
  .top span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;opacity:.96}
  header{
    min-height:112px;height:auto;box-sizing:border-box;padding:16px 4vw;
    display:grid;grid-template-columns:minmax(190px,250px) minmax(260px,1fr) auto auto auto;
    align-items:center;gap:14px;background:#fff;border-bottom:1px solid #e5edf7;
    box-shadow:0 5px 20px rgba(16,55,100,.08);position:relative;z-index:1000;
  }
  header .brand{min-width:0;display:flex;align-items:center;gap:10px}
  header .brand img{width:205px;height:76px;object-fit:contain;display:block;background:#fff}
  header .brand-copy{display:none}
  header .search{display:flex;min-width:0;width:100%;height:48px}
  header .search input{width:100%;min-width:0;height:48px;box-sizing:border-box;border:1px solid #d8e5f3;border-right:0;border-radius:14px 0 0 14px;padding:0 16px;font-size:14px;outline:none;background:#f8fbff}
  header .search button{width:56px;height:48px;border:0;border-radius:0 14px 14px 0;background:#0875dc;color:#fff;font-size:20px;cursor:pointer}
  header .account,header .cart,header .web-auth{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px}
  header .account{padding:0 14px;border:1px solid #dce8f5;border-radius:14px;background:#fff;color:#0c4e93;white-space:nowrap}
  header .cart{padding:0 14px;border:1px solid #dce8f5;border-radius:14px;background:#fff;color:#0c4e93;white-space:nowrap}
  header .cart sup{position:absolute;right:5px;top:2px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#e21c2a;color:#fff;font-size:11px;line-height:18px;text-align:center}
  header .web-auth{display:none}
  nav:not(.mobile-bottom-nav){
    position:relative;z-index:900;display:flex;align-items:stretch;gap:4px;padding:8px 3.2vw;
    background:#fff;border-bottom:1px solid #dce8f5;box-shadow:0 8px 22px rgba(16,55,100,.10);
    overflow-x:auto;scrollbar-width:none;white-space:nowrap;
  }
  nav:not(.mobile-bottom-nav)::-webkit-scrollbar{display:none}
  nav:not(.mobile-bottom-nav) a{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-height:52px;
    padding:0 16px;border-radius:12px;color:#153d6b;text-decoration:none;font-weight:800;font-size:14px;
    transition:.18s ease;
  }
  nav:not(.mobile-bottom-nav) a:hover{background:#eef6ff;color:#075fd0}
  nav:not(.mobile-bottom-nav) a.active{background:#0875dc;color:#fff;box-shadow:0 7px 18px rgba(8,117,220,.22)}
  nav:not(.mobile-bottom-nav) a.wa{margin-left:auto;background:#0b9a55;color:#fff;padding:0 22px;border-radius:13px}
  nav:not(.mobile-bottom-nav) a.wa:hover{background:#07874a;color:#fff}
  .hero{
    width:calc(100% - 48px);max-width:1500px;margin:18px auto 0;min-height:430px;
    padding:58px 5.2%;box-sizing:border-box;border-radius:24px;overflow:hidden;
    background:linear-gradient(120deg,#053b88 0%,#0768d4 57%,#0b9cf2 100%);
    box-shadow:0 18px 42px rgba(0,56,130,.20);
  }
  .heroText{max-width:820px}
  .heroText h1{font-size:clamp(42px,4.2vw,68px);line-height:1;margin:0 0 14px;letter-spacing:-1.5px}
  .heroText h2{font-size:clamp(23px,2.2vw,34px);line-height:1.18;margin:0 0 18px}
  .heroText p{font-size:clamp(15px,1.25vw,19px);line-height:1.5;margin:0 0 24px}
  .trust{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:14px;max-width:760px}
  .trust span{display:flex;align-items:center;gap:8px;padding:10px 8px;font-size:14px;line-height:1.25}
  .trust span b{font-weight:800}
  .buttons{display:grid;grid-template-columns:220px 220px;gap:12px;margin-top:22px}
  .buttons a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 14px;border-radius:13px;text-decoration:none;font-weight:800;font-size:15px;box-sizing:border-box}
}

/* Mobile: compact header + search + clean bottom navigation + hero */
@media (max-width:700px){
  body{background:#f4f8fd!important;overflow-x:hidden!important;padding-bottom:88px!important}
  .top{display:flex!important;min-height:34px!important;height:34px!important;box-sizing:border-box!important;padding:7px 12px!important;font-size:10px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;background:linear-gradient(90deg,#086bd8,#0a8fe8)!important;color:#fff!important}
  .top span{display:none!important}
  header{
    position:sticky!important;top:0!important;z-index:3000!important;height:auto!important;min-height:0!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;gap:8px!important;
    padding:9px 12px 10px!important;background:#fff!important;color:#12355f!important;border-bottom:1px solid #e1ebf6!important;
    box-shadow:0 5px 18px rgba(15,55,100,.10)!important;
  }
  header .brand{min-width:0!important;display:flex!important;align-items:center!important}
  header .brand img{width:118px!important;height:50px!important;object-fit:contain!important;background:#fff!important;padding:0!important;border-radius:0!important}
  header .brand-copy{display:none!important}
  header .search{grid-column:1/-1!important;grid-row:2!important;display:flex!important;width:100%!important;height:42px!important;order:0!important}
  header .search input{height:42px!important;border:1px solid #d7e4f2!important;border-right:0!important;border-radius:12px 0 0 12px!important;padding:0 12px!important;font-size:12px!important;background:#f8fbff!important}
  header .search button{height:42px!important;width:46px!important;border-radius:0 12px 12px 0!important;background:#0875dc!important;color:#fff!important;border:0!important}
  header .account{display:flex!important;grid-column:2!important;grid-row:1!important;width:46px!important;height:42px!important;min-height:42px!important;padding:0!important;border:1px solid #dce8f5!important;border-radius:12px!important;background:#fff!important;color:#075fd0!important;font-size:0!important}
  header .account b{display:none!important}
  header .account:first-letter{font-size:19px!important}
  header .cart{display:flex!important;grid-column:3!important;grid-row:1!important;width:46px!important;height:42px!important;min-height:42px!important;padding:0!important;border:1px solid #dce8f5!important;border-radius:12px!important;background:#fff!important;color:#075fd0!important;font-size:18px!important}
  header .cart b{display:none!important}
  header .cart sup{right:-3px!important;top:-5px!important}
  header .web-auth{display:none!important}
  nav:not(.mobile-bottom-nav){display:none!important}
  .hero{
    width:auto!important;max-width:none!important;margin:10px 10px 12px!important;min-height:0!important;
    padding:28px 18px 22px!important;border-radius:22px!important;box-sizing:border-box!important;
    box-shadow:0 12px 28px rgba(0,56,130,.16)!important;
  }
  .heroText{width:100%!important}
  .heroText h1{font-size:clamp(28px,8vw,38px)!important;line-height:1.05!important;letter-spacing:-.5px!important;margin-bottom:12px!important}
  .heroText h2{font-size:clamp(19px,5.5vw,25px)!important;line-height:1.16!important;margin-bottom:13px!important}
  .heroText p{font-size:12px!important;line-height:1.45!important;margin-bottom:16px!important}
  .trust{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .trust span{padding:9px 7px!important;font-size:10px!important;line-height:1.15!important}
  .buttons{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:17px!important}
  .buttons a{min-height:46px!important;padding:0 8px!important;font-size:11px!important;border-radius:12px!important}
  .mobile-bottom-nav{left:10px!important;right:10px!important;bottom:8px!important;height:64px!important;min-height:64px!important;max-height:64px!important;z-index:5000!important}
}
@media(max-width:380px){
  header .brand img{width:104px!important;height:46px!important}
  .hero{padding:24px 15px 20px!important}
  .heroText h1{font-size:25px!important}
  .heroText h2{font-size:19px!important}
  .buttons{grid-template-columns:1fr!important}
}

/* v2.25 VISUAL-ONLY (unchanged design): redesigned header/hero per approved draft */
.top{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:9px clamp(14px,4vw,48px);white-space:nowrap;overflow:hidden}
.top span{float:none;display:block;overflow:hidden;text-overflow:ellipsis}
header{height:auto;min-height:104px;display:grid;grid-template-columns:minmax(220px,270px) minmax(220px,1fr) auto auto auto;align-items:center;gap:16px;padding:14px clamp(14px,4vw,48px)}
.brand{min-width:0;justify-content:flex-start}.brand img{width:210px;height:76px}.search{max-width:620px;justify-self:center;width:100%}.account,.cart,.web-auth{justify-self:center}.cart{padding:11px 13px;border:1px solid #dce6f3;border-radius:12px;background:#fff}.account{padding:11px 13px;border:1px solid #dce6f3;border-radius:12px;background:#fff}
nav{padding:9px clamp(12px,3vw,40px);gap:5px;box-shadow:0 4px 14px rgba(22,65,120,.12);z-index:20;overflow-x:auto;scrollbar-width:none}nav::-webkit-scrollbar{display:none}nav a{display:flex;align-items:center;justify-content:center;min-height:54px;padding:9px 13px;white-space:nowrap;font-size:13px}.wa{min-width:170px}
.hero{min-height:430px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:20px;padding:42px clamp(20px,5vw,72px);position:relative;background:linear-gradient(120deg,#053a86 0%,#0768d4 58%,#0b91ef 100%);overflow:hidden}.heroText{width:100%;max-width:820px}.hero h1{font-size:clamp(38px,4vw,58px);line-height:1.02}.hero h2{font-size:clamp(22px,2.1vw,31px);line-height:1.15}.hero p{font-size:clamp(14px,1.2vw,18px)}.trust{gap:clamp(12px,2vw,28px);flex-wrap:wrap}.heroVisual{display:flex;align-items:center;justify-content:center;min-width:0;min-height:320px;position:relative;z-index:1}.heroProductsImage{display:block;width:min(100%,620px);max-height:390px;height:auto;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,25,80,.30));mix-blend-mode:screen}
@media(max-width:1100px){header{grid-template-columns:minmax(190px,230px) 1fr auto auto;gap:10px}.web-auth{display:none}.brand img{width:185px}.hero{grid-template-columns:1fr .8fr}.heroProductsImage{max-height:330px}.heroVisual{min-height:270px}nav a{padding-inline:10px}}
@media(max-width:700px){.top{min-height:38px;font-size:10px;padding:8px 12px}.top span{display:none}header{grid-template-columns:1fr auto auto;min-height:92px;padding:10px 12px;gap:7px}.brand img{width:150px;height:52px}.search{grid-column:1/-1;grid-row:2;max-width:none;order:5}.search input{padding:11px;font-size:12px}.search button{width:48px}.account{padding:8px;font-size:11px}.account small{font-size:8px}.cart{padding:8px;font-size:11px}.cart b{font-size:10px}nav{position:sticky;top:0;padding:6px 8px;gap:4px}nav a{min-width:68px;min-height:48px;padding:7px 8px;font-size:10px;white-space:normal;text-align:center}nav a:nth-child(n+9):not(.wa){display:none}.wa{min-width:112px!important;font-size:10px!important}.hero{grid-template-columns:1fr;min-height:0;padding:30px 18px 24px;gap:8px}.heroText{max-width:none}.hero h1{font-size:32px}.hero h2{font-size:21px}.hero p{font-size:13px;line-height:1.45}.trust{gap:10px;margin:18px 0}.trust span{font-size:18px}.trust b{font-size:9px}.heroVisual{min-height:210px;order:2}.heroProductsImage{width:100%;max-width:430px;max-height:245px}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.buttons a{margin:0;text-align:center;padding:11px 7px;font-size:11px}}
@media(max-width:380px){header{grid-template-columns:1fr auto}.account{display:none}.brand img{width:140px}.hero h1{font-size:28px}.hero h2{font-size:19px}.heroProductsImage{max-height:205px}.buttons{grid-template-columns:1fr}}

/* v2.32 — WEBSITE SLIDESHOW + WELCOME MARQUEE */
.marquee-wrap{overflow:hidden;white-space:nowrap;position:relative;padding:8px 0!important}.marquee-track{display:flex;width:max-content;animation:arsylaMarquee 24s linear infinite}.marquee-track span{display:block;padding:0 32px;font-weight:700}.marquee-wrap:hover .marquee-track{animation-play-state:paused}@keyframes arsylaMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-slideshow{padding:0!important;min-height:430px!important;position:relative!important;display:block!important;border-radius:0 0 18px 18px;overflow:hidden!important}.slide-track{position:relative;width:100%;height:430px}.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s ease;display:flex;align-items:center;justify-content:center;background:#075fc9}.hero-slide.is-active{opacity:1;visibility:visible}.hero-slide>img{width:100%;height:100%;object-fit:cover;display:block}.hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,32,90,.78),rgba(0,45,120,.28) 55%,rgba(0,0,0,.08))}.slide-caption{position:absolute;z-index:2;left:6%;top:50%;transform:translateY(-50%);max-width:58%;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.25)}.slide-caption h1{font-size:clamp(30px,4vw,60px);margin:0 0 8px;font-weight:900}.slide-caption h2{font-size:clamp(18px,2.2vw,31px);margin:0 0 10px}.slide-caption p{font-size:clamp(13px,1.3vw,18px);margin:0 0 20px}.slide-caption .buttons a{margin-right:8px}.slide-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(0,25,75,.68);color:#fff;font-size:38px;line-height:1;cursor:pointer}.slide-arrow.prev{left:18px}.slide-arrow.next{right:18px}.slide-dots{position:absolute;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:7px}.slide-dots button{width:10px;height:10px;border:0;border-radius:50%;background:rgba(255,255,255,.55);padding:0;cursor:pointer}.slide-dots button.active{width:26px;border-radius:8px;background:#fff}@media(max-width:700px){.marquee-track{animation-duration:18s}.hero-slideshow,.slide-track{min-height:270px!important;height:270px!important}.slide-caption{left:7%;max-width:78%}.slide-caption h1{font-size:26px}.slide-caption h2{font-size:17px}.slide-caption p{font-size:11px}.slide-caption .buttons{display:none}.slide-arrow{width:38px;height:38px;font-size:30px}.slide-arrow.prev{left:8px}.slide-arrow.next{right:8px}}


/* v2.33 — CLEAN SLIDESHOW: IMAGE RIGHT / BLANK LEFT + MOBILE-SPECIFIC ART */
.hero-slideshow{min-height:0!important;padding:0!important;background:#0875dc!important;border-radius:0 0 18px 18px!important}
.hero-slideshow .slide-track{height:clamp(360px,31vw,520px)!important;width:100%;position:relative;overflow:hidden}
.hero-slideshow .hero-slide{position:absolute;inset:0;display:block!important;background:linear-gradient(120deg,#0b65c8 0%,#2b9fe9 100%)!important}
.hero-slideshow .hero-slide picture,.hero-slideshow .hero-slide img{display:block;width:100%;height:100%}
.hero-slideshow .hero-slide img{object-fit:cover;object-position:center center}
.hero-slideshow .hero-slide:after{display:none!important}
.hero-slideshow .slide-caption{display:none!important}
.hero-slideshow .slide-arrow{width:44px;height:44px;top:50%;font-size:34px;background:rgba(0,50,120,.68);box-shadow:0 5px 16px rgba(0,30,90,.22)}
.hero-slideshow .slide-dots{bottom:14px}
@media(max-width:700px){.hero-slideshow{margin:10px 10px 12px!important;border-radius:20px!important;box-shadow:0 10px 26px rgba(0,56,130,.16)!important}.hero-slideshow .slide-track{height:clamp(360px,125vw,560px)!important}.hero-slideshow .hero-slide img{object-fit:cover!important;object-position:center center!important}.hero-slideshow .slide-arrow{width:38px;height:38px;font-size:29px}.hero-slideshow .slide-arrow.prev{left:9px}.hero-slideshow .slide-arrow.next{right:9px}.hero-slideshow .slide-dots{bottom:13px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none!important}.hero-slide{transition:none!important}}


/* v2.34 — RESTORE HERO HTML TEXT + NO-CROP RESPONSIVE SLIDES */
.hero-slideshow{position:relative!important;display:block!important;overflow:hidden!important;background:#0875dc!important;}
.hero-slideshow .slide-track{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:1600/520!important;overflow:hidden!important;}
.hero-slideshow .hero-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;background:#0875dc!important;}
.hero-slideshow .hero-slide picture,.hero-slideshow .hero-slide img{display:block!important;width:100%!important;height:100%!important;}
.hero-slideshow .hero-slide img{object-fit:contain!important;object-position:center!important;}
.hero-slideshow .heroTextOverlay{position:absolute!important;z-index:3!important;left:5.2%!important;top:50%!important;transform:translateY(-50%)!important;width:min(48%,760px)!important;max-width:760px!important;color:#fff!important;text-shadow:0 2px 8px rgba(0,25,75,.18)!important;pointer-events:none!important;}
.hero-slideshow .heroTextOverlay h1{font-size:clamp(34px,4.1vw,64px)!important;line-height:1!important;margin:0 0 12px!important;font-weight:900!important;}
.hero-slideshow .heroTextOverlay h2{font-size:clamp(19px,2.1vw,32px)!important;line-height:1.15!important;margin:0 0 14px!important;}
.hero-slideshow .heroTextOverlay h2 mark{background:none!important;color:#ffe000!important;}
.hero-slideshow .heroTextOverlay p{font-size:clamp(12px,1.15vw,18px)!important;line-height:1.45!important;margin:0 0 18px!important;}
.hero-slideshow .heroTextOverlay .trust{display:grid!important;grid-template-columns:repeat(4,minmax(90px,1fr))!important;gap:8px!important;margin:16px 0!important;}
.hero-slideshow .heroTextOverlay .trust span{display:flex!important;align-items:center!important;gap:6px!important;padding:7px 4px!important;font-size:11px!important;line-height:1.15!important;}
.hero-slideshow .heroTextOverlay .trust b{font-size:10px!important;}
.hero-slideshow .heroTextOverlay .buttons{display:grid!important;grid-template-columns:minmax(150px,220px) minmax(150px,220px)!important;gap:10px!important;margin-top:16px!important;}
.hero-slideshow .heroTextOverlay .buttons a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:46px!important;padding:0 12px!important;border-radius:12px!important;text-decoration:none!important;font-weight:800!important;font-size:13px!important;pointer-events:auto!important;}
.hero-slideshow .heroTextOverlay .buttons .light{background:#fff!important;color:#123d73!important;}
@media(max-width:700px){
 .hero-slideshow{margin:10px 10px 12px!important;border-radius:20px!important;box-shadow:0 10px 26px rgba(0,56,130,.16)!important;}
 .hero-slideshow .slide-track{aspect-ratio:720/900!important;height:auto!important;min-height:0!important;}
 .hero-slideshow .hero-slide img{object-fit:contain!important;width:100%!important;height:100%!important;}
 .hero-slideshow .heroTextOverlay{left:7%!important;right:7%!important;top:7%!important;transform:none!important;width:auto!important;max-width:none!important;color:#12355f!important;text-shadow:none!important;}
 .hero-slideshow .heroTextOverlay h1{font-size:clamp(24px,7vw,34px)!important;margin-bottom:7px!important;}
 .hero-slideshow .heroTextOverlay h2{font-size:clamp(15px,4.5vw,22px)!important;margin-bottom:8px!important;}
 .hero-slideshow .heroTextOverlay p{font-size:clamp(9px,2.8vw,13px)!important;margin-bottom:8px!important;}
 .hero-slideshow .heroTextOverlay .trust{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important;margin:7px 0!important;max-width:360px!important;}
 .hero-slideshow .heroTextOverlay .trust span{font-size:9px!important;padding:3px 2px!important;}
 .hero-slideshow .heroTextOverlay .trust b{font-size:8px!important;}
 .hero-slideshow .heroTextOverlay .buttons{grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:7px!important;max-width:350px!important;}
 .hero-slideshow .heroTextOverlay .buttons a{min-height:34px!important;font-size:9px!important;padding:0 6px!important;}
 .hero-slideshow .slide-arrow{width:36px!important;height:36px!important;font-size:28px!important;}
 .hero-slideshow .slide-dots{bottom:10px!important;}
}


/* v2.37 — MARQUEE UNLIMITED / NO TRUNCATION — ONLY MARQUEE */
.marquee-wrap{display:block!important;width:100%!important;max-width:none!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important;}
.marquee-track{display:flex!important;flex:0 0 auto!important;width:max-content!important;max-width:none!important;min-width:max-content!important;white-space:nowrap!important;will-change:transform!important;animation:arsylaMarqueeUnlimited 28s linear infinite!important;}
.marquee-track .marquee-text{display:block!important;flex:0 0 auto!important;width:max-content!important;max-width:none!important;min-width:max-content!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;padding:0 32px!important;font-weight:700!important;}
@keyframes arsylaMarqueeUnlimited{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:700px){.marquee-track{animation-duration:22s!important}.marquee-track .marquee-text{padding-inline:24px!important}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none!important}}


/* v2.46 — CROSS-BROWSER SLIDESHOW COMPATIBILITY / CACHE FIX */
.hero-slideshow .slide-track{position:relative!important;overflow:hidden!important;}
.hero-slideshow .hero-slide{opacity:0!important;visibility:hidden!important;display:block!important;z-index:1!important;transition:opacity .45s ease!important;}
.hero-slideshow .hero-slide.is-active{opacity:1!important;visibility:visible!important;z-index:2!important;}
.hero-slideshow .hero-slide picture,.hero-slideshow .hero-slide img{display:block!important;max-width:100%!important;}
.hero-slideshow .hero-slide img{width:100%!important;height:100%!important;}
@media(prefers-reduced-motion:reduce){.hero-slideshow .hero-slide{transition:none!important}}

/* v2.60 multiple website promos */
.promo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.promo-grid .promo{height:100%}@media(max-width:560px){.promo-grid{grid-template-columns:1fr}}

/* v2.62: public service documentation + PDF report */
.publicStatusDocs{margin-top:14px;padding-top:13px;border-top:1px solid #dce8f7}.publicStatusDocsHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;color:#173f74}.publicStatusDocsHead b{font-size:13px}.publicStatusDocsHead small{color:#718096;font-size:10px}.publicStatusPhotoGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.publicStatusPhotoGrid figure{margin:0;border:1px solid #dce6f2;border-radius:10px;overflow:hidden;background:#f7faff}.publicStatusPhoto{height:105px;background:#eef4fb;display:grid;place-items:center}.publicStatusPhoto img{width:100%;height:100%;object-fit:cover;display:block}.publicStatusPhotoGrid figcaption{padding:7px;font-size:10px;line-height:1.35}.publicStatusPhotoGrid figcaption b,.publicStatusPhotoGrid figcaption span{display:block}.publicStatusPhotoGrid figcaption span{color:#7a879a;margin-top:3px}.publicStatusDocs.empty{display:flex;flex-direction:column;gap:3px}.publicStatusDocs.empty small{color:#718096}.publicStatusHistory{margin-top:14px;padding-top:13px;border-top:1px solid #dce8f7}.publicStatusHistory>b{display:block;margin-bottom:8px;color:#173f74}.publicStatusHistory>div>div{display:grid;grid-template-columns:15px minmax(0,1fr);gap:5px;margin-bottom:7px}.publicStatusHistory span{color:#147de5}.publicStatusHistory p{margin:0}.publicStatusHistory strong{font-size:11px;color:#1c4f8f}.publicStatusHistory small{margin-left:7px;color:#8190a4;font-size:9px}.publicStatusHistory em{display:block;color:#65738a;font-style:normal;font-size:10px;line-height:1.35;margin-top:2px}.publicStatusActions{margin-top:12px;display:flex;justify-content:flex-end}.publicStatusActions button{border:0;border-radius:10px;background:#0874e8;color:#fff;padding:10px 15px;font-weight:800;cursor:pointer;box-shadow:0 6px 15px rgba(8,116,232,.18)}.publicStatusActions button:hover{filter:brightness(.97)}
@media(max-width:700px){.publicStatusPhotoGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.publicStatusPhoto{height:115px}.publicStatusDocsHead{align-items:flex-start;flex-direction:column}.publicStatusActions button{width:100%}}


/* v2.70 FINAL — STATUS PHOTOS + FIXED LOCAL SLIDESHOW */
.hero-slideshow .slide-track{position:relative!important;width:100%!important;overflow:hidden!important;}
.hero-slideshow .hero-slide{position:absolute!important;inset:0!important;display:block!important;opacity:0!important;visibility:hidden!important;z-index:1!important;background:#0875dc!important;}
.hero-slideshow .hero-slide.is-active{opacity:1!important;visibility:visible!important;z-index:2!important;}
.hero-slideshow .hero-slide picture,.hero-slideshow .hero-slide img{display:block!important;width:100%!important;height:100%!important;}
.hero-slideshow .hero-slide img{object-fit:contain!important;object-position:center center!important;}
.hero-slideshow .heroTextOverlay{z-index:4!important;}
.publicStatusPhoto{min-height:220px!important;background:#f4f7fb!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;}
.publicStatusPhoto img{display:block!important;width:100%!important;height:100%!important;min-height:220px!important;object-fit:contain!important;background:#fff!important;}
@media(max-width:700px){.hero-slideshow .slide-track{aspect-ratio:720/900!important;height:auto!important;min-height:520px!important}.hero-slideshow .hero-slide img{object-fit:contain!important}.publicStatusPhoto{min-height:190px!important}.publicStatusPhoto img{min-height:190px!important}}

/* v2.71 ROOT INDEX WEBSITE: deterministic slideshow + public status photos */
.hero-slideshow{position:relative!important;display:block!important;min-height:430px!important;height:auto!important;padding:0!important;overflow:hidden!important;background:#0875dc!important;}
.hero-slideshow .slide-track{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:1600/520!important;min-height:430px!important;overflow:hidden!important;}
.hero-slideshow .hero-slide{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;opacity:0!important;visibility:hidden!important;z-index:1!important;background:#0875dc!important;}
.hero-slideshow .hero-slide.is-active{opacity:1!important;visibility:visible!important;z-index:2!important;}
.hero-slideshow .hero-slide picture,.hero-slideshow .hero-slide img{display:block!important;width:100%!important;height:100%!important;}
.hero-slideshow .hero-slide img{object-fit:contain!important;object-position:center!important;}
.hero-slideshow .heroTextOverlay{position:absolute!important;left:5.2%!important;top:50%!important;transform:translateY(-50%)!important;width:min(48%,760px)!important;z-index:5!important;color:#fff!important;pointer-events:none!important;}
.hero-slideshow .heroTextOverlay .buttons a{pointer-events:auto!important;}
.statusLoading{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #dbe7f5;border-radius:12px;background:#f8fbff}.statusSpinner{width:22px;height:22px;border:3px solid #dbe7f5;border-top-color:#0874e8;border-radius:50%;animation:arsylaSpin .8s linear infinite;flex:none}@keyframes arsylaSpin{to{transform:rotate(360deg)}}.statusRetryBtn{margin-top:10px;border:0;border-radius:9px;padding:8px 12px;background:#0874e8;color:#fff;font-weight:700;cursor:pointer}.heroTrackInput button:disabled{opacity:.7;cursor:wait}
.publicStatusDocs{margin-top:14px;padding-top:13px;border-top:1px solid #dce8f7}.publicStatusDocsHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;color:#173f74}.publicStatusPhotoGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.publicStatusPhotoGrid figure{margin:0;border:1px solid #dce6f2;border-radius:10px;overflow:hidden;background:#f7faff}.publicStatusPhoto{height:150px;background:#eef4fb;display:flex;align-items:center;justify-content:center;overflow:hidden}.publicStatusPhoto img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}.publicStatusPhotoGrid figcaption{padding:7px;font-size:10px;line-height:1.35}.publicStatusPhotoGrid figcaption b,.publicStatusPhotoGrid figcaption span{display:block}.publicStatusPhotoGrid figcaption span{color:#7a879a;margin-top:3px}.publicStatusDocs.empty{display:flex;flex-direction:column;gap:3px}.publicStatusDocs.empty small{color:#718096}.publicStatusHistory{margin-top:14px;padding-top:13px;border-top:1px solid #dce8f7}.publicStatusHistory>b{display:block;margin-bottom:8px;color:#173f74}.publicStatusHistory>div{display:grid;grid-template-columns:15px minmax(0,1fr);gap:5px;margin-bottom:7px}.publicStatusHistory span{color:#147de5}.publicStatusHistory p{margin:0}.publicStatusHistory strong{font-size:11px;color:#1c4f8f}.publicStatusHistory small{margin-left:7px;color:#8190a4;font-size:9px}.publicStatusHistory em{display:block;color:#65738a;font-style:normal;font-size:10px;line-height:1.35;margin-top:2px}
@media(max-width:700px){.hero-slideshow .slide-track{aspect-ratio:720/900!important;min-height:520px!important}.hero-slideshow .hero-slide img{object-fit:contain!important}.hero-slideshow .heroTextOverlay{left:7%!important;right:7%!important;top:7%!important;transform:none!important;width:auto!important;color:#12355f!important;text-shadow:none!important}.publicStatusPhotoGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.publicStatusPhoto{height:150px}}

/* v2.76 — public service queue: glossy glassmorphism, aggregate counts only */
.status-glass-section{position:relative;isolation:isolate;overflow:hidden;padding:30px 3% 24px;background:radial-gradient(ellipse at 12% 10%,rgba(72,148,255,.32),transparent 36%),radial-gradient(ellipse at 90% 18%,rgba(219,83,255,.24),transparent 34%),linear-gradient(135deg,#071d55 0%,#1555ad 42%,#532b9b 75%,#0b718f 100%);}
.status-glass-section:before,.status-glass-section:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none}
.status-glass-section:before{width:280px;height:280px;left:-90px;top:90px;background:radial-gradient(circle,rgba(255,255,255,.24),transparent 68%)}
.status-glass-section:after{width:360px;height:360px;right:-100px;bottom:-140px;background:radial-gradient(circle,rgba(76,232,255,.28),transparent 70%)}
.status-glass-section .status-section-head{max-width:1200px;position:relative}
.status-glass-section .status-kicker{color:#fff;background:linear-gradient(120deg,rgba(255,255,255,.24),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.status-glass-section .status-section-head h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.18)}
.status-glass-section .status-section-head p{color:rgba(255,255,255,.82);max-width:760px}
.status-live-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;color:#effff6;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(14px);font-size:11px;font-weight:800;white-space:nowrap}
.status-live-pill i{width:8px;height:8px;border-radius:50%;background:#55ffae;box-shadow:0 0 12px #55ffae}
.status-count-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.count-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;min-height:112px;padding:16px;border:1px solid rgba(255,255,255,.62);border-radius:21px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 30px rgba(0,0,0,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.count-card:after{content:"";position:absolute;inset:-40% -25%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.23) 48%,transparent 58%);transform:translateX(-65%);animation:glassShine 8s ease-in-out infinite;pointer-events:none}
@keyframes glassShine{0%,55%{transform:translateX(-65%)}80%,100%{transform:translateX(65%)}}
.count-blue{background:linear-gradient(135deg,rgba(26,160,255,.83),rgba(16,74,223,.72))}.count-purple{background:linear-gradient(135deg,rgba(183,87,255,.85),rgba(113,35,206,.72))}.count-orange{background:linear-gradient(135deg,rgba(255,169,53,.9),rgba(245,95,29,.78))}.count-green{background:linear-gradient(135deg,rgba(63,235,167,.88),rgba(0,154,111,.75))}.count-pink{background:linear-gradient(135deg,rgba(255,89,190,.86),rgba(189,42,157,.76))}.count-red{background:linear-gradient(135deg,rgba(255,93,105,.9),rgba(197,33,66,.78))}.count-slate{background:linear-gradient(135deg,rgba(179,202,230,.83),rgba(68,93,131,.82))}
.count-icon{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 55px;width:55px;height:55px;border-radius:17px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);font-size:28px}
.count-card>div{position:relative;z-index:1;min-width:0}.count-card b{display:block;font-size:12px;line-height:1.25;font-weight:850}.count-card strong{display:block;margin-top:2px;font-size:31px;line-height:1.1;letter-spacing:-.7px}.count-card small{display:block;margin-top:4px;color:rgba(255,255,255,.86);font-size:10px}
.status-count-foot{max-width:1200px;margin:14px auto 0;display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.78);font-size:10px}
.status-count-grid.counts-error .count-card strong{opacity:.75}
@media(max-width:900px){.status-count-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.status-glass-section{padding:24px 3% 20px}}
@media(max-width:560px){.status-glass-section{padding:22px 12px 18px}.status-glass-section .status-section-head{display:flex;align-items:flex-start;gap:8px}.status-glass-section .status-section-head h2{font-size:21px}.status-glass-section .status-section-head p{font-size:11px;line-height:1.5}.status-live-pill{font-size:9px;padding:7px 9px}.status-count-grid{gap:8px}.count-card{min-height:96px;padding:11px 9px;gap:8px;border-radius:17px}.count-icon{width:39px;height:39px;flex-basis:39px;border-radius:12px;font-size:20px}.count-card b{font-size:10px}.count-card strong{font-size:26px}.count-card small{font-size:9px}.status-count-foot{font-size:9px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.count-card:after{animation:none}}

/* v2.77 Total Servis online */
.public-total-services{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0;padding:12px 16px;border:1px solid rgba(255,255,255,.42);border-radius:14px;background:linear-gradient(120deg,rgba(255,255,255,.18),rgba(255,255,255,.08));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.public-total-services span{font-weight:800}.public-total-services strong{font-size:clamp(24px,4vw,34px);line-height:1}.public-total-services small{opacity:.88}

/* v2.77 correction: restore public service check and color total card consistently */
.public-check-service{padding:26px clamp(12px,3vw,36px);background:linear-gradient(135deg,#e8f4ff,#f7fbff);}
.public-check-inner{max-width:1200px;margin:0 auto;padding:clamp(20px,3vw,38px);border:1px solid #d6e7f7;border-radius:24px;background:linear-gradient(145deg,#fff 0%,#f7fbff 55%,#e7f4ff 100%);box-shadow:0 12px 32px rgba(17,75,130,.12);}
.public-check-kicker{display:inline-block;padding:7px 12px;border-radius:999px;background:#e1f1ff;color:#0861ae;font-size:11px;font-weight:900;letter-spacing:1px;}
.public-check-inner h2{margin:14px 0 8px;color:#163b65;font-size:clamp(25px,4vw,38px)}.public-check-inner>p{color:#5e7086;line-height:1.65;margin:0 0 22px}
.heroTrackInput{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}.heroTrackInput label{font-weight:800;color:#233f60;align-self:end}.heroTrackInput input{min-width:0;width:100%;padding:15px 16px;border:1px solid #cfdeec;border-radius:14px;background:#fff;font-size:16px}.heroTrackInput button{grid-column:1/-1;width:100%;padding:17px 18px;border-radius:15px;background:linear-gradient(110deg,#087bea,#0754b8);color:#fff;font-weight:900;font-size:clamp(16px,2.5vw,21px);box-shadow:0 9px 22px rgba(8,104,207,.22)}.public-check-privacy{display:block;margin-top:16px;color:#6d7f92;line-height:1.5}.public-check-service .statusResult:empty{display:none}.public-total-services{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0;padding:14px 16px;border:1px solid rgba(255,255,255,.52);border-radius:17px;background:linear-gradient(125deg,#35cba0 0%,#169e87 50%,#087f91 100%);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.55)}.public-total-services span{font-weight:900}.public-total-services strong{font-size:clamp(27px,4vw,36px);line-height:1}.public-total-services small{opacity:.95}
@media(max-width:600px){.public-check-service{padding:18px 12px}.public-check-inner{padding:20px 16px;border-radius:20px}.heroTrackInput{grid-template-columns:1fr;gap:9px}.heroTrackInput button{grid-column:auto;padding:15px}.public-total-services{gap:8px;padding:13px}.public-total-services small{flex-basis:100%;padding-left:2px}}

/* v2.77: total servis sejajar dengan kartu status terakhir */
.public-total-count-card{background:linear-gradient(135deg,#35cba0 0%,#169e87 52%,#087f91 100%)!important;border-color:rgba(255,255,255,.7)!important;color:#fff!important;box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.55)!important}.public-total-count-card b,.public-total-count-card strong,.public-total-count-card small{color:#fff!important}.public-total-count-card .count-icon{background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.5)!important}

/* v2.77 FIX: public website total card must share the final status row, next to Dikembalikan */
#publicServiceCounts{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important}
#publicServiceCounts>.public-total-count-card{grid-column:auto!important;grid-row:auto!important;width:auto!important;min-width:0!important;max-width:none!important;justify-self:stretch!important;align-self:stretch!important}
@media(max-width:900px){#publicServiceCounts{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){#publicServiceCounts{grid-template-columns:repeat(2,minmax(0,1fr))!important}#publicServiceCounts>.public-total-count-card{grid-column:auto!important}}

/* v2.77 FIX2: total service is a grid card, directly after Dikembalikan, across public entry pages */
.public-total-count-card{grid-column:auto!important;grid-row:auto!important;width:auto!important;min-width:0!important;max-width:none!important;justify-self:stretch!important;align-self:stretch!important;color:#fff!important;background:linear-gradient(125deg,#38d5a6 0%,#17a99c 52%,#087f91 100%)!important;border:1px solid rgba(255,255,255,.72)!important;box-shadow:0 0 22px rgba(45,224,190,.28),inset 0 1px 0 rgba(255,255,255,.55)!important}
.public-total-count-card b,.public-total-count-card strong,.public-total-count-card small{color:#fff!important}
@media(max-width:900px){.status-count-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.status-count-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.public-total-count-card{grid-column:auto!important}}

/* Arsyla responsive repair patch 2026-10: avoid compressed desktop navigation and clipped content */
html, body { max-width:100%; overflow-x:hidden; }
img, video, iframe { max-width:100%; }
@media (min-width:701px) and (max-width:1250px) {
  nav:not(.mobile-bottom-nav) { flex-wrap:wrap!important; align-items:stretch!important; gap:7px!important; padding:10px 16px!important; }
  nav:not(.mobile-bottom-nav) > .nav-brand { flex:0 0 150px!important; max-width:150px!important; }
  nav:not(.mobile-bottom-nav) > a { flex:1 1 105px!important; min-height:42px!important; white-space:normal!important; text-align:center!important; line-height:1.2!important; overflow-wrap:anywhere!important; }
  nav:not(.mobile-bottom-nav) > .nav-login { flex:0 0 auto!important; }
  main, .container, .section, .products, .product-grid, .hero, .hero-content { min-width:0; max-width:100%; }
}
@media (min-width:701px) { body { width:100%; } .hero, .hero-section, .hero-banner { max-width:100%; } }
@media (max-width:700px) {
  body { width:100%; overflow-x:hidden!important; }
  .hero img, .hero-section img, .hero-banner img { max-width:100%; height:auto; }
  input, select, textarea, button { max-width:100%; }
}