@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');
:root{--ink:#071827;--muted:#6d7b88;--line:#e5ecef;--paper:#fff;--soft:#f6f9fa;--teal:#0bb8a9;--teal2:#16d7c4;--deep:#062d39;--deep2:#041e27;--cyan:#0e8798;--red:#ef3340;--yellow:#ffad00;--shadow:0 16px 44px rgba(6,31,42,.08);--shadow2:0 26px 70px rgba(6,31,42,.12);--container:1460px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;font-size:16px}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}.container{width:min(var(--container),calc(100% - 54px));margin:auto}.muted{color:var(--muted)}
.topbar{background:linear-gradient(90deg,#052e3a,#0b5666);color:#fff;font-size:13px}.topbar-inner{height:36px;display:flex;align-items:center;justify-content:space-between;gap:22px}.top-links,.top-actions{display:flex;align-items:center;gap:28px;white-space:nowrap}.topbar a{opacity:.96}.main-header{height:70px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 8px 28px rgba(7,31,41,.04)}.header-row{height:100%;display:grid;grid-template-columns:180px 1fr minmax(250px,330px) auto auto auto;align-items:center;gap:18px}.logo img{width:170px}.nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:700}.nav a{height:70px;display:flex;align-items:center;position:relative}.nav a.active:after,.nav a:hover:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--teal)}.search{height:42px;border:1px solid #dce4e8;border-radius:12px;display:flex;overflow:hidden;background:#fbfcfd}.search input{border:0;outline:0;background:transparent;padding:0 14px;min-width:0;width:100%;font-size:13px}.search button{border:0;width:48px;background:linear-gradient(135deg,#07576a,#063d49);color:#fff;font-size:20px}.mini-action{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}.mini-action>b{font-size:20px}.mini-action span{display:grid}.mini-action strong{font-size:12px}.mini-action small{color:#7a8791;font-size:10px}.cart-badge{position:relative}.cart-count{position:absolute;right:-5px;top:-8px;width:18px;height:18px;border-radius:50%;background:var(--teal);color:#fff;font-style:normal;font-size:10px;font-weight:800;display:grid;place-items:center}.mobile-menu-btn{display:none;border:0;background:transparent;font-size:25px}.mobile-drawer{display:none}
.page-hero{background:linear-gradient(120deg,#062835,#0a5460);color:#fff;padding:36px 0;position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;right:8%;top:-90px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(16,214,194,.3),transparent 68%)}.page-hero .container{position:relative;z-index:1}.crumb{font-size:12px;color:#b9d0d6;margin-bottom:8px}.page-hero h1{font:800 38px/1 Manrope;margin:0 0 8px;letter-spacing:-.025em}.page-hero p{margin:0;color:#d5e3e6;font-size:15px;line-height:1.6;max-width:780px}
.category-rail{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:20px}.category-chip{height:70px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:10px;color:#d9ecef}.category-chip.active{background:#fff;color:#057d77;border-color:#fff}.category-chip b{font-size:18px;color:#20dfcd}.category-chip.active b{color:#0aa799}
.catalog{display:grid;grid-template-columns:220px 1fr;gap:22px;padding:26px 0 54px}.filter-panel{border:1px solid var(--line);border-radius:16px;background:#fff;padding:18px;height:max-content;box-shadow:0 10px 28px rgba(7,29,39,.05)}.filter-title{font-size:14px;font-weight:800;margin-bottom:10px}.filter-group{padding:13px 0;border-bottom:1px solid var(--line)}.filter-group:last-child{border:0}.filter-group h4{font-size:12px;margin:0 0 10px}.check{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#65737f;font-size:11px;margin:8px 0}.check span{color:#a3adb5}.price-range{height:4px;background:linear-gradient(90deg,var(--teal) 0 70%,#dce4e8 70%);border-radius:5px;margin:12px 3px}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.toolbar .muted{font-size:12px}.select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;font-size:11px}.view-btns{display:flex;gap:6px}.view-btns button{border:1px solid var(--line);width:30px;height:30px;border-radius:7px;background:#fff;color:#70808b}.view-btns button.active{background:#eafaf8;color:#078f85;border-color:#bce9e4}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.product-card{position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:.2s;display:flex;flex-direction:column;min-width:0}.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.product-thumb{height:150px;background:linear-gradient(180deg,#fbfcfd,#f3f6f7);padding:10px;display:grid;place-items:center}.product-thumb img{width:100%;height:100%;object-fit:contain}.pill{position:absolute;top:9px;left:9px;z-index:2;padding:4px 7px;border-radius:999px;background:#0db58f;color:#fff;font-size:9px;font-weight:800}.pill.sale{background:var(--red)}.heart{position:absolute;right:8px;top:7px;z-index:2;border:0;background:transparent;font-size:18px;color:#7d8b96}.heart.liked{color:var(--red)}.product-info{padding:11px 11px 10px;display:flex;flex-direction:column;flex:1}.product-title{font-size:11px;line-height:1.32;font-weight:600;min-height:30px}.price{font-size:15px;font-weight:800;margin-top:7px}.old-price{font-size:9px;text-decoration:line-through;color:#9ba6ae;margin-right:5px}.new-price{color:var(--red)}.card-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:auto}.rating{font-size:10px;color:var(--yellow);margin-top:8px}.rating span{color:#89949c}.add-cart{width:31px;height:31px;border:0;border-radius:7px;background:#078bad;color:#fff;cursor:pointer}
.product-detail{display:grid;grid-template-columns:1.08fr 1fr .45fr;gap:26px;padding:32px 0}.gallery-main{height:490px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fafcfd,#f1f5f7);display:grid;place-items:center;padding:34px}.gallery-main img{max-height:420px;max-width:88%;object-fit:contain}.thumb-row{display:flex;gap:8px;margin-top:9px}.thumb-btn{width:64px;height:58px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:5px}.thumb-btn.active{border-color:var(--teal);box-shadow:0 0 0 2px rgba(11,184,169,.1)}.detail{padding:8px 0}.detail .product-badge{display:inline-block;background:#e7faf6;color:#07877d;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;margin-bottom:8px}.detail h1{font:800 30px/1.08 Manrope;margin:0 0 8px}.detail-rating{display:flex;align-items:center;gap:8px;font-size:11px}.big-price{font-size:28px;font-weight:800;color:#e5393f;margin:11px 0}.old-detail{font-size:12px;color:#94a0a8;text-decoration:line-through;margin-left:8px}.detail p{font-size:13px;line-height:1.65;color:#5e6d78}.feature-list{display:grid;gap:8px;margin:15px 0}.feature-list span{font-size:12px;color:#485761}.feature-list span:before{content:'●';font-size:7px;color:#0db08e;margin-right:8px}.qty-row{display:flex;gap:10px;align-items:center}.qty{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}.qty button,.qty input{border:0;background:#fff;width:36px;height:40px;text-align:center}.btn{border:0;border-radius:10px;padding:12px 18px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:linear-gradient(135deg,#13cdbb,#079f94);color:#fff}.btn-dark{background:#062d39;color:#fff}.btn-outline{background:#fff;border:1px solid #cfdce0;color:#17313b}.trust-box{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;height:max-content}.trust-box h3{font-size:13px;margin:0 0 12px}.trust-item{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid var(--line);font-size:10px}.trust-item:last-child{border:0}.trust-item b{display:block;font-size:11px}.trust-item i{width:26px;height:26px;border-radius:50%;background:#e9faf7;color:#078d82;display:grid;place-items:center;font-style:normal}.install-card{margin-top:12px;border-radius:14px;background:linear-gradient(135deg,#edf9fa,#dfeff1);padding:15px}.install-card img{height:110px;object-fit:contain;margin:auto}.install-card h4{margin:7px 0 3px;font-size:12px}.install-card p{font-size:10px;margin:0 0 8px}.detail-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:13px;margin:2px 0 28px;overflow:hidden}.detail-strip div{padding:14px;border-right:1px solid var(--line);display:flex;gap:10px;align-items:center}.detail-strip div:last-child{border:0}.detail-strip b{font-size:11px;display:block}.detail-strip span{font-size:9px;color:#84909a}
.cart-progress{display:flex;gap:0;align-items:center;justify-content:flex-end}.cart-progress span{display:flex;align-items:center;color:#8b969f;font-size:11px}.cart-progress i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e7ecef;font-style:normal;margin-right:5px}.cart-progress span.active{color:#087f77}.cart-progress span.active i{background:#0bad9f;color:#fff}.cart-progress em{width:40px;height:1px;background:#dfe6e8;margin:0 8px}.cart-layout{display:grid;grid-template-columns:1.55fr .62fr;gap:20px;padding:28px 0 55px}.panel{border:1px solid var(--line);border-radius:14px;background:#fff}.panel-head{padding:16px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:800}.cart-item{display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.cart-image{height:74px;border-radius:9px;background:#f5f8f9;display:grid;place-items:center;padding:5px}.cart-image img{width:100%;height:100%;object-fit:contain}.cart-cat{font-size:9px;color:#0a9d8f;font-weight:800}.cart-item h4{font-size:12px;margin:3px 0 8px}.cart-item>strong{font-size:13px}.cart-actions{display:flex;gap:12px;align-items:center}.link-btn{border:0;background:transparent;color:#0b8e84;font-size:10px}.summary{padding:18px}.summary h3{font-size:14px;margin:0 0 12px}.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:11px;color:#64727d}.summary-row strong{color:#0a1d29}.summary-row.total{font-size:18px;font-weight:800;border-top:1px solid var(--line);margin-top:6px;padding-top:14px;color:#091c28}.summary .btn{width:100%;margin-top:12px}.secure-note{text-align:center;color:#89949d;font-size:9px;margin-top:10px}.empty-cart{text-align:center;padding:50px 20px}.empty-cart>div{font-size:40px}.empty-cart h3{margin:8px 0}.empty-cart p{font-size:12px;color:var(--muted)}
.checkout-grid{display:grid;grid-template-columns:1.25fr .65fr;gap:22px;padding:30px 0 55px}.checkout-form{padding:20px}.form-section{margin-bottom:24px}.form-section h3{font-size:14px;margin:0 0 12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-grid .full{grid-column:1/-1}.field{width:100%;border:1px solid #dce4e8;border-radius:9px;padding:11px 12px;outline:0;background:#fff;font-size:12px}.radio-card{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0;font-size:11px}.radio-card:has(input:checked){border-color:#74d7ce;background:#f5fffd}.summary-product{display:grid;grid-template-columns:45px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:10px}.summary-product img{width:45px;height:38px;object-fit:contain;background:#f6f8f9;border-radius:7px}.success-card{max-width:650px;margin:65px auto;text-align:center;padding:45px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.success-icon{width:60px;height:60px;border-radius:50%;background:#e6faf6;color:#0aa68f;display:grid;place-items:center;font-size:30px;margin:0 auto 15px}
.section{padding:34px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}.section-head h2{font:800 26px Manrope;margin:0}.section-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{border:1px solid var(--line);border-radius:15px;background:#fff;overflow:hidden;box-shadow:0 9px 26px rgba(7,29,39,.04)}.feature-card .card-media{height:150px;background:#f2f6f7;overflow:hidden}.feature-card .card-media img{width:100%;height:100%;object-fit:cover}.feature-card .card-body{padding:18px}.feature-card h3{font-size:16px;margin:0 0 8px}.feature-card p{font-size:12px;color:var(--muted);line-height:1.65;margin:0}.icon-box{width:42px;height:42px;border-radius:12px;background:#e8faf7;color:#07877e;display:grid;place-items:center;font-size:18px;margin-bottom:12px}.info-band{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:18px}.info-panel{border-radius:16px;padding:28px;background:linear-gradient(135deg,#052c38,#0a5965);color:#fff;position:relative;overflow:hidden}.info-panel.light{background:linear-gradient(135deg,#edf8f9,#dbeff1);color:var(--ink)}.info-panel h2{font:800 26px Manrope;margin:0 0 8px}.info-panel p{font-size:13px;line-height:1.7;max-width:620px;color:#cfe2e6}.info-panel.light p{color:#5d6d78}.info-panel img{position:absolute;right:20px;bottom:0;max-height:160px;max-width:42%;object-fit:contain}
.contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:18px;padding:28px 0 55px}.contact-info{background:linear-gradient(145deg,#052c38,#0a5662);color:#fff;padding:24px;border-radius:16px}.contact-info h2{font:800 24px Manrope;margin:0 0 10px}.contact-info p{font-size:12px;color:#c6dce1;line-height:1.6}.contact-item{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:12px}.contact-form{padding:24px}
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.auth-art{background:linear-gradient(145deg,#052c38,#0a5965);color:#fff;padding:60px;display:flex;align-items:flex-end;position:relative;overflow:hidden}.auth-art:before{content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(18,223,201,.36),transparent 68%)}.auth-art h2{font:800 46px/1.04 Manrope;margin:10px 0}.auth-art p{font-size:15px;color:#c6dce1;max-width:560px;line-height:1.7}.auth-box{display:grid;place-items:center;padding:45px}.auth-card{width:min(430px,100%)}.auth-card .brand img{width:190px;margin-bottom:32px}.auth-card h1{font:800 32px Manrope;margin:0}.auth-card p{font-size:13px;color:var(--muted)}.stack{display:grid;gap:10px;margin-top:18px}.btn.block{width:100%}.split{display:flex;justify-content:space-between;align-items:center;font-size:11px}.or{display:flex;align-items:center;gap:10px;color:#99a5ad;font-size:10px;margin:10px 0}.or:before,.or:after{content:"";height:1px;background:var(--line);flex:1}
.account-layout{display:grid;grid-template-columns:220px 1fr;gap:18px;padding:28px 0 55px}.account-menu{border:1px solid var(--line);border-radius:14px;overflow:hidden;height:max-content}.account-menu a{display:block;padding:13px 15px;border-bottom:1px solid var(--line);font-size:11px}.account-menu a.active,.account-menu a:hover{background:#eefbf9;color:#07887d;font-weight:800}.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{border:1px solid var(--line);border-radius:13px;padding:16px;background:#fff}.stat small{font-size:10px;color:var(--muted)}.stat strong{display:block;font-size:22px;margin-top:5px}.order-table{width:100%;border-collapse:collapse;font-size:10px}.order-table th,.order-table td{padding:11px;border-bottom:1px solid var(--line);text-align:left}.status{display:inline-block;padding:4px 7px;border-radius:999px;background:#e7faf6;color:#07877d;font-size:9px;font-weight:800}
.brand-strip{border-top:1px solid var(--line);background:#fff}.brands{height:92px;display:grid;grid-template-columns:repeat(8,1fr);align-items:center;text-align:center;color:#5c666d;font:800 17px Manrope;letter-spacing:-.04em}.footer{background:#061d27;color:#d7e3e7}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding:38px 0 30px}.footer-brand img{width:175px;filter:brightness(1.1)}.footer-brand p{font-size:11px;color:#9eb6be;line-height:1.7;max-width:330px}.footer h4{font-size:12px;color:#fff;margin:0 0 11px}.footer a{display:block;color:#a6bcc3;font-size:11px;margin:8px 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:14px 0 20px;display:flex;justify-content:space-between;font-size:10px;color:#8fa9b1}.floating-help{position:fixed;right:20px;bottom:20px;width:52px;height:52px;border:0;border-radius:50%;background:linear-gradient(135deg,#15d5c1,#06928f);color:#fff;box-shadow:0 14px 32px rgba(4,125,124,.28);font-size:21px;z-index:40}.toast{position:fixed;right:20px;top:86px;padding:12px 15px;border-radius:10px;background:#062c37;color:#fff;font-size:11px;box-shadow:var(--shadow);opacity:0;transform:translateY(-8px);transition:.2s;z-index:80}.toast.show{opacity:1;transform:none}.mobile-bottom{display:none}
@media(max-width:1180px){.header-row{grid-template-columns:175px 1fr 260px auto auto}.nav{display:none}.mini-action:nth-of-type(2){display:none}.mobile-menu-btn{display:block}.category-rail{grid-template-columns:repeat(4,1fr)}.product-grid{grid-template-columns:repeat(3,1fr)}.product-detail{grid-template-columns:1fr 1fr}.trust-side{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.footer-grid{grid-template-columns:1.4fr repeat(2,1fr)}.footer-brand{grid-column:1/-1}}
@media(max-width:820px){.container{width:min(100% - 28px,var(--container))}.topbar{display:none}.main-header{height:60px}.header-row{grid-template-columns:150px 1fr auto;gap:10px}.logo img{width:145px}.search,.mini-action{display:none}.mobile-menu-btn{display:block;justify-self:end}.mobile-drawer{position:fixed;top:60px;left:0;right:0;background:#fff;z-index:49;padding:12px 14px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.mobile-drawer.open{display:block}.mobile-drawer .search{display:flex;margin-bottom:8px}.mobile-drawer a{display:block;padding:10px 5px;border-bottom:1px solid var(--line);font-size:12px}.page-hero{padding:30px 0}.page-hero h1{font-size:30px}.page-hero p{font-size:13px}.category-rail{grid-template-columns:repeat(4,1fr)}.catalog{grid-template-columns:1fr}.filter-panel{display:none}.product-grid{grid-template-columns:repeat(2,1fr)}.product-thumb{height:165px}.product-detail{grid-template-columns:1fr}.gallery-main{height:360px}.detail h1{font-size:28px}.trust-side{grid-column:auto;grid-template-columns:1fr 1fr}.detail-strip{grid-template-columns:1fr 1fr}.cart-layout,.checkout-grid,.contact-grid,.account-layout{grid-template-columns:1fr}.cart-progress{justify-content:flex-start;margin-top:15px;overflow:auto}.feature-grid{grid-template-columns:1fr 1fr}.info-band{grid-template-columns:1fr}.auth-wrap{grid-template-columns:1fr}.auth-art{display:none}.account-menu{display:flex;overflow:auto}.account-menu a{white-space:nowrap}.dashboard-grid{grid-template-columns:1fr 1fr}.brands{grid-template-columns:repeat(4,1fr);height:auto;padding:24px 0;gap:22px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.mobile-bottom{display:grid;position:fixed;bottom:0;left:0;right:0;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);z-index:45;padding-bottom:env(safe-area-inset-bottom)}.mobile-bottom a{height:55px;display:grid;place-items:center;font-size:9px;color:#62717c}.mobile-bottom b{display:block;font-size:18px}.floating-help{bottom:68px}.footer{padding-bottom:58px}}
@media(max-width:520px){.category-rail{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:1fr 1fr;gap:8px}.product-thumb{height:130px}.product-title{font-size:10px}.price{font-size:13px}.trust-side{grid-template-columns:1fr}.detail-strip{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.cart-item{grid-template-columns:75px 1fr}.cart-item>strong{grid-column:2}.brands{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:7px}.dashboard-grid{grid-template-columns:1fr 1fr}.page-hero h1{font-size:28px}}


/* ===== Premium redesign v5 overrides ===== */
body{font-size:17px;color:#081626;background:#f5f8fa}.container{width:min(var(--container),calc(100% - 48px))}
.topbar{font-size:14px}.topbar-inner{height:40px}.top-links,.top-actions{gap:24px}.main-header{height:84px;box-shadow:0 12px 32px rgba(7,31,41,.06)}.header-row{grid-template-columns:196px 1fr minmax(290px,380px) auto auto auto;gap:16px}.logo img{width:182px}.nav{gap:28px;font-size:15px;font-weight:700}.nav a{height:84px}.search{height:50px;border-radius:15px}.search input{font-size:14px;padding:0 16px}.mini-action{font-size:14px;gap:10px}.mini-action strong{font-size:14px}.mini-action small{font-size:11px}.mini-action>b{font-size:22px}.cart-count{width:20px;height:20px;font-size:10px}
.page-hero{padding:56px 0 34px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(4,35,46,.96),rgba(7,68,79,.88)),url('../assets/pixel/banner-security.png') center/cover no-repeat;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}body[data-page="products"] .page-hero{background:linear-gradient(90deg,rgba(4,35,46,.96),rgba(7,68,79,.82)),url('../assets/pixel/hero-visual.png') center/cover no-repeat}body[data-page="contact"] .page-hero{background:linear-gradient(90deg,rgba(4,35,46,.96),rgba(7,68,79,.8)),url('../assets/pixel/hero-visual.png') center/cover no-repeat}body[data-page="categories"] .page-hero,body[data-page="solutions"] .page-hero,body[data-page="about"] .page-hero{background:linear-gradient(90deg,rgba(4,35,46,.96),rgba(7,68,79,.82)),url('../assets/pixel/banner-security.png') center/cover no-repeat}.crumb{font-size:13px;color:#d5e6ea;margin-bottom:12px}.page-hero h1{font:800 56px/1.02 Manrope;margin:0 0 14px;letter-spacing:-.04em;max-width:760px}.page-hero p{font-size:18px;line-height:1.65;color:#e0edf0;max-width:800px}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.2fr) 360px;gap:24px;align-items:end}.hero-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}.hero-pills span{padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);color:#eff9fb;font-size:13px;font-weight:700}.hero-side-card{padding:24px;border-radius:24px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.14)}.hero-side-kicker{font-size:11px;letter-spacing:.18em;font-weight:800;color:#8df2e6;margin-bottom:10px}.hero-side-card h3{margin:0 0 10px;font:800 28px/1.08 Manrope;color:#fff}.hero-side-card p{margin:0;color:#d7e8eb;font-size:15px;line-height:1.6}.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.hero-metrics div{padding:14px;border-radius:16px;background:rgba(255,255,255,.08)}.hero-metrics strong{display:block;font-size:22px;color:#fff}.hero-metrics span{display:block;font-size:12px;color:#d6e8eb;line-height:1.35}
.category-rail{gap:14px;margin-top:28px}.category-chip{height:100px;border-radius:20px;font-size:12px;font-weight:700;gap:8px;padding:10px}.category-chip b{font-size:24px}.category-chip.active{box-shadow:0 14px 28px rgba(4,162,151,.22)}
.catalog{grid-template-columns:270px 1fr;gap:26px;padding:32px 0 64px}.filter-panel{padding:24px;border-radius:24px;box-shadow:0 18px 34px rgba(6,31,42,.05)}.filter-title{font-size:20px}.filter-intro{font-size:13px;color:#72808b;line-height:1.65;margin:0 0 10px}.filter-group{padding:17px 0}.filter-group h4{font-size:14px;margin:0 0 12px}.check{font-size:14px;margin:11px 0}.price-range{height:6px;border-radius:999px}.filter-note{margin-top:14px;padding:14px;border-radius:16px;background:#f1f8f9;color:#24515a;font-size:13px;line-height:1.5}
.toolbar{margin-bottom:18px}.toolbar .muted{font-size:15px}.select{font-size:14px;padding:12px 15px;border-radius:12px}.view-btns button{width:38px;height:38px;border-radius:10px}
.product-grid{gap:18px}.product-card{border-radius:18px;box-shadow:0 10px 24px rgba(7,29,39,.04)}.product-thumb{height:198px;padding:16px}.pill{top:12px;left:12px;font-size:10px;padding:5px 9px}.heart{right:12px;top:10px}.product-info{padding:14px 14px 13px}.product-title{font-size:15px;line-height:1.45;min-height:42px}.price{font-size:18px;margin-top:10px}.old-price{font-size:12px}.rating{font-size:12px;margin-top:10px}.add-cart{width:38px;height:38px;border-radius:10px;font-size:16px}
.section{padding:48px 0 74px}.section-head{margin-bottom:24px}.section-head h2{font:800 40px/1.05 Manrope;margin:0}.section-head p{font-size:17px;line-height:1.65;max-width:780px}.feature-grid{gap:22px}.feature-card{border-radius:24px;overflow:hidden;box-shadow:0 16px 30px rgba(7,29,39,.05);display:flex;flex-direction:column}.feature-card .card-media{height:220px;background:linear-gradient(180deg,#f8fbfc,#eef3f6);display:flex;align-items:center;justify-content:center}.feature-card .card-media.contain img{width:100%;height:100%;object-fit:contain;padding:18px}.feature-card .card-media.cover img{width:100%;height:100%;object-fit:cover}.feature-card .card-media.wide{height:220px}.feature-card .card-body{padding:24px}.feature-card h3{font:800 30px/1.1 Manrope;margin:0 0 10px}.feature-card p{font-size:15px;line-height:1.7;color:#657481}.icon-box{width:52px;height:52px;border-radius:16px;font-size:24px;margin-bottom:14px}
.info-band{gap:20px;margin-top:28px}.info-panel{border-radius:30px;padding:34px;min-height:310px;background:linear-gradient(135deg,#05313f,#0a6570);color:#fff;box-shadow:0 18px 36px rgba(7,29,39,.08)}.info-panel.light{background:linear-gradient(135deg,#eef7f8,#dcecef);color:var(--ink)}.section-kicker{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#9df2e8;font-size:11px;font-weight:800;letter-spacing:.14em;margin-bottom:16px}.section-kicker.dark{background:#e9f6f6;color:#0b796f}.info-panel h2{font:800 42px/1.04 Manrope;margin:0 0 12px;max-width:700px}.info-panel p{font-size:16px;line-height:1.75;color:#d8ebee;max-width:760px}.info-panel.light p{color:#576673}.bullet-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.bullet-chip{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:700}.panel-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.stat-card{padding:18px;border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(4px)}.info-panel.light .stat-card{background:rgba(4,61,73,.05)}.stat-card strong{display:block;font-size:24px;color:#fff}.info-panel.light .stat-card strong{color:#07303b}.stat-card span{display:block;font-size:13px;line-height:1.4;color:#dcecef}.info-panel.light .stat-card span{color:#5a6b75}.mini-info-list{display:grid;gap:14px;margin:18px 0 24px}.mini-info-list div{padding:15px 16px;border-radius:18px;background:rgba(4,61,73,.05)}.mini-info-list strong{display:block;font-size:15px;margin-bottom:4px}.mini-info-list span{display:block;color:#5d6d78;font-size:14px;line-height:1.55}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;padding:36px 0 74px}.contact-info{padding:32px;border-radius:30px;background:linear-gradient(145deg,#042d3a,#0a5b67);box-shadow:0 18px 36px rgba(7,29,39,.08)}.contact-info h2{font:800 40px/1.05 Manrope;margin:0 0 12px}.contact-info p{font-size:16px;line-height:1.75;color:#d0e4e8}.contact-stack{display:grid;gap:14px;margin-top:24px}.contact-tile{padding:18px 18px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}.contact-tile b{display:block;font-size:16px;margin-bottom:6px}.contact-tile span{display:block;font-size:14px;line-height:1.55;color:#d6e8ec}.contact-form{padding:34px;border-radius:30px;box-shadow:0 18px 36px rgba(7,29,39,.05)}.premium-form .form-head h2{font:800 40px/1.05 Manrope;margin:8px 0 10px}.premium-form .form-head p{margin:0 0 18px;color:#677580;font-size:15px;line-height:1.7}.field{padding:16px 18px;border-radius:16px;border:1px solid #dbe5ea;font-size:15px;background:#fbfcfd}.form-grid{gap:14px}.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px}.form-note{font-size:13px;color:#65747f}
.btn{padding:14px 20px;border-radius:14px;font-size:14px}.btn-outline.light-outline{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff}.btn-outline.light-outline:hover{background:rgba(255,255,255,.1)}
.brand-strip{background:#fff;border-top:1px solid #e9eef2;border-bottom:1px solid #e9eef2}.brands{height:auto;padding:28px 0;grid-template-columns:repeat(8,1fr);font:800 22px Manrope;color:#6a7279}
.footer-cta{padding:0 0 26px;background:transparent}.footer-cta-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.footer-cta-main{padding:38px;border-radius:30px;background:linear-gradient(135deg,#042f3c,#0b6772);color:#fff;box-shadow:0 18px 36px rgba(7,29,39,.08)}.footer-cta-main h2{font:800 42px/1.05 Manrope;margin:0 0 12px;max-width:760px}.footer-cta-main p{font-size:16px;line-height:1.75;color:#d7ebee;max-width:760px}.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.trust-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.trust-chips span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px;font-weight:700}.footer-cta-side{padding:32px;border-radius:30px;background:linear-gradient(135deg,#eef7f8,#dcecef);box-shadow:0 18px 36px rgba(7,29,39,.05)}.support-widget{display:flex;gap:16px;align-items:flex-start}.support-icon{width:56px;height:56px;border-radius:18px;background:#082f39;color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 14px 26px rgba(7,29,39,.12)}.footer-cta-side h3{font:800 30px/1.1 Manrope;margin:0 0 8px}.footer-cta-side p{font-size:15px;line-height:1.7;color:#596875;margin:0 0 18px}.support-points{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px}.support-points span{padding:10px 14px;border-radius:999px;background:#fff;color:#07313b;font-size:13px;font-weight:700;box-shadow:0 6px 16px rgba(7,29,39,.04)}
.footer{background:linear-gradient(180deg,#051d29,#052836);color:#d8e4e8}.footer-grid{grid-template-columns:1.45fr repeat(4,1fr);gap:34px;padding:46px 0 34px}.footer-brand img{width:194px}.footer-brand p{font-size:14px;line-height:1.8;color:#abc1c8;max-width:360px}.footer-contact-list{display:grid;gap:10px;margin-top:18px}.footer-contact-list span{font-size:13px;color:#c4d7dc}.footer h4{font-size:17px;margin:0 0 14px}.footer a{font-size:14px;margin:10px 0;color:#adc1c8}.footer a:hover{color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:16px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#9ab1b8}.footer-badges{display:flex;gap:10px;flex-wrap:wrap}.footer-badges span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#deeff2;font-size:12px}
.floating-help{position:fixed;right:20px;bottom:20px;width:64px;height:64px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:linear-gradient(135deg,#15d5c1,#06928f);color:#fff;box-shadow:0 18px 34px rgba(4,125,124,.28);font-size:24px;z-index:40;display:grid;place-items:center}.floating-help span{line-height:1}.toast{font-size:13px;padding:14px 16px;top:98px}
@media(max-width:1180px){.header-row{grid-template-columns:184px 1fr 260px auto auto}.nav{display:none}.page-hero h1{font-size:44px}.page-hero p{font-size:17px}.hero-layout,.footer-cta-grid{grid-template-columns:1fr}.category-rail{grid-template-columns:repeat(4,1fr)}.catalog{grid-template-columns:1fr}.filter-panel{display:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.2fr repeat(2,1fr)}.footer-brand{grid-column:1/-1}}
@media(max-width:820px){.container{width:min(100% - 24px,var(--container))}.main-header{height:68px}.header-row{grid-template-columns:154px 1fr auto;gap:10px}.logo img{width:150px}.page-hero{padding:36px 0 28px}.page-hero h1{font-size:34px}.page-hero p{font-size:15px}.hero-pills span{font-size:12px}.hero-side-card{padding:20px}.hero-side-card h3{font-size:24px}.category-rail{grid-template-columns:repeat(2,1fr)}.category-chip{height:90px}.toolbar{flex-direction:column;align-items:flex-start;gap:10px}.product-grid,.feature-grid{grid-template-columns:1fr 1fr}.feature-card .card-media,.feature-card .card-media.wide{height:180px}.feature-card h3{font-size:24px}.section-head h2,.info-panel h2,.footer-cta-main h2,.premium-form .form-head h2,.contact-info h2{font-size:30px}.info-band,.contact-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr}.footer-cta-main,.footer-cta-side,.info-panel,.contact-info,.contact-form{padding:26px}.brands{grid-template-columns:repeat(4,1fr);font-size:18px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer{padding-bottom:58px}.floating-help{bottom:72px}.mobile-bottom{display:grid}}
@media(max-width:520px){body{font-size:16px}.topbar{display:none}.page-hero h1{font-size:29px}.page-hero p{font-size:14px}.hero-metrics{grid-template-columns:1fr}.product-grid,.feature-grid{grid-template-columns:1fr}.product-thumb{height:160px}.feature-card .card-media{height:170px}.brands{grid-template-columns:repeat(2,1fr);font-size:16px}.footer-grid,.footer-bottom{grid-template-columns:1fr;display:grid}.footer-bottom{gap:10px}.contact-form,.contact-info,.info-panel,.footer-cta-main,.footer-cta-side{padding:22px}}

/* ==========================================================================\n   SERVICAM RED 360 — Premium e-commerce V6\n   ========================================================================== */
:root{
  --v6-deep:#052a35;
  --v6-deep-2:#073d49;
  --v6-teal:#0bb8a9;
  --v6-teal-bright:#18d7c3;
  --v6-ink:#071826;
  --v6-muted:#63727f;
  --v6-line:#e1e9ed;
  --v6-soft:#f4f8f9;
  --v6-shadow:0 18px 50px rgba(6,31,42,.08);
  --v6-shadow-lg:0 28px 80px rgba(6,31,42,.14);
}
body{font-size:17px;background:#fff;color:var(--v6-ink)}
.container{width:min(1460px,calc(100% - 64px))}
.site-icon{display:inline-flex;align-items:center;justify-content:center;flex:none}.site-icon svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.topbar{background:linear-gradient(90deg,#042b38,#0a5d6b);font-size:14px}.topbar-inner{height:42px}.top-links,.top-actions{gap:24px}.topbar a{display:flex;align-items:center;gap:7px;font-weight:600}.topbar .site-icon{font-size:15px}.country-pill{font-weight:700}
.main-header{height:88px;background:rgba(255,255,255,.985);box-shadow:0 10px 34px rgba(6,31,42,.06)}.header-row{height:88px;grid-template-columns:190px minmax(470px,1fr) minmax(260px,370px) auto auto auto;gap:18px}.logo img{width:182px}.nav{gap:28px;font-size:15px}.nav a{height:88px}.nav a.active:after,.nav a:hover:after{height:3px}.premium-search{height:52px;border-radius:17px;position:relative;background:#f8fafb}.premium-search .search-prefix{padding-left:14px;color:#60717d;font-size:18px}.premium-search input{font-size:14px;padding:0 10px}.premium-search button{height:52px;width:52px;display:grid;place-items:center}.premium-search button .site-icon{font-size:19px}.mini-action{font-size:14px;gap:10px}.mini-action>.site-icon{font-size:25px;color:#082e39}.mini-action strong{font-size:14px}.mini-action small{font-size:11px}.mobile-menu-btn .site-icon{font-size:26px}

/* Home */
.home-page{background:#fff}.home-hero{background:linear-gradient(115deg,#031e28 0%,#05333e 46%,#0b4650 100%);color:#fff;position:relative;overflow:hidden}.home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 44%,rgba(21,216,195,.18),transparent 36%),linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%);pointer-events:none}.home-hero-grid{min-height:530px;display:grid;grid-template-columns:.88fr 1.12fr;gap:44px;align-items:center;position:relative;z-index:1}.home-hero-copy{padding:58px 0 62px}.home-eyebrow{display:block;color:#70f2e5;font-size:13px;letter-spacing:.25em;font-weight:800;margin-bottom:16px}.home-hero h1{font:800 58px/.98 Manrope,Inter,sans-serif;letter-spacing:-.045em;margin:0 0 20px;max-width:690px}.home-hero h1 em{display:block;color:#17ddc7;font-style:normal}.home-hero-copy>p{font-size:18px;line-height:1.65;color:#d8e6ea;max-width:650px;margin:0 0 26px}.home-hero-actions{display:flex;gap:13px;flex-wrap:wrap}.home-hero-actions .btn{padding:15px 22px;border-radius:999px;font-size:15px}.home-primary{box-shadow:0 16px 36px rgba(11,184,169,.26)}.btn-hero-outline{border:1px solid rgba(255,255,255,.62);color:#fff;background:rgba(255,255,255,.04)}.btn-hero-outline:hover{background:rgba(255,255,255,.1)}.home-hero-trust{display:flex;gap:12px;margin-top:32px}.home-hero-trust div{min-width:132px;padding:13px 15px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055)}.home-hero-trust b{display:block;font-size:18px;color:#fff}.home-hero-trust span{display:block;font-size:11px;color:#aac3c9;margin-top:3px}.home-hero-visual{min-height:500px;position:relative;display:flex;align-items:center}.hero-image-frame{position:absolute;left:0;right:112px;top:50%;transform:translateY(-50%);height:380px;border-radius:28px;overflow:hidden;background:#07323d;box-shadow:0 34px 80px rgba(0,0,0,.32)}.hero-image-frame img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-image-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border-radius:inherit}.hero-feature-card{position:absolute;right:0;width:270px;display:grid;grid-template-columns:48px 1fr 18px;gap:12px;align-items:center;padding:15px;border-radius:18px;background:linear-gradient(90deg,rgba(6,187,170,.94),rgba(10,72,82,.90));border:1px solid rgba(255,255,255,.17);box-shadow:0 16px 30px rgba(0,0,0,.2);backdrop-filter:blur(8px)}.feature-location{top:90px}.feature-alerts{top:202px}.feature-secure{top:314px}.hero-feature-icon{width:48px;height:48px;border-radius:14px;background:rgba(0,0,0,.15);display:grid;place-items:center;font-size:24px}.hero-feature-card strong{display:block;font-size:13px}.hero-feature-card small{display:block;color:#d4edef;font-size:10.5px;margin-top:4px}.hero-feature-card>b{font-size:24px;font-weight:400;color:#fff}
.home-benefits-wrap{background:#fff;position:relative;z-index:4}.home-benefits{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--v6-line);border-radius:0 0 24px 24px;box-shadow:0 14px 32px rgba(6,31,42,.05);overflow:hidden}.home-benefits article{min-height:86px;display:flex;gap:12px;align-items:center;padding:16px;border-right:1px solid var(--v6-line)}.home-benefits article:last-child{border-right:0}.benefit-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid #cfeeea;color:#07837a;background:#f7fffe;font-size:18px;flex:none}.home-benefits strong{display:block;font-size:13px;line-height:1.25}.home-benefits small{display:block;font-size:10.5px;color:#7b8994;margin-top:4px;line-height:1.3}
.home-categories-section{padding-top:48px}.home-section-head{align-items:flex-end}.section-link{color:#06877e;font-size:14px;font-weight:800;white-space:nowrap}.home-category-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.home-category-card{border:1px solid var(--v6-line);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#fafcfd,#f1f5f7);box-shadow:0 8px 20px rgba(6,31,42,.035);transition:.22s}.home-category-card:hover{transform:translateY(-4px);box-shadow:var(--v6-shadow)}.home-category-card.featured{background:linear-gradient(145deg,#063544,#06232d);color:#fff;border-color:#09c4b4;box-shadow:0 0 0 2px rgba(11,184,169,.12),0 14px 30px rgba(5,75,77,.15)}.home-cat-media{height:120px;display:flex;align-items:center;justify-content:center;padding:8px}.home-cat-media img{width:100%;height:100%;object-fit:contain}.home-cat-meta{display:flex;justify-content:space-between;align-items:center;padding:13px 12px 15px;gap:8px}.home-cat-meta strong{font-size:13px;line-height:1.2}.home-cat-meta span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#19343b;box-shadow:0 5px 12px rgba(0,0,0,.07)}.featured .home-cat-meta span{background:#07857b;color:#fff}
.home-promo-section{padding:0 0 16px}.home-promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.home-promo-card{height:188px;border-radius:24px;overflow:hidden;position:relative;display:block;box-shadow:0 14px 30px rgba(6,31,42,.07)}.home-promo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.home-promo-card:after{content:"";position:absolute;inset:0}.home-promo-card.security:after{background:linear-gradient(90deg,rgba(3,30,40,.96) 0%,rgba(3,30,40,.74) 44%,rgba(3,30,40,.15) 70%,rgba(3,30,40,0) 100%)}.home-promo-card.fleet:after{background:linear-gradient(90deg,rgba(238,250,252,.98) 0%,rgba(238,250,252,.84) 45%,rgba(238,250,252,.25) 73%,rgba(238,250,252,0) 100%)}.home-promo-copy{position:absolute;z-index:2;left:28px;top:24px;max-width:49%}.home-promo-copy h3{font:800 30px/1.05 Manrope;margin:0 0 8px;color:#fff}.fleet .home-promo-copy h3{color:#08293a}.home-promo-copy p{font-size:14px;line-height:1.55;color:#d9e9ec;margin:0 0 13px}.fleet .home-promo-copy p{color:#365361}.promo-cta{display:inline-flex;padding:10px 15px;border-radius:999px;background:#fff;color:#082b38;font-size:12px;font-weight:800}.promo-cta.dark{background:#072f3d;color:#fff}
.home-products-section{padding-top:34px}.product-heading-row{gap:30px}.home-product-tabs{display:flex;align-items:center;gap:5px;padding:5px;border-radius:999px;background:#f2f6f7;border:1px solid #e4ebee;overflow:auto}.home-product-tabs button{border:0;background:transparent;padding:10px 14px;border-radius:999px;color:#65737f;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}.home-product-tabs button.active{background:#fff;color:#07887e;box-shadow:0 5px 14px rgba(6,31,42,.08)}.home-product-grid{grid-template-columns:repeat(8,1fr)}.home-product-grid .product-card{min-width:0}.home-product-grid .product-thumb{height:128px}.home-product-grid .product-title{font-size:12px;min-height:35px}.home-product-grid .price{font-size:15px}.home-product-grid .rating{font-size:10px}.home-product-grid .product-info{padding:11px}.home-product-grid .add-cart{width:32px;height:32px}
.home-value-section{background:linear-gradient(180deg,#f8fbfc,#f2f7f8);padding:62px 0}.home-value-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:20px}.value-main{border-radius:30px;padding:40px;background:linear-gradient(135deg,#042c39,#0a626c);color:#fff;box-shadow:var(--v6-shadow)}.value-main h2{font:800 43px/1.04 Manrope;margin:0 0 14px;max-width:760px}.value-main>p{font-size:16px;line-height:1.75;color:#d7eaed;max-width:740px}.value-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0}.value-points span{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);font-size:13px;font-weight:700}.value-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.value-cards article{padding:24px;border:1px solid var(--v6-line);border-radius:24px;background:#fff;box-shadow:0 12px 28px rgba(6,31,42,.05)}.value-cards article>span{display:inline-flex;padding:7px 9px;border-radius:10px;background:#e8f8f6;color:#087e76;font-size:12px;font-weight:800}.value-cards h3{font:800 22px/1.1 Manrope;margin:16px 0 8px}.value-cards p{font-size:14px;line-height:1.65;color:#667581;margin:0}
.home-app-section{padding:54px 0 70px}.home-app-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}.app-premium-card{min-height:350px;border-radius:30px;background:linear-gradient(120deg,#052d3a,#075f6a);color:#fff;overflow:hidden;position:relative;box-shadow:var(--v6-shadow-lg)}.app-copy{padding:38px;width:60%;position:relative;z-index:2}.app-copy h2{font:800 42px/1.03 Manrope;margin:0 0 12px}.app-copy>p{font-size:16px;line-height:1.7;color:#d2e8eb}.app-feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.app-feature-list span{font-size:13px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.08)}.app-phone-art{position:absolute;right:-9%;top:0;width:54%;height:100%;opacity:.96}.app-phone-art img{width:100%;height:100%;object-fit:cover;object-position:65% center}.app-phone-art:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#075f6a 0%,rgba(7,95,106,.45) 35%,transparent 70%);z-index:1}.store-badges{display:flex;gap:10px;flex-wrap:wrap}.store-badge{display:inline-flex;padding:11px 14px;border-radius:10px;background:#04090c;color:#fff;border:1px solid rgba(255,255,255,.2);font-size:11px;font-weight:800}.advisor-card{border-radius:30px;background:linear-gradient(145deg,#eef8f9,#dbecef);padding:34px;box-shadow:var(--v6-shadow);display:flex;flex-direction:column}.advisor-status{align-self:flex-start;padding:8px 11px;border-radius:999px;background:#fff;color:#057c73;font-size:11px;font-weight:800}.advisor-icon{width:58px;height:58px;border-radius:18px;background:#07333f;color:#fff;display:grid;place-items:center;font-size:26px;margin:28px 0 18px;box-shadow:0 12px 28px rgba(7,51,63,.18)}.advisor-card h3{font:800 31px/1.05 Manrope;margin:0 0 10px}.advisor-card p{font-size:15px;line-height:1.7;color:#5f6e79}.advisor-options{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px}.advisor-options span{padding:9px 12px;border-radius:999px;background:#fff;font-size:12px;font-weight:700}.advisor-card .btn{margin-top:auto;align-self:flex-start}

/* Internal pages / standardization */
.page-hero{padding:58px 0 42px;background:linear-gradient(90deg,rgba(3,34,45,.97),rgba(8,79,90,.88)),url('../assets/pixel/banner-security.png') center/cover no-repeat}.page-hero h1{font-size:52px}.page-hero p{font-size:18px}.hero-side-card p{font-size:14px}.category-chip{font-size:13px}.filter-title{font-size:20px}.filter-group h4{font-size:14px}.check{font-size:14px}.toolbar .muted{font-size:15px}.product-title{font-size:15px}.product-card .price{font-size:18px}.feature-card .card-media.contain img{max-width:90%;max-height:90%;object-fit:contain;padding:0;image-rendering:auto}.feature-card .card-media{background:linear-gradient(180deg,#fbfcfd,#eef3f5)}.feature-card h3{font-size:26px}.feature-card p{font-size:15px}.info-panel>img{display:none!important}.info-panel{min-height:280px}.info-panel h2{font-size:38px}.contact-info h2{font-size:38px}.premium-form .form-head h2{font-size:38px}.field{font-size:15px}.panel{border-radius:22px;box-shadow:0 14px 34px rgba(6,31,42,.05)}
.product-detail{padding:42px 0 48px}.gallery-main{height:520px;border-radius:26px}.detail h1{font-size:38px}.detail p{font-size:15px}.feature-list span{font-size:14px}.trust-box{border-radius:20px;padding:20px}.trust-box h3{font-size:17px}.trust-item{font-size:12px}.trust-item b{font-size:13px}.install-card{border-radius:20px;padding:18px}.install-card h4{font-size:15px}.install-card p{font-size:12px}.detail-strip{border-radius:18px}.detail-strip b{font-size:13px}.detail-strip span{font-size:11px}
.cart-layout,.checkout-grid{padding-top:38px}.panel-head{font-size:16px}.cart-item h4{font-size:15px}.cart-item .cart-cat{font-size:11px}.summary h3{font-size:22px}.summary-row{font-size:14px}.summary-row.total{font-size:20px}.secure-note{font-size:12px}.form-section h3{font-size:18px}.radio-card{font-size:14px}.account-menu a{font-size:14px}.stat small{font-size:12px}.stat strong{font-size:28px}.order-table{font-size:13px}

/* Premium footer */
.footer-commerce{background:#fff;padding:24px 0 0}.footer-commerce-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--v6-line);border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 -8px 28px rgba(6,31,42,.035)}.footer-commerce article{padding:20px;display:flex;gap:13px;align-items:center;border-right:1px solid var(--v6-line)}.footer-commerce article:last-child{border-right:0}.commerce-icon{width:42px;height:42px;border-radius:14px;background:#e9f9f7;color:#07857b;display:grid;place-items:center;font-weight:800;flex:none}.footer-commerce strong{display:block;font-size:14px}.footer-commerce small{display:block;color:#7c8993;font-size:11px;margin-top:4px;line-height:1.4}.brand-strip{background:#f8fafb;border-top:1px solid #e7edef;border-bottom:1px solid #e7edef}.brands{height:auto;padding:30px 0;font:800 20px Manrope;color:#6d757c}.footer-v6{background:linear-gradient(180deg,#041923 0%,#052a35 100%)}.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:40px;padding:50px 0 38px}.footer-brand img{width:205px;filter:brightness(0) invert(1);opacity:.96}.footer-brand p{font-size:14px;line-height:1.8;color:#a9bec5;max-width:390px;margin:18px 0}.footer-contact-list{display:grid;gap:10px}.footer-contact-list span{display:flex;gap:8px;align-items:center;color:#c6d6db;font-size:12px}.footer-contact-list .site-icon{font-size:15px;color:#65e5d8}.footer-column h4,.footer-news h4{font-size:16px;color:#fff;margin:0 0 16px}.footer-column a{font-size:13px;color:#a9bdc4;margin:11px 0}.footer-column a:hover{color:#fff}.footer-news-kicker{display:block;color:#55dfd1;font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:10px}.footer-news p{font-size:12px;line-height:1.65;color:#9db4bc}.footer-news form{display:flex;margin-top:15px;border:1px solid rgba(255,255,255,.12);border-radius:13px;overflow:hidden;background:rgba(255,255,255,.04)}.footer-news input{flex:1;min-width:0;border:0;background:transparent;color:#fff;outline:0;padding:12px;font-size:12px}.footer-news input::placeholder{color:#78929b}.footer-news button{width:44px;border:0;background:#0eb5a7;color:#fff;font-size:20px}.footer-socials{display:flex;gap:8px;margin-top:16px}.footer-socials span{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#dce8eb;font-size:12px;font-weight:800}.footer-bottom{padding:18px 0 24px;font-size:12px}.footer-badges span{border:1px solid rgba(255,255,255,.07)}.floating-help{width:62px;height:62px;display:grid;place-items:center}.floating-help .site-icon{font-size:27px}.floating-help>i{position:absolute;right:5px;top:5px;width:12px;height:12px;border-radius:50%;background:#7ef4a4;border:2px solid #fff}.mobile-bottom .site-icon{font-size:19px}

@media(max-width:1320px){
  .header-row{grid-template-columns:180px 1fr 290px auto auto;gap:14px}.mini-action:nth-of-type(2){display:none}.home-product-grid{grid-template-columns:repeat(4,1fr)}.home-category-grid{grid-template-columns:repeat(4,1fr)}.home-hero-grid{grid-template-columns:1fr 1.15fr}.home-hero h1{font-size:52px}.hero-image-frame{right:90px}.hero-feature-card{width:235px}.footer-main{grid-template-columns:1.4fr repeat(3,1fr)}.footer-news{grid-column:1/-1;max-width:520px}.home-benefits{grid-template-columns:repeat(3,1fr)}.home-benefits article:nth-child(3n){border-right:0}.home-benefits article:nth-child(-n+3){border-bottom:1px solid var(--v6-line)}}
@media(max-width:1100px){
  .nav{display:none}.header-row{grid-template-columns:180px 1fr auto auto auto}.mobile-menu-btn{display:block}.home-hero-grid{grid-template-columns:1fr}.home-hero-copy{padding:50px 0 10px}.home-hero-visual{min-height:440px}.hero-image-frame{left:0;right:95px}.home-value-grid,.home-app-grid{grid-template-columns:1fr}.home-category-grid{grid-template-columns:repeat(4,1fr)}.footer-main{grid-template-columns:1.5fr 1fr 1fr}.footer-news{grid-column:auto}.hero-layout{grid-template-columns:1fr}.category-rail{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){
  body{font-size:16px}.container{width:min(100% - 28px,1460px)}.topbar{display:none}.main-header,.header-row{height:68px}.header-row{grid-template-columns:158px 1fr auto}.logo img{width:150px}.premium-search,.mini-action{display:none}.mobile-menu-btn{display:block}.mobile-drawer{top:68px}.home-hero-grid{min-height:auto}.home-hero-copy{padding:38px 0 20px}.home-hero h1{font-size:38px}.home-hero-copy>p{font-size:15px}.home-hero-trust{overflow:auto}.home-hero-visual{min-height:380px}.hero-image-frame{left:0;right:0;height:280px}.hero-feature-card{display:none}.home-benefits{grid-template-columns:repeat(2,1fr);border-radius:0 0 18px 18px}.home-benefits article:nth-child(3n){border-right:1px solid var(--v6-line)}.home-benefits article:nth-child(2n){border-right:0}.home-benefits article{border-bottom:1px solid var(--v6-line)}.home-benefits article:nth-last-child(-n+2){border-bottom:0}.home-category-grid{grid-template-columns:repeat(2,1fr)}.home-promo-grid{grid-template-columns:1fr}.home-promo-card{height:175px}.home-product-grid{grid-template-columns:repeat(2,1fr)}.product-heading-row{align-items:flex-start}.home-product-tabs{width:100%}.home-value-grid,.value-cards{grid-template-columns:1fr}.value-main{padding:28px}.value-main h2{font-size:32px}.app-copy{width:100%;padding:28px}.app-copy h2{font-size:32px}.app-phone-art{opacity:.16;width:100%;right:0}.advisor-card{padding:28px}.page-hero{padding:38px 0 30px}.page-hero h1{font-size:34px}.page-hero p{font-size:15px}.section-head h2{font-size:30px}.section-head p{font-size:15px}.feature-grid{grid-template-columns:1fr}.feature-card .card-media{height:185px}.feature-card h3{font-size:23px}.info-panel h2,.contact-info h2,.premium-form .form-head h2{font-size:30px}.footer-commerce-grid{grid-template-columns:repeat(2,1fr)}.footer-commerce article:nth-child(2){border-right:0}.footer-commerce article:nth-child(-n+2){border-bottom:1px solid var(--v6-line)}.brands{grid-template-columns:repeat(4,1fr);font-size:16px}.footer-main{grid-template-columns:1fr 1fr;gap:26px}.footer-brand{grid-column:1/-1}.footer-news{grid-column:1/-1}.floating-help{bottom:74px}.footer-v6{padding-bottom:58px}}
@media(max-width:520px){
  .home-hero h1{font-size:32px}.home-eyebrow{font-size:10px}.home-hero-trust div{min-width:120px}.home-benefits{grid-template-columns:1fr}.home-benefits article{border-right:0!important;border-bottom:1px solid var(--v6-line)!important}.home-benefits article:last-child{border-bottom:0!important}.home-category-grid,.home-product-grid{grid-template-columns:1fr 1fr;gap:9px}.home-cat-media{height:105px}.home-cat-meta strong{font-size:12px}.home-promo-copy{left:18px;top:18px;max-width:65%}.home-promo-copy h3{font-size:22px}.home-promo-copy p{font-size:12px}.value-points,.app-feature-list{grid-template-columns:1fr}.footer-commerce-grid,.footer-main{grid-template-columns:1fr}.footer-commerce article{border-right:0;border-bottom:1px solid var(--v6-line)}.footer-commerce article:last-child{border-bottom:0}.brands{grid-template-columns:repeat(2,1fr)}.page-hero h1{font-size:29px}.category-rail{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:1fr}.home-product-grid{grid-template-columns:1fr 1fr}.home-product-grid .product-thumb{height:115px}.home-product-grid .product-title{font-size:11px}.home-product-grid .price{font-size:14px}.contact-grid{padding-top:24px}.footer-bottom{flex-direction:column;align-items:flex-start}.footer-badges{justify-content:flex-start}}

/* V6 page finishing */
.detail-category{color:#07877e;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}.stars{color:#ffad00}.stock-line{margin-top:14px;color:#078d7e;font-size:13px;font-weight:800}.install-icon{width:48px;height:48px;border-radius:15px;background:#fff;color:#087f76;display:grid;place-items:center;font-size:22px;margin-bottom:12px;box-shadow:0 8px 20px rgba(7,29,39,.05)}.install-card .btn{font-size:12px;padding:10px 14px}.premium-progress{justify-content:flex-start;flex-wrap:wrap}.premium-progress span{color:#d8e8eb}.premium-progress em{background:rgba(255,255,255,.22)}.premium-progress span.active{color:#fff}.cart-panel{overflow:hidden}.checkout-title h2{font:800 30px/1.05 Manrope;margin:6px 0 24px}.account-orders{margin-top:18px;overflow:hidden}.table-wrap{overflow:auto}.faq-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:start}.faq-panel{padding:10px 24px}.faq-panel details{border-bottom:1px solid var(--v6-line);padding:8px 0}.faq-panel details:last-child{border-bottom:0}.faq-panel summary{font-weight:800;font-size:16px;padding:15px 0;cursor:pointer;list-style:none}.faq-panel summary:after{content:'+';float:right;color:#07857b;font-size:22px}.faq-panel details[open] summary:after{content:'−'}.faq-panel p{font-size:14px;line-height:1.75;color:#657480;margin:0 0 18px}.faq-help-card{padding:32px;border-radius:28px;background:linear-gradient(135deg,#052e3a,#0a6670);color:#fff;box-shadow:var(--v6-shadow-lg);position:sticky;top:112px}.faq-help-card h2{font:800 34px/1.05 Manrope;margin:0 0 10px}.faq-help-card p{font-size:15px;line-height:1.7;color:#d4e9ec}.faq-help-card .btn{margin-right:8px;margin-top:10px}
.login-main{display:grid;grid-template-columns:1fr 480px;gap:28px;padding:44px 0 70px;align-items:stretch}.login-benefits{padding:38px;border-radius:30px;background:linear-gradient(135deg,#052e3a,#0a6570);color:#fff;box-shadow:var(--v6-shadow-lg)}.login-benefits h2{font:800 42px/1.05 Manrope;margin:0 0 12px}.login-benefits>p{font-size:16px;line-height:1.7;color:#d6e9ec;max-width:720px}.login-benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.login-benefit-grid>div{padding:18px;border-radius:18px;background:rgba(255,255,255,.08);display:flex;gap:12px}.login-benefit-grid b{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center}.login-benefit-grid strong{display:block;font-size:14px}.login-benefit-grid span{font-size:12px;color:#d8ebee;line-height:1.5}.login-card{padding:34px}.login-card-head h2{font:800 34px/1.05 Manrope;margin:4px 0 8px}.login-card-head p{color:#6d7b86;font-size:14px;margin:0 0 22px}.login-card .stack{display:grid;gap:14px}.login-card .stack>label{font-size:13px;font-weight:700;color:#243741}.login-card .stack>label .field{margin-top:7px}.login-card .split{font-size:12px}.login-card .remember{font-weight:500!important}.btn.block{width:100%}.or{display:flex;align-items:center;gap:12px;color:#9aa5ac;font-size:11px}.or:before,.or:after{content:'';height:1px;background:var(--v6-line);flex:1}
@media(max-width:1000px){.faq-layout,.login-main{grid-template-columns:1fr}.faq-help-card{position:static}.login-benefit-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.login-benefit-grid{grid-template-columns:1fr}.login-benefits,.login-card,.faq-help-card{padding:24px}.login-benefits h2{font-size:31px}}
/* Crisp image treatment for low-resolution category assets */
.feature-card .card-media.contain img{width:auto;height:auto;max-width:240px;max-height:150px;object-fit:contain;padding:0;filter:drop-shadow(0 12px 18px rgba(7,29,39,.08))}.feature-card .card-media.contain{padding:18px}.home-category-card .home-cat-media img{image-rendering:auto}
/* Header fit and readability refinement */
.header-row{grid-template-columns:190px minmax(540px,1fr) minmax(260px,310px) auto auto auto;gap:12px}.nav{gap:18px;font-size:14px}.home-product-grid .product-title{font-size:13px}.home-product-grid .price{font-size:16px}
@media(max-width:1420px){.header-row{grid-template-columns:180px minmax(500px,1fr) 270px auto auto;gap:10px}.mini-action:nth-of-type(2){display:none}.nav{gap:15px;font-size:13.5px}.logo img{width:174px}}
@media(max-width:1240px){.nav{display:none}.header-row{grid-template-columns:180px 1fr 300px auto auto auto}.mobile-menu-btn{display:block}}


/* ===== V7 Hero & Footer refinement ===== */
.home-hero{
  padding:40px 0 0;
  min-height:600px;
  background:
    linear-gradient(90deg, rgba(3,20,28,.70) 0%, rgba(4,24,34,.52) 28%, rgba(5,32,44,.12) 60%, rgba(3,22,30,.56) 100%),
    url('../assets/pixel/home-reference.png') center center/cover no-repeat;
  position:relative;
  overflow:hidden;
}
.home-hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(4,31,42,.18) 100%);
  pointer-events:none;
}
.home-hero-grid{grid-template-columns:minmax(0,610px) 1fr;align-items:center;min-height:510px;position:relative;z-index:1}
.home-hero-copy{padding:56px 0 36px;max-width:580px}
.home-eyebrow{font-size:15px;letter-spacing:.28em;color:#5ef3e4}
.home-hero h1{font-size:64px;line-height:.94;max-width:560px;text-shadow:0 10px 28px rgba(0,0,0,.22)}
.home-hero h1 em{display:block}
.home-hero-copy>p{font-size:17px;max-width:520px;color:#edf8fa;text-shadow:0 6px 20px rgba(0,0,0,.18)}
.hero-image-frame{display:none}
.home-hero-visual{min-height:500px;position:relative}
.hero-feature-card{
  width:278px;padding:16px 18px;border-radius:22px;
  background:linear-gradient(135deg, rgba(15,181,167,.88), rgba(9,96,118,.84));
  box-shadow:0 18px 44px rgba(3,19,26,.26);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px)
}
.hero-feature-card div{display:grid;gap:4px}
.hero-feature-card strong{font-size:15px}
.hero-feature-card small{font-size:13px;color:#ebf8fb;line-height:1.35}
.hero-feature-icon{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:21px}
.feature-location{top:64px;right:6px}
.feature-alerts{top:182px;right:22px}
.feature-secure{top:301px;right:8px}
.home-benefits-wrap{margin-top:-10px;position:relative;z-index:2}

.page-hero{
  padding:64px 0 40px;
  min-height:325px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(4,25,35,.86) 0%, rgba(4,37,50,.72) 35%, rgba(3,28,38,.18) 68%, rgba(4,25,35,.60) 100%),
    url('../assets/pixel/home-reference.png') center/cover no-repeat;
  position:relative;
  overflow:hidden;
}
.page-hero:before{
  content:'';position:absolute;right:8%;top:-90px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle, rgba(32,225,209,.23), transparent 68%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-size:60px;max-width:780px;text-shadow:0 10px 24px rgba(0,0,0,.18)}
.page-hero p{max-width:760px;color:#ebf5f7}
.hero-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:center;gap:28px}
.hero-pills span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 18px rgba(0,0,0,.08)}
.hero-side-card{
  border-radius:28px;
  background:linear-gradient(135deg, rgba(18,110,117,.42), rgba(8,59,77,.24));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 22px 50px rgba(2,16,24,.18);
  backdrop-filter:blur(12px);
}
.hero-side-card h3{font-size:27px}
.hero-metrics div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08)}
body[data-page="products"] .page-hero{background-image:linear-gradient(90deg, rgba(4,25,35,.86) 0%, rgba(4,37,50,.72) 35%, rgba(3,28,38,.18) 68%, rgba(4,25,35,.60) 100%), url('../assets/pixel/home-reference.png')}
body[data-page="categories"] .page-hero{background-image:linear-gradient(90deg, rgba(4,25,35,.86) 0%, rgba(4,37,50,.72) 35%, rgba(3,28,38,.18) 68%, rgba(4,25,35,.60) 100%), url('../assets/pixel/banner-security.png')}
body[data-page="solutions"] .page-hero{background-image:linear-gradient(90deg, rgba(4,25,35,.84) 0%, rgba(4,37,50,.68) 34%, rgba(3,28,38,.18) 66%, rgba(4,25,35,.54) 100%), url('../assets/pixel/banner-fleet.png')}
body[data-page="about"] .page-hero{background-image:linear-gradient(90deg, rgba(4,25,35,.86) 0%, rgba(4,37,50,.74) 35%, rgba(3,28,38,.18) 68%, rgba(4,25,35,.60) 100%), url('../assets/pixel/banner-security.png')}
body[data-page="contact"] .page-hero,
body[data-page="tracking"] .page-hero,
body[data-page="support"] .page-hero,
body[data-page="shipping"] .page-hero,
body[data-page="faq"] .page-hero,
body[data-page="cart"] .page-hero,
body[data-page="checkout"] .page-hero,
body[data-page="account"] .page-hero,
body[data-page="login"] .page-hero{background-image:linear-gradient(90deg, rgba(4,25,35,.86) 0%, rgba(4,37,50,.72) 35%, rgba(3,28,38,.18) 68%, rgba(4,25,35,.60) 100%), url('../assets/pixel/hero-visual.png')}

.footer-brand img{width:220px;filter:none;opacity:1}
.footer-brand a{display:inline-flex;align-items:center}
.footer-v6{background:linear-gradient(180deg,#021722 0%,#062b37 100%)}
.footer-main{padding-top:54px}

@media(max-width:1320px){
  .home-hero h1{font-size:58px}
  .page-hero h1{font-size:52px}
  .hero-feature-card{width:250px}
}
@media(max-width:1100px){
  .home-hero{min-height:auto;background-position:center center}
  .home-hero-grid{grid-template-columns:1fr;min-height:auto}
  .home-hero-copy{padding:52px 0 26px}
  .home-hero-visual{min-height:340px}
  .feature-location{top:14px}.feature-alerts{top:126px}.feature-secure{top:238px}
}
@media(max-width:820px){
  .home-hero{padding:26px 0 0}
  .home-hero h1{font-size:42px}
  .home-eyebrow{font-size:12px;letter-spacing:.22em}
  .home-hero-copy>p{font-size:15px}
  .page-hero{padding:40px 0 30px;min-height:auto}
  .page-hero h1{font-size:38px}
  .page-hero p{font-size:15px}
  .hero-side-card{padding:22px}
}
@media(max-width:560px){
  .home-hero{background-position:60% center}
  .home-hero h1{font-size:34px}
  .page-hero h1{font-size:30px}
  .page-hero p{font-size:14px}
}


/* ===== V8 Header image correction: use extracted header artwork only ===== */
.home-hero{
  background:
    linear-gradient(90deg, rgba(4,18,26,.88) 0%, rgba(4,22,31,.74) 26%, rgba(4,24,34,.32) 53%, rgba(4,20,28,.50) 100%),
    url('../assets/pixel/header-gps-premium.png') center center/cover no-repeat !important;
  min-height:548px !important;
}
.home-hero::before{
  background:linear-gradient(180deg, rgba(0,0,0,0) 68%, rgba(4,31,42,.12) 100%) !important;
}
.home-hero-grid{
  min-height:548px !important;
  grid-template-columns:minmax(0,580px) 1fr !important;
}
.home-hero-copy{
  padding:54px 0 28px !important;
  max-width:560px !important;
}
.home-hero h1{
  max-width:520px !important;
  font-size:62px !important;
  line-height:.96 !important;
}
.home-hero-copy>p{max-width:500px !important}
.home-hero-visual{min-height:500px !important}
.hero-image-frame{display:none !important}
.hero-feature-card{
  background:linear-gradient(135deg, rgba(6,123,124,.90), rgba(7,85,107,.84)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 20px 44px rgba(4,18,26,.24) !important;
}
.feature-location{top:84px !important; right:8px !important}
.feature-alerts{top:195px !important; right:28px !important}
.feature-secure{top:308px !important; right:12px !important}
.home-benefits-wrap{margin-top:-6px !important}

.page-hero,
body[data-page="products"] .page-hero,
body[data-page="categories"] .page-hero,
body[data-page="solutions"] .page-hero,
body[data-page="about"] .page-hero,
body[data-page="contact"] .page-hero,
body[data-page="tracking"] .page-hero,
body[data-page="support"] .page-hero,
body[data-page="shipping"] .page-hero,
body[data-page="faq"] .page-hero,
body[data-page="cart"] .page-hero,
body[data-page="checkout"] .page-hero,
body[data-page="account"] .page-hero,
body[data-page="login"] .page-hero{
  background:
    linear-gradient(90deg, rgba(4,18,26,.86) 0%, rgba(4,22,31,.72) 33%, rgba(4,24,34,.34) 64%, rgba(4,20,28,.52) 100%),
    url('../assets/pixel/header-gps-premium.png') center center/cover no-repeat !important;
}
.page-hero{
  min-height:318px !important;
  padding:60px 0 40px !important;
}
.page-hero h1{font-size:58px !important;max-width:720px !important}
.page-hero p{max-width:720px !important}
.hero-layout{grid-template-columns:minmax(0,1fr) 340px !important;gap:24px !important}
.hero-side-card{
  background:linear-gradient(135deg, rgba(11,87,97,.52), rgba(7,60,77,.28)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
.hero-side-card h3{font-size:24px !important}
.hero-side-card p{font-size:14px !important}
.hero-metrics div{background:rgba(255,255,255,.12) !important}

.footer-brand img{width:228px !important;height:auto !important;display:block}

@media(max-width:1100px){
  .home-hero-grid{grid-template-columns:1fr !important;min-height:auto !important}
  .home-hero{min-height:auto !important}
  .home-hero h1{font-size:52px !important}
  .home-hero-visual{min-height:330px !important}
  .feature-location{top:6px !important; right:0 !important}
  .feature-alerts{top:116px !important; right:18px !important}
  .feature-secure{top:226px !important; right:6px !important}
  .page-hero h1{font-size:46px !important}
}
@media(max-width:820px){
  .home-hero{background-position:60% center !important}
  .home-hero h1{font-size:40px !important}
  .page-hero{padding:40px 0 28px !important}
  .page-hero h1{font-size:36px !important}
  .hero-layout{grid-template-columns:1fr !important}
}
@media(max-width:560px){
  .home-hero{background-position:66% center !important}
  .home-hero h1{font-size:34px !important}
  .home-hero-copy>p{font-size:15px !important}
  .page-hero h1{font-size:30px !important}
}


/* ===== V9 brand adaptation: user-approved Servicam Red 360 logo ===== */
.logo{display:flex;align-items:center}
.logo img{width:260px;max-width:100%;height:auto;display:block;object-fit:contain}
.header-row{grid-template-columns:280px minmax(380px,1fr) minmax(250px,340px) auto auto auto !important}
@media(max-width:1420px){.header-row{grid-template-columns:240px minmax(440px,1fr) 255px auto auto !important}.logo img{width:230px !important}}
.footer-brand a{display:inline-flex;align-items:center}
.footer-brand img{width:260px !important;max-width:100%;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(15,229,230,.08))}
.footer-brand p{max-width:320px}
@media(max-width:1100px){.header-row{grid-template-columns:240px 1fr 260px auto auto auto !important}.logo img{width:225px !important}}
@media(max-width:820px){.header-row{grid-template-columns:170px 1fr auto !important}.logo img{width:165px !important}.footer-brand img{width:220px !important}}
@media(max-width:560px){.logo img{width:158px !important}.footer-brand img{width:205px !important}}


/* ======================================================================
   V10 — HOME HEADER / HERO PIXEL REFINEMENT
   Reference: approved Servicam mockup. Keep this block LAST in styles.css.
   ====================================================================== */

/* Global header: compact proportions like approved mockup */
.topbar{
  height:34px !important;
  background:linear-gradient(90deg,#062a36 0%,#0a5664 100%) !important;
  font-size:12px !important;
}
.topbar-inner{height:34px !important;gap:18px !important}
.top-links,.top-actions{gap:23px !important}
.topbar .site-icon{font-size:15px !important}
.topbar a,.topbar span{line-height:1 !important}

.main-header{
  height:64px !important;
  min-height:64px !important;
  background:#fff !important;
  box-shadow:none !important;
  border-bottom:1px solid #e8eef1 !important;
}
.header-row{
  height:64px !important;
  grid-template-columns:210px minmax(430px,1fr) minmax(255px,320px) auto auto auto !important;
  gap:13px !important;
  align-items:center !important;
}
.logo{height:64px !important;display:flex !important;align-items:center !important;overflow:hidden}
.logo img{
  width:205px !important;
  max-width:205px !important;
  height:auto !important;
  object-fit:contain !important;
}
.nav{gap:19px !important;font-size:12.5px !important;font-weight:700 !important;white-space:nowrap}
.nav a{height:64px !important;padding:0 !important}
.nav a.active:after,.nav a:hover:after{height:2px !important}

.premium-search{
  height:42px !important;
  border-radius:13px !important;
  background:#fafcfd !important;
  border:1px solid #dce6ea !important;
}
.premium-search .search-prefix{padding-left:13px !important;font-size:16px !important}
.premium-search input{font-size:12px !important;padding:0 8px !important}
.premium-search button{width:45px !important;height:42px !important}
.premium-search button .site-icon{font-size:17px !important}

.header-row>.mini-action{
  display:flex !important;
  gap:7px !important;
  font-size:11px !important;
}
.header-row>.mini-action>.site-icon{font-size:21px !important}
.header-row>.mini-action strong{font-size:11.5px !important;line-height:1.05 !important}
.header-row>.mini-action small{font-size:9.5px !important;line-height:1.1 !important;margin-top:2px}
.cart-count{width:17px !important;height:17px !important;font-size:9px !important;top:-7px !important}
.mobile-menu-btn{height:40px;width:40px}

/* HOME hero: same compact height/composition as mockup */
.home-hero{
  min-height:330px !important;
  height:330px !important;
  padding:0 !important;
  color:#fff !important;
  background:
    linear-gradient(90deg,rgba(2,21,30,.76) 0%,rgba(3,27,37,.56) 34%,rgba(3,26,36,.10) 63%,rgba(3,20,29,.28) 100%),
    url('../assets/pixel/header-gps-premium.png') center 52%/cover no-repeat !important;
  overflow:hidden !important;
  position:relative !important;
}
.home-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12)) !important;
  pointer-events:none !important;
}
.home-hero-grid{
  min-height:330px !important;
  height:330px !important;
  grid-template-columns:500px minmax(0,1fr) !important;
  gap:22px !important;
  align-items:center !important;
  position:relative !important;
  z-index:2 !important;
}
.home-hero-copy{
  max-width:485px !important;
  padding:25px 0 22px 20px !important;
  align-self:center !important;
}
.home-eyebrow{
  display:block !important;
  margin:0 0 10px !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.26em !important;
  color:#52ece0 !important;
}
.home-hero h1{
  max-width:485px !important;
  margin:0 0 10px !important;
  font:800 39px/1.00 Manrope,Inter,sans-serif !important;
  letter-spacing:-.038em !important;
  text-shadow:0 7px 22px rgba(0,0,0,.18) !important;
}
.home-hero h1 em{display:block !important;color:#19dfcc !important;font-style:normal !important}
.home-hero-copy>p{
  max-width:440px !important;
  margin:0 0 14px !important;
  font-size:13px !important;
  line-height:1.48 !important;
  color:#eef7f8 !important;
  text-shadow:0 4px 16px rgba(0,0,0,.18) !important;
}
.home-hero-actions{display:flex !important;gap:10px !important;align-items:center !important}
.home-hero-actions .btn{
  min-height:40px !important;
  padding:10px 18px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
}
.home-primary{box-shadow:0 10px 24px rgba(11,184,169,.22) !important}
.btn-hero-outline{background:rgba(5,29,39,.18) !important;border:1px solid rgba(255,255,255,.76) !important}
.home-hero-trust{display:none !important}

/* right-side cards: much smaller, like reference */
.home-hero-visual{
  min-height:330px !important;
  height:330px !important;
  position:relative !important;
}
.hero-image-frame{display:none !important}
.hero-feature-card{
  position:absolute !important;
  right:2px !important;
  width:222px !important;
  min-height:60px !important;
  grid-template-columns:42px 1fr 12px !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:13px !important;
  background:linear-gradient(90deg,rgba(9,157,148,.92),rgba(7,53,66,.88)) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 9px 22px rgba(0,0,0,.15) !important;
  backdrop-filter:blur(7px) !important;
}
.hero-feature-icon{
  width:42px !important;height:42px !important;border-radius:11px !important;
  background:rgba(0,0,0,.12) !important;font-size:17px !important;
}
.hero-feature-card strong{font-size:11.5px !important;line-height:1.12 !important}
.hero-feature-card small{font-size:9px !important;line-height:1.24 !important;margin-top:3px !important;color:#d9eff1 !important}
.hero-feature-card>b{font-size:20px !important}
.feature-location{top:47px !important;right:0 !important}
.feature-alerts{top:127px !important;right:0 !important}
.feature-secure{top:207px !important;right:0 !important}

/* left carousel arrow + center dots */
.home-slider-arrow{
  position:absolute !important;left:-8px !important;top:50% !important;transform:translateY(-50%) !important;
  z-index:5 !important;width:36px !important;height:36px !important;border-radius:50% !important;
  border:1px solid rgba(255,255,255,.10) !important;background:rgba(5,43,55,.74) !important;
  color:#fff !important;font-size:27px !important;line-height:1 !important;display:grid !important;place-items:center !important;
  box-shadow:0 7px 18px rgba(0,0,0,.18) !important;cursor:pointer !important;
}
.home-slider-dots{
  position:absolute !important;left:50% !important;bottom:14px !important;transform:translateX(-50%) !important;
  display:flex !important;gap:7px !important;z-index:5 !important;
}
.home-slider-dots span{width:7px !important;height:7px !important;border-radius:50% !important;background:rgba(255,255,255,.85) !important;display:block !important}
.home-slider-dots span.active{width:22px !important;border-radius:999px !important;background:#13d8c4 !important}

/* benefit bar sits immediately below hero, with reference proportions */
.home-benefits-wrap{margin:0 !important;background:#fff !important;position:relative !important;z-index:6 !important}
.home-benefits{
  grid-template-columns:repeat(6,1fr) !important;
  border:1px solid #e4ecef !important;
  border-top:0 !important;
  border-radius:0 0 16px 16px !important;
  overflow:hidden !important;
  box-shadow:0 12px 28px rgba(6,31,42,.055) !important;
}
.home-benefits article{
  min-height:72px !important;
  padding:12px 14px !important;
  gap:10px !important;
}
.benefit-icon{width:38px !important;height:38px !important;border-radius:50% !important;font-size:16px !important}
.home-benefits strong{font-size:11.5px !important;line-height:1.18 !important}
.home-benefits small{font-size:9.5px !important;line-height:1.25 !important;margin-top:3px !important}

/* Desktop fit: keep the three right utilities visible, unlike previous versions */
@media (min-width:1101px) and (max-width:1450px){
  .container{width:min(100% - 40px,1460px) !important}
  .header-row{grid-template-columns:215px minmax(410px,1fr) 255px auto auto auto !important;gap:9px !important}
  .logo img{width:205px !important;max-width:205px !important}
  .nav{gap:13px !important;font-size:11.5px !important}
  .premium-search{height:40px !important}
  .premium-search button{height:40px !important;width:42px !important}
  .header-row>.mini-action{display:flex !important}
  .header-row>.mini-action strong{font-size:10.5px !important}
  .header-row>.mini-action small{font-size:9px !important}
  .home-hero-grid{grid-template-columns:460px minmax(0,1fr) !important}
  .home-hero-copy{max-width:450px !important;padding-left:12px !important}
  .home-hero h1{font-size:37px !important;max-width:450px !important}
  .home-hero-copy>p{max-width:415px !important;font-size:12.5px !important}
  .hero-feature-card{width:214px !important}
}

@media(max-width:1100px){
  .main-header,.header-row{height:66px !important}
  .header-row{grid-template-columns:200px 1fr auto !important}
  .nav,.premium-search,.header-row>.mini-action{display:none !important}
  .logo{height:66px !important}.logo img{width:190px !important;max-width:190px !important}
  .mobile-menu-btn{display:block !important;justify-self:end !important}
  .home-hero{height:auto !important;min-height:430px !important;background-position:60% center !important}
  .home-hero-grid{height:auto !important;min-height:430px !important;grid-template-columns:1fr !important}
  .home-hero-copy{padding:35px 0 15px !important;max-width:520px !important}
  .home-hero-visual{min-height:180px !important;height:180px !important}
  .hero-feature-card{display:none !important}
  .home-slider-arrow{left:0 !important}
}
@media(max-width:820px){
  .home-hero{min-height:400px !important;background-position:64% center !important}
  .home-hero-grid{min-height:400px !important}
  .home-hero h1{font-size:34px !important}
  .home-hero-copy>p{font-size:14px !important;max-width:420px !important}
  .home-benefits{grid-template-columns:repeat(2,1fr) !important;border-radius:0 0 14px 14px !important}
  .home-benefits article{border-bottom:1px solid #e6edf0 !important}
}
@media(max-width:520px){
  .topbar{display:none !important}
  .home-hero{min-height:410px !important;background-position:67% center !important}
  .home-hero h1{font-size:31px !important;max-width:340px !important}
  .home-eyebrow{font-size:10px !important}
  .home-hero-copy{padding-top:28px !important}
  .home-hero-actions .btn{font-size:11px !important;padding:10px 14px !important}
  .home-benefits{grid-template-columns:1fr 1fr !important}
}


/* =====================================================================
   SERVICAM HOME - HERO CARDS FINAL FIX
   Match the approved mockup: compact, aligned at the far right of phone.
   ===================================================================== */

/* Give the background artwork enough horizontal breathing room so the
   smartphone sits slightly farther left and the info cards have their
   own clean column on the right, like the approved mockup. */
.home-hero{
  background-size:110% auto !important;
  background-position:70% center !important;
}

.home-hero-grid{
  position:relative !important;
  overflow:visible !important;
}

.home-hero-visual{
  position:relative !important;
  height:330px !important;
  min-height:330px !important;
  overflow:visible !important;
  pointer-events:none;
}

/* Old single-card absolute positions are disabled by the stack layout. */
.hero-feature-stack{
  position:absolute !important;
  z-index:8 !important;
  top:42px !important;
  right:-4px !important;
  width:292px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:13px !important;
  pointer-events:auto;
}

.hero-feature-stack .hero-feature-card{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:70px !important;
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) 16px !important;
  align-items:center !important;
  gap:13px !important;
  margin:0 !important;
  padding:11px 14px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg, rgba(7,159,151,.96) 0 30%, rgba(9,110,122,.95) 30%, rgba(7,66,82,.96) 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(9px) !important;
  -webkit-backdrop-filter:blur(9px) !important;
}

/* Subtle stagger copied from the mockup. */
.hero-feature-stack .feature-location{
  transform:translateX(5px) !important;
}
.hero-feature-stack .feature-alerts{
  transform:translateX(-3px) !important;
}
.hero-feature-stack .feature-secure{
  transform:translateX(1px) !important;
}

.hero-feature-stack .hero-feature-icon{
  width:52px !important;
  height:52px !important;
  border-radius:14px !important;
  display:grid !important;
  place-items:center !important;
  color:#e8fffd !important;
  background:rgba(3,84,94,.34) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.hero-feature-stack .hero-feature-icon svg{
  width:22px !important;
  height:22px !important;
  display:block !important;
}

.hero-feature-content{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
}

.hero-feature-content strong{
  margin:0 !important;
  color:#fff !important;
  font-size:12.7px !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}

.hero-feature-content span{
  margin:0 !important;
  color:rgba(239,252,253,.90) !important;
  font-size:9.8px !important;
  line-height:1.28 !important;
  font-weight:500 !important;
}

.hero-feature-arrow{
  align-self:center !important;
  justify-self:end !important;
  color:#fff !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:300 !important;
  opacity:.96 !important;
}

/* Keep the phone/cards visually separated at common desktop widths. */
@media (min-width:1451px){
  .hero-feature-stack{
    right:-1px !important;
    width:300px !important;
  }
}

@media (min-width:1101px) and (max-width:1450px){
  .home-hero{
    background-size:112% auto !important;
    background-position:71% center !important;
  }
  .hero-feature-stack{
    top:41px !important;
    right:-2px !important;
    width:274px !important;
    gap:11px !important;
  }
  .hero-feature-stack .hero-feature-card{
    min-height:65px !important;
    grid-template-columns:47px minmax(0,1fr) 14px !important;
    gap:11px !important;
    padding:10px 12px !important;
    border-radius:15px !important;
  }
  .hero-feature-stack .hero-feature-icon{
    width:47px !important;
    height:47px !important;
    border-radius:13px !important;
  }
  .hero-feature-stack .hero-feature-icon svg{
    width:20px !important;
    height:20px !important;
  }
  .hero-feature-content strong{
    font-size:11.8px !important;
  }
  .hero-feature-content span{
    font-size:9px !important;
  }
}

/* Tablet/mobile: the reference desktop cards would compete with content,
   so they become a clean horizontal list beneath the hero copy. */
@media (max-width:1100px){
  .home-hero{
    background-size:cover !important;
    background-position:63% center !important;
  }
  .home-hero-visual{
    height:auto !important;
    min-height:auto !important;
    padding:0 0 22px !important;
  }
  .hero-feature-stack{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:min(100%,520px) !important;
    margin:0 !important;
    gap:10px !important;
  }
  .hero-feature-stack .hero-feature-card{
    transform:none !important;
  }
}

@media (max-width:820px){
  .hero-feature-stack{
    display:none !important;
  }
}

/* =====================================================================
   SERVICAM HOME V11 - HERO CARDS / PHONE SEPARATION
   Keep the GPS artwork shifted left and reserve a clean right column
   exclusively for the three information cards, matching the mockup.
   ===================================================================== */

@media (min-width:1101px){
  .home-hero{
    background-color:#042532 !important;
    background-image:
      linear-gradient(90deg,
        rgba(3,24,33,.96) 0%,
        rgba(3,28,38,.80) 25%,
        rgba(4,30,40,.30) 53%,
        rgba(4,31,41,.42) 74%,
        rgba(5,37,48,.92) 100%),
      url('../assets/pixel/header-gps-premium.png') !important;
    background-size:100% 100%, auto 100% !important;
    background-position:center center, right 300px center !important;
    background-repeat:no-repeat,no-repeat !important;
  }

  .home-hero-grid{
    grid-template-columns:460px minmax(0,1fr) !important;
    gap:22px !important;
    position:relative !important;
    overflow:visible !important;
  }

  .home-hero-visual{
    position:relative !important;
    height:330px !important;
    min-height:330px !important;
    overflow:visible !important;
  }

  .hero-feature-stack{
    position:absolute !important;
    top:32px !important;
    right:0 !important;
    width:238px !important;
    z-index:10 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:11px !important;
    margin:0 !important;
    pointer-events:auto !important;
  }

  .hero-feature-stack .hero-feature-card{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    width:238px !important;
    min-height:64px !important;
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) 14px !important;
    align-items:center !important;
    gap:11px !important;
    margin:0 !important;
    padding:9px 12px !important;
    border-radius:15px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 13px 28px rgba(0,0,0,.22) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }

  .hero-feature-stack .feature-location{
    background:linear-gradient(90deg,#079d8f 0 31%,#0c665f 31%,#173f49 100%) !important;
  }
  .hero-feature-stack .feature-alerts{
    background:linear-gradient(90deg,#0084a7 0 31%,#0b5a74 31%,#173f50 100%) !important;
  }
  .hero-feature-stack .feature-secure{
    background:linear-gradient(90deg,#0a8b82 0 31%,#0c615f 31%,#193f4a 100%) !important;
  }

  .hero-feature-stack .hero-feature-icon{
    width:46px !important;
    height:46px !important;
    border-radius:13px !important;
    display:grid !important;
    place-items:center !important;
    color:#efffff !important;
    background:rgba(1,58,68,.24) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  .hero-feature-stack .hero-feature-icon svg{
    width:20px !important;
    height:20px !important;
  }

  .hero-feature-content{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
  }

  .hero-feature-content strong{
    margin:0 !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:1.16 !important;
    font-weight:800 !important;
    letter-spacing:-.012em !important;
  }

  .hero-feature-content span{
    margin:0 !important;
    color:rgba(239,252,253,.90) !important;
    font-size:9px !important;
    line-height:1.28 !important;
    font-weight:500 !important;
  }

  .hero-feature-arrow{
    align-self:center !important;
    justify-self:end !important;
    color:#fff !important;
    font-size:23px !important;
    line-height:1 !important;
    font-weight:300 !important;
  }
}

@media (min-width:1101px) and (max-width:1280px){
  .home-hero{
    background-position:center center, right 262px center !important;
  }
  .hero-feature-stack{
    width:224px !important;
    right:-2px !important;
  }
  .hero-feature-stack .hero-feature-card{
    width:224px !important;
  }
}

@media (min-width:1450px){
  .home-hero{
    background-position:center center, right 330px center !important;
  }
  .hero-feature-stack{
    width:252px !important;
  }
  .hero-feature-stack .hero-feature-card{
    width:252px !important;
  }
}

@media (max-width:1100px){
  .home-hero{
    background-size:cover !important;
    background-position:63% center !important;
  }
}


/* =====================================================================
   SERVICAM HOME V12 - HERO VISUAL / GLASS CARDS / SLIDER ARROW
   Final refinement against approved mockup:
   - artwork fills the whole hero (no solid block on the right)
   - translucent glass alert cards
   - slimmer, cleaner icon treatment
   - cards aligned at far right
   - carousel arrow separated from the left hero copy
   ===================================================================== */

@media (min-width:1101px){

  /* Keep the generated GPS artwork across the complete hero.
     Do NOT reserve a solid-color strip on the right. */
  .home-hero{
    background-color:#062a35 !important;
    background-image:
      linear-gradient(90deg,
        rgba(3,22,31,.76) 0%,
        rgba(3,25,35,.60) 30%,
        rgba(3,27,37,.18) 59%,
        rgba(3,23,32,.22) 78%,
        rgba(3,25,34,.32) 100%),
      url('../assets/pixel/header-gps-premium.png') !important;
    background-size:100% 100%,100% 100% !important;
    background-position:center center,center center !important;
    background-repeat:no-repeat,no-repeat !important;
  }

  /* Give the left carousel control its own clean lane. */
  .home-hero-copy{
    padding-left:42px !important;
  }

  .home-slider-arrow{
    left:12px !important;
    top:50% !important;
    width:34px !important;
    height:34px !important;
    background:rgba(4,43,54,.58) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.18) !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }

  /* Right glass-card column */
  .hero-feature-stack{
    top:39px !important;
    right:4px !important;
    width:238px !important;
    gap:10px !important;
  }

  .hero-feature-stack .hero-feature-card{
    width:100% !important;
    min-height:62px !important;
    grid-template-columns:45px minmax(0,1fr) 13px !important;
    gap:11px !important;
    padding:9px 12px !important;
    border-radius:15px !important;
    overflow:hidden !important;

    /* translucent instead of a solid two-tone block */
    background:
      linear-gradient(100deg,
        rgba(13,170,158,.50) 0%,
        rgba(8,112,124,.48) 44%,
        rgba(7,57,74,.54) 100%) !important;

    border:1px solid rgba(205,255,252,.22) !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.17),
      inset 0 1px 0 rgba(255,255,255,.09) !important;

    backdrop-filter:blur(13px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(13px) saturate(125%) !important;
  }

  /* Remove stagger that made the stack look untidy */
  .hero-feature-stack .feature-location,
  .hero-feature-stack .feature-alerts,
  .hero-feature-stack .feature-secure{
    transform:none !important;
    margin:0 !important;
  }

  /* Slight variation per alert while preserving one visual system */
  .hero-feature-stack .feature-location{
    background:
      linear-gradient(100deg,
        rgba(16,177,162,.52),
        rgba(8,105,118,.47) 48%,
        rgba(7,56,72,.54)) !important;
  }

  .hero-feature-stack .feature-alerts{
    background:
      linear-gradient(100deg,
        rgba(4,143,174,.50),
        rgba(5,100,126,.46) 48%,
        rgba(8,55,73,.54)) !important;
  }

  .hero-feature-stack .feature-secure{
    background:
      linear-gradient(100deg,
        rgba(14,155,146,.50),
        rgba(8,99,111,.47) 48%,
        rgba(8,55,71,.54)) !important;
  }

  .hero-feature-stack .hero-feature-icon{
    width:45px !important;
    height:45px !important;
    border-radius:13px !important;
    color:#f1ffff !important;
    background:
      linear-gradient(145deg,
        rgba(34,221,203,.22),
        rgba(255,255,255,.07)) !important;
    border:1px solid rgba(255,255,255,.11) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 5px 12px rgba(0,0,0,.08) !important;
  }

  .hero-feature-stack .hero-feature-icon svg{
    width:19px !important;
    height:19px !important;
    stroke-width:1.7 !important;
  }

  .hero-feature-content strong{
    font-size:11.7px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:-.01em !important;
  }

  .hero-feature-content span{
    margin-top:2px !important;
    font-size:8.9px !important;
    line-height:1.25 !important;
    color:rgba(240,253,253,.88) !important;
  }

  .hero-feature-arrow{
    font-size:21px !important;
    opacity:.92 !important;
  }
}

/* Keep proportions stable on normal laptop widths. */
@media (min-width:1101px) and (max-width:1450px){
  .home-hero{
    background-size:100% 100%,100% 100% !important;
    background-position:center center,center center !important;
  }

  .home-hero-copy{
    padding-left:42px !important;
  }

  .hero-feature-stack{
    right:4px !important;
    width:230px !important;
  }

  .hero-feature-stack .hero-feature-card{
    min-height:60px !important;
    grid-template-columns:43px minmax(0,1fr) 12px !important;
    gap:10px !important;
    padding:8px 11px !important;
  }

  .hero-feature-stack .hero-feature-icon{
    width:43px !important;
    height:43px !important;
  }

  .hero-feature-content strong{
    font-size:11.3px !important;
  }

  .hero-feature-content span{
    font-size:8.6px !important;
  }
}

/* Mobile/tablet retains the existing clean responsive fallback. */
@media (max-width:1100px){
  .home-slider-arrow{
    left:10px !important;
  }

  .home-hero-copy{
    padding-left:46px !important;
  }
}


/* =====================================================================
   SERVICAM HOME V13 - DESKTOP PIXEL MATCH
   On desktop the approved mockup masthead is used as one exact visual,
   avoiding any drift in phone/card positioning. Mobile keeps the real
   responsive HTML hero below.
   ===================================================================== */
.home-masthead-exact{display:none}

@media (min-width:1101px){
  .home-masthead-exact{
    display:block;
    position:relative;
    width:100%;
    overflow:hidden;
    background:#061f2a;
    line-height:0;
  }
  .home-masthead-exact img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1214 / 302;
    object-fit:fill;
  }

  /* Hide the reconstructed desktop hero/benefits so nothing can overlap. */
  .home-page .home-hero,
  .home-page .home-benefits-wrap{
    display:none !important;
  }

  .masthead-hotspot{
    position:absolute;
    z-index:4;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:0;
    text-decoration:none;
  }
  .masthead-gps{left:5.2%;top:60.8%;width:13.6%;height:11.6%}
  .masthead-more{left:19.45%;top:60.8%;width:8.35%;height:11.6%}
  .masthead-prev{left:1.3%;top:34.3%;width:2.7%;height:10.8%}
}

@media (max-width:1100px){
  .home-masthead-exact{display:none !important}
  .home-page .home-hero{display:block !important}
  .home-page .home-benefits-wrap{display:block !important}
}


/* =====================================================================
   SERVICAM HOME V14
   HD mockup hero only + REAL HTML benefits bar
   ===================================================================== */
@media (min-width:1101px){
  .home-masthead-exact{
    display:block !important;
    width:100% !important;
    position:relative !important;
    overflow:hidden !important;
    line-height:0 !important;
    background:#061f2a !important;
  }

  .home-masthead-exact img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1536 / 311 !important;
    object-fit:cover !important;
    object-position:center center !important;
    image-rendering:auto !important;
  }

  /* Desktop mockup image replaces only the hero, NOT the benefits strip. */
  .home-page .home-hero{
    display:none !important;
  }

  .home-page .home-benefits-wrap{
    display:block !important;
    margin:0 !important;
    background:#fff !important;
    position:relative !important;
    z-index:8 !important;
  }

  .home-benefits-wrap .home-benefits{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    overflow:hidden !important;
    min-height:72px !important;
    border:0 !important;
    border-top:1px solid #e4ecef !important;
    border-bottom:1px solid #e4ecef !important;
    border-radius:16px 16px 0 0 !important;
    background:#fff !important;
    box-shadow:0 12px 30px rgba(8,35,47,.055) !important;
  }

  .home-benefits article{
    min-width:0 !important;
    min-height:72px !important;
    padding:11px 18px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    border-right:1px solid #e4ecef !important;
    border-bottom:0 !important;
    background:#fff !important;
  }

  .home-benefits article:last-child{
    border-right:0 !important;
  }

  .home-benefits .benefit-icon{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    color:#087f79 !important;
    background:#f7fffe !important;
    border:1px solid #cfeeea !important;
    box-shadow:0 4px 12px rgba(6,121,113,.04) !important;
  }

  .home-benefits .benefit-icon svg{
    width:21px !important;
    height:21px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.7 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }

  .home-benefits article>div{
    min-width:0 !important;
  }

  .home-benefits strong{
    display:block !important;
    margin:0 !important;
    color:#0c1b25 !important;
    font-size:12.4px !important;
    line-height:1.18 !important;
    font-weight:800 !important;
    letter-spacing:-.01em !important;
  }

  .home-benefits small{
    display:block !important;
    margin-top:4px !important;
    color:#788995 !important;
    font-size:10.2px !important;
    line-height:1.24 !important;
    font-weight:500 !important;
  }

  /* Click areas recalibrated for hero-only crop. */
  .masthead-gps{left:5.2% !important;top:75.3% !important;width:13.6% !important;height:13.8% !important}
  .masthead-more{left:19.45% !important;top:75.3% !important;width:8.35% !important;height:13.8% !important}
  .masthead-prev{left:1.3% !important;top:43.0% !important;width:2.7% !important;height:13.4% !important}
}

/* Laptop tuning so six HTML benefits stay crisp without wrapping badly. */
@media (min-width:1101px) and (max-width:1400px){
  .home-benefits article{
    padding:10px 13px !important;
    gap:9px !important;
  }
  .home-benefits .benefit-icon{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }
  .home-benefits .benefit-icon svg{
    width:19px !important;
    height:19px !important;
  }
  .home-benefits strong{
    font-size:11.3px !important;
  }
  .home-benefits small{
    font-size:9.3px !important;
  }
}

@media (max-width:1100px){
  .home-masthead-exact{display:none !important}
  .home-page .home-hero{display:block !important}
  .home-page .home-benefits-wrap{display:block !important}
}


/* =====================================================================
   SERVICAM V15 — SEARCH BAR + FOOTER BRAND STANDARD
   Shared across all pages.
   ===================================================================== */

/* ---------- Header search: proportions matched to approved mockup ---------- */
.premium-search{
  width:100% !important;
  max-width:330px !important;
  height:44px !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 48px !important;
  align-items:center !important;
  gap:0 !important;
  overflow:hidden !important;
  border:1px solid #dbe4e8 !important;
  border-radius:14px !important;
  background:#ffffff !important;
  box-shadow:
    0 5px 14px rgba(8,36,47,.035),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.premium-search:focus-within{
  border-color:#a8d7d5 !important;
  box-shadow:
    0 0 0 3px rgba(13,166,154,.08),
    0 7px 18px rgba(8,36,47,.05) !important;
}

.premium-search .search-prefix{
  width:42px !important;
  height:100% !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  color:#536d79 !important;
  background:transparent !important;
}

.premium-search .search-prefix .site-icon{
  width:18px !important;
  height:18px !important;
  display:grid !important;
  place-items:center !important;
}

.premium-search .search-prefix svg{
  width:18px !important;
  height:18px !important;
  stroke-width:1.7 !important;
}

.premium-search input{
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
  padding:0 12px 0 0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#21323c !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:44px !important;
}

.premium-search input::placeholder{
  color:#7c888f !important;
  opacity:1 !important;
}

.premium-search button{
  width:48px !important;
  height:44px !important;
  min-width:48px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 13px 13px 0 !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(145deg,#075669 0%,#053b48 100%) !important;
  color:#fff !important;
  cursor:pointer !important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.05) !important;
}

.premium-search button:hover{
  background:linear-gradient(145deg,#087084 0%,#064653 100%) !important;
}

.premium-search button .site-icon{
  width:19px !important;
  height:19px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
}

.premium-search button svg{
  width:19px !important;
  height:19px !important;
  stroke-width:1.8 !important;
}

/* ---------- Footer: same exact approved header logo, monochrome white ---------- */
.footer-v6{
  background:linear-gradient(180deg,#031924 0%,#062c37 100%) !important;
}

.footer-main{
  align-items:start !important;
  padding-top:52px !important;
  padding-bottom:42px !important;
}

.footer-brand{
  align-self:center !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-height:230px !important;
  padding-top:18px !important;
}

.footer-brand a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-height:76px !important;
}

.footer-brand img{
  width:255px !important;
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;

  /* Same top logo, converted cleanly to a single white mark. */
  filter:brightness(0) invert(1) !important;
  opacity:.98 !important;
}

.footer-brand p{
  max-width:320px !important;
  margin:22px 0 0 !important;
  color:#a9bec5 !important;
  font-size:13px !important;
  line-height:1.8 !important;
}

/* The former three-item trust list is intentionally removed from markup. */
.footer-contact-list{
  display:none !important;
}

.footer-column,
.footer-news{
  padding-top:10px !important;
}

.footer-column h4,
.footer-news h4{
  margin-bottom:16px !important;
}

.footer-bottom{
  padding-top:18px !important;
}

/* Laptop tuning */
@media (max-width:1420px) and (min-width:1101px){
  .premium-search{
    max-width:285px !important;
    grid-template-columns:39px minmax(0,1fr) 46px !important;
  }

  .premium-search .search-prefix{
    width:39px !important;
  }

  .premium-search button{
    width:46px !important;
    min-width:46px !important;
  }

  .premium-search input{
    font-size:12.2px !important;
  }

  .footer-brand img{
    width:235px !important;
  }
}

@media (max-width:820px){
  .mobile-drawer .search{
    height:44px !important;
    border-radius:13px !important;
  }

  .footer-brand{
    min-height:auto !important;
    padding-top:4px !important;
  }

  .footer-brand a{
    min-height:64px !important;
  }

  .footer-brand img{
    width:230px !important;
  }
}


/* =====================================================================
   SERVICAM V16 — wider search + refined app section + premium store badges
   ===================================================================== */

/* Header search: a little wider so the placeholder never feels cropped */
@media (min-width:1421px){
  .header-row{
    grid-template-columns:280px minmax(350px,1fr) minmax(360px,410px) auto auto auto !important;
  }

  .premium-search{
    max-width:390px !important;
    height:44px !important;
    grid-template-columns:42px minmax(0,1fr) 48px !important;
  }

  .premium-search input{
    font-size:13.2px !important;
    padding-right:14px !important;
  }
}

@media (min-width:1101px) and (max-width:1420px){
  .header-row{
    grid-template-columns:240px minmax(390px,1fr) minmax(320px,360px) auto auto !important;
  }

  .premium-search{
    max-width:350px !important;
  }

  .premium-search input{
    font-size:12.7px !important;
  }
}

/* APP SECTION — smoother, cleaner image blending */
.app-premium-card{
  min-height:365px !important;
  background:#073946 !important;
  isolation:isolate !important;
}

.app-premium-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(24,205,190,.10), transparent 34%),
    linear-gradient(90deg,
      rgba(7,57,70,.08) 0%,
      rgba(7,57,70,.05) 43%,
      rgba(4,35,46,.08) 100%) !important;
}

.app-copy{
  width:58% !important;
  padding:38px 38px 34px !important;
  position:relative !important;
  z-index:3 !important;
}

.app-phone-art{
  position:absolute !important;
  left:39% !important;
  right:0 !important;
  top:0 !important;
  width:61% !important;
  height:100% !important;
  opacity:.93 !important;
  z-index:0 !important;
  overflow:hidden !important;
}

.app-phone-art img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:67% center !important;
  filter:saturate(.96) contrast(1.02) !important;
}

/* Replace the visible vertical block with a long seamless fade */
.app-phone-art::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,
      #073946 0%,
      rgba(7,57,70,.98) 9%,
      rgba(7,57,70,.90) 20%,
      rgba(7,57,70,.66) 38%,
      rgba(7,57,70,.34) 57%,
      rgba(7,57,70,.08) 78%,
      rgba(7,57,70,0) 100%) !important;
}

.app-copy h2{
  max-width:430px !important;
}

.app-copy>p{
  max-width:500px !important;
}

.app-feature-list span{
  border:1px solid rgba(255,255,255,.055) !important;
  background:rgba(255,255,255,.075) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Premium App Store / Google Play buttons */
.store-badges{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  flex-wrap:wrap !important;
  margin-top:17px !important;
}

.store-badge{
  min-width:145px !important;
  height:48px !important;
  padding:0 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#0c1115 0%,#020405 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  text-decoration:none !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.store-badge:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(255,255,255,.32) !important;
  box-shadow:
    0 11px 22px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}

.store-badge-icon{
  width:25px !important;
  height:25px !important;
  flex:0 0 25px !important;
  display:grid !important;
  place-items:center !important;
}

.store-badge-icon svg{
  width:23px !important;
  height:23px !important;
  display:block !important;
}

.apple-badge .store-badge-icon svg{
  fill:#fff !important;
}

.play-badge .store-badge-icon svg{
  overflow:visible !important;
}

.play-cyan{fill:#2bb9f4 !important}
.play-green{fill:#34d058 !important}
.play-yellow{fill:#ffd23f !important}
.play-red{fill:#ff5a5f !important}

.store-badge-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  line-height:1 !important;
}

.store-badge-copy small{
  margin:0 0 3px !important;
  color:rgba(255,255,255,.76) !important;
  font-size:8.6px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
}

.store-badge-copy strong{
  margin:0 !important;
  color:#fff !important;
  font-size:13.2px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}

/* Keep advisor card visually balanced with the cleaner app card */
.advisor-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(22,196,184,.11), transparent 35%),
    linear-gradient(145deg,#f1fafb 0%,#deeff1 100%) !important;
  border:1px solid rgba(7,72,83,.035) !important;
}

.advisor-icon{
  background:linear-gradient(145deg,#064051,#062d39) !important;
}

@media(max-width:1100px){
  .app-copy{
    width:100% !important;
  }

  .app-phone-art{
    left:48% !important;
    width:52% !important;
    opacity:.28 !important;
  }

  .app-phone-art::before{
    background:linear-gradient(90deg,#073946 0%,rgba(7,57,70,.94) 25%,rgba(7,57,70,.45) 60%,rgba(7,57,70,.15) 100%) !important;
  }
}

@media(max-width:720px){
  .store-badge{
    min-width:138px !important;
  }
}


/* =====================================================================
   SERVICAM V17 — NEW PREMIUM APP VISUAL
   Uses the approved GPS/mobile artwork created for the App section.
   ===================================================================== */
.app-premium-card{
  min-height:365px !important;
  background:linear-gradient(135deg,#063845 0%,#075360 100%) !important;
  overflow:hidden !important;
}

.app-copy{
  width:55% !important;
  padding:38px 38px 34px !important;
  position:relative !important;
  z-index:4 !important;
}

.app-phone-art{
  position:absolute !important;
  left:44% !important;
  right:0 !important;
  top:0 !important;
  width:56% !important;
  height:100% !important;
  opacity:1 !important;
  overflow:hidden !important;
  z-index:1 !important;
}

.app-phone-art img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:56% 52% !important;
  filter:saturate(1.02) contrast(1.03) !important;
}

/* Smooth visual bridge between copy and artwork — no hard vertical cut */
.app-phone-art::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,
      #063845 0%,
      rgba(6,56,69,.98) 8%,
      rgba(6,56,69,.84) 20%,
      rgba(6,56,69,.55) 34%,
      rgba(6,56,69,.24) 47%,
      rgba(6,56,69,.05) 60%,
      rgba(6,56,69,0) 76%) !important;
}

.app-premium-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:2 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.04)) !important;
}

.app-copy h2,
.app-copy>p,
.app-feature-list,
.store-badges,
.app-copy .section-kicker{
  position:relative !important;
  z-index:5 !important;
}

@media(max-width:1100px){
  .app-copy{
    width:100% !important;
    padding:30px !important;
    background:linear-gradient(90deg,rgba(6,56,69,.98),rgba(6,56,69,.78)) !important;
  }

  .app-phone-art{
    left:42% !important;
    width:58% !important;
    opacity:.42 !important;
  }

  .app-phone-art::before{
    background:linear-gradient(90deg,#063845 0%,rgba(6,56,69,.94) 28%,rgba(6,56,69,.55) 58%,rgba(6,56,69,.10) 100%) !important;
  }
}

@media(max-width:720px){
  .app-phone-art{
    left:34% !important;
    width:66% !important;
    opacity:.28 !important;
  }
}


/* =====================================================================
   SERVICAM V18 — APP IMAGE COMPLETE / NO OVERLAY ON ALERTS
   ===================================================================== */

@media (min-width:1101px){

  .app-premium-card{
    min-height:365px !important;
    background:#063845 !important;
    overflow:hidden !important;
  }

  /* Copy stays in its own clean column and no longer sits over the image */
  .app-copy{
    width:45% !important;
    padding:38px 34px 34px 38px !important;
    position:relative !important;
    z-index:4 !important;
    background:linear-gradient(135deg,#063845 0%,#07505d 100%) !important;
  }

  .app-copy h2{
    max-width:360px !important;
  }

  .app-copy>p{
    max-width:390px !important;
  }

  /* Full artwork area: exact split, no crop */
  .app-phone-art{
    position:absolute !important;
    left:45% !important;
    right:0 !important;
    top:0 !important;
    width:55% !important;
    height:100% !important;
    opacity:1 !important;
    overflow:hidden !important;
    z-index:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#042f3b !important;
  }

  .app-phone-art img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center center !important;
    filter:saturate(1.02) contrast(1.02) !important;
  }

  /* Only a very narrow feather on the joining edge.
     It does NOT cover the "Alertas inteligentes" card anymore. */
  .app-phone-art::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:52px !important;
    right:auto !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,
      #07505d 0%,
      rgba(7,80,93,.74) 24%,
      rgba(7,80,93,.30) 58%,
      rgba(7,80,93,0) 100%) !important;
  }

  .app-premium-card::after{
    background:none !important;
  }

  .app-feature-list{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .app-feature-list span{
    font-size:12.2px !important;
    padding:10px 11px !important;
  }

  .store-badges{
    margin-top:18px !important;
  }
}

/* Keep the complete image visible on medium/laptop widths too */
@media (min-width:1101px) and (max-width:1380px){
  .app-copy{
    width:44% !important;
    padding:34px 28px 30px 30px !important;
  }

  .app-phone-art{
    left:44% !important;
    width:56% !important;
  }

  .app-copy h2{
    font-size:36px !important;
    max-width:330px !important;
  }

  .app-copy>p{
    font-size:14.5px !important;
    max-width:350px !important;
  }

  .app-feature-list span{
    font-size:11.4px !important;
    padding:9px 9px !important;
  }

  .app-phone-art::before{
    width:42px !important;
  }
}

/* Tablet/mobile: keep a soft background image, but do not crop aggressively */
@media (max-width:1100px){
  .app-copy{
    width:100% !important;
    position:relative !important;
    z-index:3 !important;
    background:linear-gradient(90deg,
      rgba(6,56,69,.98) 0%,
      rgba(6,56,69,.96) 54%,
      rgba(6,56,69,.78) 100%) !important;
  }

  .app-phone-art{
    left:38% !important;
    width:62% !important;
    height:100% !important;
    opacity:.34 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .app-phone-art img{
    object-fit:contain !important;
    object-position:center !important;
  }

  .app-phone-art::before{
    width:70px !important;
    background:linear-gradient(90deg,
      #063845 0%,
      rgba(6,56,69,.72) 45%,
      rgba(6,56,69,0) 100%) !important;
  }
}


/* =====================================================================
   SERVICAM V19 — HOME CATEGORY CARDS POLISH
   Objective:
   - category images look fuller and less boxed-in
   - remove the harsh inner gray block look
   - make the soft gray treatment cover the whole card
   - keep a premium, clean, mockup-like appearance
   ===================================================================== */

.home-category-card{
  position:relative !important;
  background:linear-gradient(180deg,#f8fbfc 0%, #f1f5f7 100%) !important;
  border:1px solid #d9e5ea !important;
  box-shadow:0 10px 24px rgba(6,31,42,.045) !important;
}

.home-category-card:not(.featured)::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:18px !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.18) 0%,
      rgba(241,245,247,.06) 34%,
      rgba(228,234,238,.24) 100%) !important;
}

.home-category-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 18px 34px rgba(6,31,42,.08) !important;
}

.home-category-card.featured{
  background:linear-gradient(145deg,#063544 0%, #06242d 100%) !important;
  border-color:#0dcabb !important;
  box-shadow:0 0 0 2px rgba(11,184,169,.12), 0 18px 36px rgba(5,75,77,.16) !important;
}

.home-cat-media{
  position:relative !important;
  height:118px !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:transparent !important;
}

.home-category-card:not(.featured) .home-cat-media{
  margin:0 !important;
}

.home-category-card:not(.featured) .home-cat-media img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:scale(1.06) !important;
  filter:drop-shadow(0 12px 18px rgba(7,29,39,.08)) !important;
  padding:8px 6px 0 !important;
}

.home-category-card.featured .home-cat-media{
  height:122px !important;
}

.home-category-card.featured .home-cat-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  transform:none !important;
  filter:none !important;
}

.home-cat-meta{
  position:relative !important;
  z-index:2 !important;
  padding:14px 14px 16px !important;
  gap:10px !important;
  background:transparent !important;
}

.home-cat-meta strong{
  font-size:13px !important;
  line-height:1.16 !important;
  letter-spacing:-.01em !important;
}

.home-category-card:not(.featured) .home-cat-meta span{
  width:30px !important;
  height:30px !important;
  background:rgba(255,255,255,.72) !important;
  color:#183640 !important;
  border:1px solid rgba(12,32,41,.06) !important;
  box-shadow:0 8px 18px rgba(6,31,42,.06) !important;
  backdrop-filter:blur(6px) !important;
}

.home-category-card.featured .home-cat-meta span{
  width:30px !important;
  height:30px !important;
  background:#0aa69c !important;
  box-shadow:0 10px 18px rgba(10,166,156,.28) !important;
}

.home-category-card:not(.featured) .home-cat-meta strong{
  color:#0b2231 !important;
}

.home-category-card.featured .home-cat-meta strong{
  color:#ffffff !important;
}

/* Promo banners right below categories: cleaner image presentation */
.home-promo-card{
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:0 16px 32px rgba(6,31,42,.07) !important;
}

.home-promo-card img{
  object-fit:cover !important;
  object-position:center center !important;
}

.home-promo-card.security::after{
  background:linear-gradient(90deg,
    rgba(3,30,40,.93) 0%,
    rgba(3,30,40,.72) 40%,
    rgba(3,30,40,.16) 70%,
    rgba(3,30,40,0) 100%) !important;
}

.home-promo-card.fleet::after{
  background:linear-gradient(90deg,
    rgba(244,251,252,.95) 0%,
    rgba(244,251,252,.82) 42%,
    rgba(244,251,252,.18) 72%,
    rgba(244,251,252,0) 100%) !important;
}

.home-promo-copy{
  max-width:45% !important;
}

@media (max-width:820px){
  .home-category-card:not(.featured) .home-cat-media img{
    transform:scale(1.03) !important;
    padding:8px 8px 0 !important;
  }
  .home-cat-media{height:110px !important}
  .home-promo-copy{max-width:62% !important}
}


/* =====================================================================
   SERVICAM V20 — CATEGORY CARDS FINAL ALIGNMENT
   - gray treatment spans the whole card more clearly
   - category images fit better and use the same standard
   - featured first card no longer feels cropped/overflowed
   ===================================================================== */

.home-category-grid{
  gap:14px !important;
}

.home-category-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:184px !important;
  background:linear-gradient(180deg,#eef3f6 0%, #edf2f5 100%) !important;
  border:1px solid #d7e3e9 !important;
  box-shadow:0 10px 24px rgba(6,31,42,.045) !important;
}

.home-category-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 36%, rgba(222,229,234,.18) 100%) !important;
  pointer-events:none !important;
}

.home-category-card.featured{
  background:linear-gradient(145deg,#063544 0%, #062a33 100%) !important;
  border-color:#0dcabb !important;
  box-shadow:0 0 0 2px rgba(11,184,169,.12), 0 18px 34px rgba(5,75,77,.16) !important;
}

.home-category-card.featured::before{
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 100%) !important;
}

.home-cat-media{
  position:relative !important;
  z-index:1 !important;
  height:116px !important;
  padding:10px 10px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  overflow:hidden !important;
}

.home-cat-media img,
.home-category-card .home-cat-media img,
.home-category-card:not(.featured) .home-cat-media img,
.home-category-card.featured .home-cat-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 auto !important;
  transform:none !important;
  filter:drop-shadow(0 10px 18px rgba(7,29,39,.08)) !important;
}

.home-category-card.featured .home-cat-media{
  height:118px !important;
  padding:10px 10px 0 !important;
}

.home-cat-meta{
  position:relative !important;
  z-index:1 !important;
  margin-top:auto !important;
  padding:14px 14px 15px !important;
  gap:10px !important;
  background:transparent !important;
}

.home-cat-meta strong{
  font-size:13px !important;
  line-height:1.18 !important;
  letter-spacing:-.01em !important;
}

.home-category-card:not(.featured) .home-cat-meta strong{
  color:#0b2231 !important;
}

.home-category-card:not(.featured) .home-cat-meta span{
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(10,33,43,.08) !important;
  color:#17343d !important;
  box-shadow:0 8px 18px rgba(6,31,42,.07) !important;
}

.home-category-card.featured .home-cat-meta span{
  width:30px !important;
  height:30px !important;
  background:#09bfb1 !important;
  color:#fff !important;
  box-shadow:0 10px 18px rgba(9,191,177,.28) !important;
}

@media (max-width:820px){
  .home-category-grid{gap:10px !important;}
  .home-category-card{min-height:176px !important;}
  .home-cat-media{height:108px !important;padding:8px 8px 0 !important;}
  .home-category-card.featured .home-cat-media{height:110px !important;}
  .home-cat-meta{padding:12px 12px 14px !important;}
}


/* =====================================================================
   SERVICAM V21 — CATEGORY CARDS FINAL VISUAL MATCH
   Product artwork floats directly on the same card background.
   ===================================================================== */

.home-category-grid{
  gap:12px !important;
}

.home-category-card{
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:17px !important;
  border:1px solid #d9e4e8 !important;
  background:linear-gradient(180deg,#f1f4f6 0%,#eef2f4 100%) !important;
  box-shadow:0 9px 22px rgba(6,31,42,.04) !important;
}

/* No separate gray/white box over the picture. */
.home-category-card::before,
.home-category-card:not(.featured)::after{
  display:none !important;
  content:none !important;
}

.home-category-card.featured{
  background:linear-gradient(145deg,#063641 0%,#062a34 100%) !important;
  border-color:#0bc7b8 !important;
  box-shadow:0 0 0 1px rgba(11,199,184,.20),0 14px 28px rgba(5,75,77,.13) !important;
}

/* Image area uses the same background as the full card. */
.home-cat-media,
.home-category-card.featured .home-cat-media{
  width:100% !important;
  height:auto !important;
  aspect-ratio:176 / 95 !important;
  min-height:0 !important;
  padding:7px 8px 0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:transparent !important;
  position:relative !important;
  z-index:1 !important;
}

/* One image standard for every category. */
.home-cat-media img,
.home-category-card .home-cat-media img,
.home-category-card:not(.featured) .home-cat-media img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  filter:drop-shadow(0 8px 12px rgba(12,32,40,.08)) !important;
}

/* GPS scene is full-bleed inside the dark card and keeps its whole composition. */
.home-category-card.featured .home-cat-media{
  padding:7px 7px 0 !important;
}

.home-category-card.featured .home-cat-media img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:9px !important;
  filter:none !important;
}

.home-cat-meta{
  margin-top:0 !important;
  min-height:56px !important;
  padding:10px 12px 12px !important;
  background:transparent !important;
  position:relative !important;
  z-index:2 !important;
}

.home-cat-meta strong{
  font-size:12.5px !important;
  line-height:1.16 !important;
}

.home-cat-meta span{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
}

.home-category-card:not(.featured) .home-cat-meta span{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(20,45,55,.055) !important;
  box-shadow:0 6px 14px rgba(6,31,42,.05) !important;
}

.home-category-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 16px 30px rgba(6,31,42,.07) !important;
}

@media(max-width:820px){
  .home-category-card{border-radius:15px !important}
  .home-cat-media,
  .home-category-card.featured .home-cat-media{
    aspect-ratio:176 / 95 !important;
    padding:6px 7px 0 !important;
  }
  .home-cat-meta{
    min-height:54px !important;
    padding:9px 10px 11px !important;
  }
}


/* =====================================================================
   SERVICAM V22 — CATEGORY CARDS CLEAN MATCH
   Revert to sharp originals and make the whole card feel like one piece.
   ===================================================================== */

.home-category-grid{
  gap:12px !important;
}

.home-category-card{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:18px !important;
  border:1px solid #d9e3e8 !important;
  background:linear-gradient(180deg,#f3f5f6 0%,#edf1f3 100%) !important;
  box-shadow:0 8px 18px rgba(7,31,42,.045) !important;
}

.home-category-card::before,
.home-category-card::after,
.home-category-card:not(.featured)::after{
  display:none !important;
  content:none !important;
}

.home-category-card.featured{
  background:linear-gradient(145deg,#063641 0%,#062a34 100%) !important;
  border-color:#09c6b8 !important;
  box-shadow:0 0 0 1px rgba(9,198,184,.18),0 14px 28px rgba(4,72,78,.16) !important;
}

.home-cat-media{
  width:100% !important;
  aspect-ratio:176 / 95 !important;
  height:auto !important;
  min-height:95px !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#f2f4f5 0%,#edf1f3 100%) !important;
  border-radius:0 !important;
}

.home-category-card.featured .home-cat-media{
  background:transparent !important;
}

.home-cat-media img,
.home-category-card .home-cat-media img,
.home-category-card:not(.featured) .home-cat-media img,
.home-category-card.featured .home-cat-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  filter:none !important;
  image-rendering:auto !important;
}

.home-cat-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  padding:12px 14px 14px !important;
  min-height:58px !important;
  background:transparent !important;
}

.home-category-card:not(.featured) .home-cat-meta{
  background:linear-gradient(180deg,rgba(243,245,246,0) 0%,rgba(237,241,243,.96) 30%,#edf1f3 100%) !important;
}

.home-category-card.featured .home-cat-meta{
  background:transparent !important;
}

.home-cat-meta strong{
  font-size:12.5px !important;
  line-height:1.16 !important;
  letter-spacing:-.01em !important;
}

.home-category-card:not(.featured) .home-cat-meta strong{
  color:#081b2c !important;
}

.home-category-card.featured .home-cat-meta strong{
  color:#ffffff !important;
}

.home-cat-meta span{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
}

.home-category-card:not(.featured) .home-cat-meta span{
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(19,52,62,.06) !important;
  box-shadow:0 5px 12px rgba(8,27,44,.05) !important;
  color:#19343b !important;
}

.home-category-card.featured .home-cat-meta span{
  background:#10cfc0 !important;
  color:#fff !important;
  box-shadow:none !important;
}

.home-category-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 15px 28px rgba(7,31,42,.07) !important;
}

@media(max-width:820px){
  .home-category-card{border-radius:16px !important;}
  .home-cat-media{min-height:95px !important;}
  .home-cat-meta{padding:10px 12px 12px !important; min-height:56px !important;}
}


/* =====================================================================
   SERVICAM V23 — CATEGORY CARDS FINAL POLISH
   - extend the gray blend upward on neutral cards
   - featured GPS card should not feel boxed or hard-cropped
   ===================================================================== */

.home-category-card{
  overflow:hidden !important;
}

.home-category-card:not(.featured) .home-cat-media{
  min-height:98px !important;
  padding:8px 10px 0 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#f0f3f5 0%,#eceff2 100%) !important;
}

.home-category-card:not(.featured) .home-cat-media img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  filter:none !important;
}

.home-category-card:not(.featured) .home-cat-meta{
  margin-top:-9px !important;
  padding:18px 14px 14px !important;
  min-height:64px !important;
  background:linear-gradient(180deg,rgba(235,239,242,.10) 0%,rgba(232,236,239,.88) 18%,#e8edf0 46%,#edf1f3 100%) !important;
}

.home-category-card.featured{
  background:linear-gradient(145deg,#063842 0%,#062d36 55%,#072631 100%) !important;
}

.home-category-card.featured .home-cat-media{
  min-height:98px !important;
  padding:6px 8px 0 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  background:linear-gradient(180deg,rgba(7,60,70,.96) 0%,rgba(6,47,57,.98) 100%) !important;
}

.home-category-card.featured .home-cat-media img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:scale(1.05) !important;
  border-radius:0 !important;
  filter:none !important;
}

.home-category-card.featured .home-cat-meta{
  margin-top:-6px !important;
  padding:15px 14px 14px !important;
  min-height:64px !important;
  background:linear-gradient(180deg,rgba(6,53,62,.06) 0%,rgba(6,47,56,.55) 24%,rgba(6,40,49,.98) 100%) !important;
}

@media(max-width:820px){
  .home-category-card:not(.featured) .home-cat-media,
  .home-category-card.featured .home-cat-media{
    min-height:94px !important;
    padding:7px 8px 0 !important;
  }
  .home-category-card:not(.featured) .home-cat-meta,
  .home-category-card.featured .home-cat-meta{
    margin-top:-7px !important;
    padding:16px 12px 12px !important;
    min-height:60px !important;
  }
}


/* =====================================================================
   SERVICAM V24 — HEADER CART LAYOUT FIX
   ===================================================================== */
.main-header{overflow:visible !important}
.header-row{
  grid-template-columns:210px minmax(340px,1fr) minmax(250px,330px) auto auto !important;
  gap:14px !important;
}

.header-quick-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:14px !important;
  min-width:0 !important;
}

.header-quick-actions .mini-action{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  white-space:nowrap !important;
  min-width:0 !important;
}

.header-quick-actions .mini-action>.site-icon{
  font-size:21px !important;
  color:#0a2d38 !important;
  flex:0 0 auto !important;
}

.header-quick-actions .mini-action span{display:grid !important}
.header-quick-actions .mini-action strong{font-size:11.5px !important;line-height:1.05 !important}
.header-quick-actions .mini-action small{font-size:9.5px !important;line-height:1.1 !important;margin-top:2px !important}
.header-quick-actions .cart-badge{position:relative !important;padding-right:8px !important}
.header-quick-actions .cart-count{right:-3px !important;top:-7px !important}

@media (min-width:1101px) and (max-width:1450px){
  .container{width:min(100% - 40px,1460px) !important}
  .header-row{grid-template-columns:198px minmax(285px,1fr) minmax(235px,300px) auto auto !important;gap:10px !important}
  .logo img{width:190px !important;max-width:190px !important}
  .nav{gap:14px !important;font-size:12px !important}
  .premium-search{height:40px !important}
  .premium-search .search-prefix{padding-left:12px !important;font-size:15px !important}
  .premium-search input{font-size:12px !important;padding:0 7px !important}
  .premium-search button{height:40px !important;width:42px !important}
  .header-quick-actions{gap:10px !important}
  .header-quick-actions .mini-action{gap:6px !important}
  .header-quick-actions .mini-action>.site-icon{font-size:20px !important}
  .header-quick-actions .mini-action strong{font-size:10.5px !important}
  .header-quick-actions .mini-action small{font-size:9px !important}
}

@media(max-width:1100px){
  .header-row{grid-template-columns:200px 1fr auto !important}
  .nav,.premium-search,.header-quick-actions{display:none !important}
}


/* =====================================================================
   SERVICAM V25 — HOME FEATURED PRODUCTS REFINEMENT
   - Bigger home product cards
   - Remove gray thumb background and keep a cleaner white product area
   ===================================================================== */
.home-products-section{
  padding-top: 38px !important;
}

.home-product-grid{
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.home-product-grid .product-card{
  border-radius: 18px !important;
  border: 1px solid #dfe8ec !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(6, 31, 42, 0.045) !important;
}

.home-product-grid .product-thumb{
  height: 170px !important;
  padding: 14px 14px 10px !important;
  background: #ffffff !important;
}

.home-product-grid .product-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.home-product-grid .product-info{
  padding: 14px 14px 14px !important;
  background: #ffffff !important;
}

.home-product-grid .product-title{
  font-size: 14px !important;
  line-height: 1.35 !important;
  min-height: 56px !important;
  font-weight: 700 !important;
}

.home-product-grid .price{
  font-size: 17px !important;
  margin-top: 10px !important;
}

.home-product-grid .old-price{
  font-size: 11px !important;
}

.home-product-grid .rating{
  font-size: 11px !important;
  margin-top: 9px !important;
}

.home-product-grid .add-cart{
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

.home-product-grid .heart{
  top: 10px !important;
  right: 10px !important;
}

.home-product-grid .pill{
  top: 10px !important;
  left: 10px !important;
  font-size: 10px !important;
}

@media (max-width: 1480px){
  .home-product-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px){
  .home-product-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .home-product-grid .product-thumb{
    height: 158px !important;
  }
}

@media (max-width: 820px){
  .home-product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .home-product-grid .product-thumb{
    height: 150px !important;
  }
}

@media (max-width: 520px){
  .home-product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .home-product-grid .product-thumb{
    height: 138px !important;
    padding: 12px 12px 8px !important;
  }
  .home-product-grid .product-title{
    font-size: 12px !important;
    min-height: 48px !important;
  }
  .home-product-grid .price{
    font-size: 15px !important;
  }
}


/* =====================================================================
   SERVICAM V26 — HOME PROMO BANNERS CLEANUP
   Remove the ghost text from the embedded banner images by shifting the
   image focus to the right and strengthening the HTML-side overlay.
   ===================================================================== */
.home-promo-card{
  isolation:isolate;
}

.home-promo-card img{
  object-fit:cover !important;
  transform:scale(1.05) !important;
  will-change:transform;
}

.home-promo-card.security img{
  object-position:78% center !important;
}

.home-promo-card.fleet img{
  object-position:82% center !important;
}

.home-promo-card.security::after{
  background:linear-gradient(90deg,
    rgba(3,30,40,.995) 0%,
    rgba(3,30,40,.985) 28%,
    rgba(3,30,40,.93) 48%,
    rgba(3,30,40,.56) 68%,
    rgba(3,30,40,0) 86%) !important;
}

.home-promo-card.fleet::after{
  background:linear-gradient(90deg,
    rgba(246,250,252,.995) 0%,
    rgba(246,250,252,.985) 28%,
    rgba(246,250,252,.95) 48%,
    rgba(246,250,252,.60) 68%,
    rgba(246,250,252,0) 86%) !important;
}

.home-promo-copy{
  max-width:41% !important;
}

@media (max-width: 1180px){
  .home-promo-copy{max-width:46% !important;}
}

@media (max-width: 820px){
  .home-promo-card img{transform:scale(1.03) !important;}
  .home-promo-card.security img,
  .home-promo-card.fleet img{object-position:center center !important;}
  .home-promo-copy{max-width:62% !important;}
}


/* =====================================================================
   SERVICAM V27 — FEATURED CATEGORY CARD NATURAL IMAGE FIX
   - remove boxed feeling from first category card
   - let the image feel fuller and better positioned
   ===================================================================== */
.home-category-card.featured{
  background: linear-gradient(145deg,#063842 0%,#062d36 55%,#072631 100%) !important;
}

.home-category-card.featured .home-cat-media{
  min-height: 104px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  border-radius: 16px 16px 0 0 !important;
}

.home-category-card.featured .home-cat-media img{
  width: 100% !important;
  height: 100% !important;
  display:block !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.08) !important;
  filter:none !important;
}

.home-category-card.featured .home-cat-meta{
  margin-top: 0 !important;
  padding: 14px 14px 14px !important;
  min-height: 62px !important;
  background: linear-gradient(180deg,rgba(6,47,56,.18) 0%,rgba(6,40,49,.92) 42%,rgba(6,40,49,1) 100%) !important;
}

@media(max-width:820px){
  .home-category-card.featured .home-cat-media{
    min-height: 98px !important;
  }
}


/* =====================================================================
   SERVICAM V28 — FEATURED CATEGORY CARD SIZE BALANCE FIX
   - first category image was too zoomed/cropped
   - restore full composition and natural fit
   ===================================================================== */
.home-category-card.featured .home-cat-media{
  min-height: 98px !important;
  padding: 0 !important;
  background: linear-gradient(180deg,#083743 0%,#072e39 100%) !important;
}

.home-category-card.featured .home-cat-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(.97) !important;
}

.home-category-card.featured .home-cat-meta{
  padding-top: 12px !important;
  background: linear-gradient(180deg,rgba(7,48,57,.55) 0%,rgba(6,40,49,.96) 40%,rgba(6,40,49,1) 100%) !important;
}

@media(max-width:820px){
  .home-category-card.featured .home-cat-media{
    min-height: 94px !important;
  }
}


/* =====================================================================
   SERVICAM V29 — PRODUCTS PAGE HERO + WHITE CARDS POLISH
   ===================================================================== */
body[data-page="products"] .page-hero{
  padding: 56px 0 34px !important;
  background:
    linear-gradient(90deg, rgba(2,19,29,.94) 0%, rgba(3,24,35,.88) 32%, rgba(4,29,39,.55) 56%, rgba(5,36,45,.18) 72%, rgba(5,36,45,.06) 100%),
    url('../assets/pixel/products-hero-premium-v29.png') center center/cover no-repeat !important;
}
body[data-page="products"] .page-hero .crumb{color:rgba(255,255,255,.74)}
body[data-page="products"] .page-hero h1{
  max-width: 560px;
  margin-bottom: 12px;
}
body[data-page="products"] .page-hero p{
  max-width: 610px;
  color: rgba(255,255,255,.88);
}
body[data-page="products"] .hero-layout{
  align-items: stretch;
  gap: 28px;
}
body[data-page="products"] .hero-side-card{
  min-width: 340px;
  max-width: 390px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(9,30,39,.74) 0%, rgba(9,32,41,.62) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 42px rgba(3,16,24,.20);
}
body[data-page="products"] .hero-side-card h3,
body[data-page="products"] .hero-side-card p,
body[data-page="products"] .hero-side-card strong,
body[data-page="products"] .hero-side-card span{color:#fff}
body[data-page="products"] .hero-side-card p{color:rgba(255,255,255,.84)}
body[data-page="products"] .hero-metrics div{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}
body[data-page="products"] .hero-metrics span{color:rgba(255,255,255,.72)}
body[data-page="products"] .category-rail{
  margin-top: 24px;
  gap: 12px;
}
body[data-page="products"] .category-chip{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  backdrop-filter: blur(7px);
}
body[data-page="products"] .category-chip.active{
  background: #fff;
  color: #083948;
  border-color: #fff;
}
body[data-page="products"] .category-chip b{opacity:.95}

/* Product cards on product listing should match the clean white home style */
body[data-page="products"] .product-grid{
  gap: 18px;
}
body[data-page="products"] .product-card{
  background: #fff !important;
  border: 1px solid #dbe6ea !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(7,29,39,.04) !important;
}
body[data-page="products"] .product-card:hover{
  box-shadow: 0 16px 34px rgba(7,29,39,.08) !important;
}
body[data-page="products"] .product-thumb{
  height: 190px !important;
  background: #fff !important;
  padding: 14px 14px 8px !important;
}
body[data-page="products"] .product-thumb img{
  object-fit: contain !important;
  filter: none !important;
}
body[data-page="products"] .product-info{
  padding: 14px 14px 13px !important;
}
body[data-page="products"] .product-title{
  font-size: 15px !important;
  line-height: 1.42 !important;
  min-height: 44px !important;
}
body[data-page="products"] .price{
  font-size: 18px !important;
}
body[data-page="products"] .old-price{font-size:12px !important}
body[data-page="products"] .rating{font-size:12px !important}
body[data-page="products"] .add-cart{
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}

@media (max-width: 1100px){
  body[data-page="products"] .hero-side-card{
    min-width: 100%;
    max-width: 100%;
  }
  body[data-page="products"] .page-hero{
    padding-bottom: 26px !important;
    background-position: 64% center !important;
  }
}


/* =====================================================================
   SERVICAM V30 — CLEANER PRODUCTS HERO (without right metrics card)
   ===================================================================== */
body[data-page="products"] .hero-layout{
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
body[data-page="products"] .page-hero{
  padding: 56px 0 30px !important;
  background-position: center center !important;
}
body[data-page="products"] .page-hero h1{
  max-width: 640px !important;
}
body[data-page="products"] .page-hero p{
  max-width: 720px !important;
}
body[data-page="products"] .hero-pills{
  margin-top: 18px !important;
}
body[data-page="products"] .category-rail{
  margin-top: 26px !important;
}
body[data-page="products"] .hero-side-card{display:none !important;}
@media (max-width:1100px){
  body[data-page="products"] .page-hero{
    background-position: 62% center !important;
  }
}
@media (max-width:820px){
  body[data-page="products"] .page-hero{
    padding: 42px 0 28px !important;
    background-position: 68% center !important;
  }
}

/* ===== Categories page premium refresh v31 ===== */
body[data-page="categories"] .categories-hero-v31{
  min-height:380px;
  background-image:linear-gradient(90deg, rgba(4,24,35,.88) 0%, rgba(4,36,49,.72) 36%, rgba(4,30,42,.28) 68%, rgba(4,24,35,.56) 100%), url('../assets/pixel/categories-hero-premium-v31.png') !important;
  background-position:center center !important;
  background-size:cover !important;
}
body[data-page="categories"] .hero-layout--single{
  grid-template-columns:minmax(0,1fr) !important;
}
body[data-page="categories"] .categories-grid-v31{
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
body[data-page="categories"] .feature-card-v31{
  border:1px solid #dbe8ec;
  border-radius:28px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(7,29,39,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
body[data-page="categories"] .feature-card-v31:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 42px rgba(7,29,39,.10);
}
body[data-page="categories"] .feature-card-v31 .card-media{
  height:232px;
  background:#edf4f6;
}
body[data-page="categories"] .feature-card-v31 .card-media.cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
body[data-page="categories"] .feature-card-v31 .card-body{
  padding:22px 22px 24px;
}
body[data-page="categories"] .feature-card-v31 h3{
  font:800 20px/1.18 Manrope;
  margin:0 0 8px;
}
body[data-page="categories"] .feature-card-v31 p{
  font-size:14px;
  line-height:1.68;
  color:#667680;
}
body[data-page="categories"] .categories-panels-v31{
  margin-top:30px;
}
body[data-page="categories"] .ecosystem-panel-v31{
  position:relative;
  overflow:hidden;
  background-image:linear-gradient(90deg, rgba(4,28,38,.90) 0%, rgba(4,47,60,.78) 42%, rgba(4,47,60,.34) 100%), url('../assets/pixel/categories-ecosystem-panel-v31.png');
  background-size:cover;
  background-position:center;
  min-height:355px;
}
body[data-page="categories"] .ecosystem-panel-v31 .bullet-chip{
  backdrop-filter:blur(4px);
}
body[data-page="categories"] .gps-pulse-v31,
body[data-page="categories"] .gps-orbit-v31{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
}
body[data-page="categories"] .gps-pulse-v31{
  right:56px;
  bottom:44px;
  width:96px;
  height:96px;
  border:2px solid rgba(74,241,225,.38);
  box-shadow:0 0 0 0 rgba(74,241,225,.38);
  animation:gpsPulseV31 2.6s ease-out infinite;
}
body[data-page="categories"] .gps-orbit-v31{
  right:84px;
  bottom:72px;
  width:38px;
  height:38px;
  background:radial-gradient(circle at 30% 30%, #dffcf8 0%, #3fe0cf 42%, #10a99d 100%);
  box-shadow:0 0 22px rgba(74,241,225,.55);
}
@keyframes gpsPulseV31{
  0%{transform:scale(.72);opacity:.95;box-shadow:0 0 0 0 rgba(74,241,225,.38)}
  70%{transform:scale(1.2);opacity:.18;box-shadow:0 0 0 26px rgba(74,241,225,0)}
  100%{transform:scale(1.24);opacity:0;box-shadow:0 0 0 0 rgba(74,241,225,0)}
}
body[data-page="categories"] .guide-panel-v31{
  min-height:355px;
}
@media (max-width: 1240px){
  body[data-page="categories"] .categories-grid-v31{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 900px){
  body[data-page="categories"] .categories-grid-v31{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  body[data-page="categories"] .categories-grid-v31{grid-template-columns:1fr}
  body[data-page="categories"] .categories-hero-v31{min-height:auto}
  body[data-page="categories"] .feature-card-v31 .card-media{height:205px}
  body[data-page="categories"] .gps-pulse-v31,
  body[data-page="categories"] .gps-orbit-v31{display:none}
}

/* =====================================================================
   SERVICAM V32 — SOLUCIONES PREMIUM REFRESH
   ===================================================================== */
body[data-page="solutions"] .solutions-hero-v32{
  min-height:390px;
  padding:62px 0 44px !important;
  background-image:linear-gradient(90deg,rgba(3,24,34,.94) 0%,rgba(3,34,45,.80) 36%,rgba(3,29,39,.34) 66%,rgba(3,24,34,.52) 100%),url('../assets/pixel/solutions-hero-premium-v32.png') !important;
  background-position:center center !important;
  background-size:cover !important;
}
body[data-page="solutions"] .solutions-hero-layout-v32{
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
}
body[data-page="solutions"] .solutions-hero-v32 h1{max-width:780px !important}
body[data-page="solutions"] .solutions-hero-v32 p{max-width:760px !important}
body[data-page="solutions"] .solutions-main-v32{padding-top:54px}
body[data-page="solutions"] .solutions-section-head-v32{margin-bottom:26px}
body[data-page="solutions"] .solutions-section-head-v32 h2{max-width:820px}
body[data-page="solutions"] .solutions-grid-v32{grid-template-columns:repeat(3,1fr);gap:22px}
body[data-page="solutions"] .solution-card-v32{
  border-radius:26px;
  background:#fff;
  border:1px solid #dbe7eb;
  overflow:hidden;
  box-shadow:0 18px 36px rgba(7,29,39,.06);
  transition:transform .28s ease,box-shadow .28s ease;
}
body[data-page="solutions"] .solution-card-v32:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 44px rgba(7,29,39,.11);
}
body[data-page="solutions"] .solution-card-v32 .card-media{
  height:260px;
  background:#eef4f6;
}
body[data-page="solutions"] .solution-card-v32 .card-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
}
body[data-page="solutions"] .solution-card-v32 .card-body{padding:24px 24px 26px}
body[data-page="solutions"] .solution-card-kicker{
  color:#07867d;font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:9px;
}
body[data-page="solutions"] .solution-card-v32 h3{font-size:25px;margin-bottom:8px}
body[data-page="solutions"] .solution-card-v32 p{font-size:14px;line-height:1.7}

body[data-page="solutions"] .engineering-showcase-v32{
  margin-top:34px;
  min-height:430px;
  border-radius:32px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  background:#052f3b;
  box-shadow:0 24px 50px rgba(6,31,42,.10);
}
body[data-page="solutions"] .engineering-visual-v32{
  position:relative;
  overflow:hidden;
  min-height:430px;
}
body[data-page="solutions"] .engineering-visual-v32::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,40,51,.02) 0%,rgba(4,40,51,.16) 62%,rgba(4,40,51,.78) 100%);pointer-events:none;
}
body[data-page="solutions"] .engineering-visual-v32 img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:scale(1.02);
  animation:engineeringFloatV32 10s ease-in-out infinite alternate;
}
body[data-page="solutions"] .engineering-copy-v32{
  position:relative;z-index:3;padding:48px 44px 42px;color:#fff;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,#083d49 0%,#052e39 100%);
}
body[data-page="solutions"] .engineering-copy-v32 h2{font:800 42px/1.04 Manrope;margin:0 0 14px}
body[data-page="solutions"] .engineering-copy-v32>p{font-size:16px;line-height:1.72;color:#d9ecef;margin:0}
body[data-page="solutions"] .engineering-stats-v32{margin-top:24px}
body[data-page="solutions"] .engineering-stats-v32 .stat-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.06)}
body[data-page="solutions"] .engineering-scan-v32{
  position:absolute;left:-20%;top:0;width:34%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(63,235,221,.18),transparent);
  transform:skewX(-14deg);animation:engineeringScanV32 5.6s linear infinite;
}
body[data-page="solutions"] .engineering-node-v32{
  position:absolute;z-index:3;width:16px;height:16px;border-radius:50%;background:#5ef1e4;box-shadow:0 0 0 8px rgba(69,232,218,.12),0 0 26px rgba(69,232,218,.85);
  animation:engineeringNodeV32 2.2s ease-in-out infinite;
}
body[data-page="solutions"] .engineering-node-v32.node-a{left:34%;top:33%}
body[data-page="solutions"] .engineering-node-v32.node-b{left:66%;top:55%;animation-delay:.5s}
body[data-page="solutions"] .engineering-node-v32.node-c{left:47%;top:70%;animation-delay:1s}
body[data-page="solutions"] .engineering-ring-v32{
  position:absolute;z-index:2;border:1px solid rgba(84,237,225,.46);border-radius:50%;animation:engineeringRingV32 4s ease-out infinite;
}
body[data-page="solutions"] .engineering-ring-v32.ring-a{width:88px;height:88px;left:30%;top:25%}
body[data-page="solutions"] .engineering-ring-v32.ring-b{width:118px;height:118px;left:61%;top:45%;animation-delay:1.2s}
@keyframes engineeringScanV32{0%{left:-28%}100%{left:120%}}
@keyframes engineeringNodeV32{0%,100%{transform:scale(.82);opacity:.72}50%{transform:scale(1.16);opacity:1}}
@keyframes engineeringRingV32{0%{transform:scale(.65);opacity:.7}75%{transform:scale(1.45);opacity:.05}100%{transform:scale(1.5);opacity:0}}
@keyframes engineeringFloatV32{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.055) translate3d(-8px,-5px,0)}}

body[data-page="solutions"] .solutions-support-v32{
  margin-top:28px;padding:38px;border-radius:30px;background:linear-gradient(135deg,#eef8f9,#dcecef);box-shadow:0 16px 36px rgba(7,29,39,.05);
}
body[data-page="solutions"] .solutions-support-v32>div:first-child h2{font:800 38px/1.05 Manrope;margin:0 0 10px}
body[data-page="solutions"] .solutions-support-v32>div:first-child p{font-size:15px;line-height:1.7;color:#5c6d77;max-width:760px}
body[data-page="solutions"] .support-steps-v32{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
body[data-page="solutions"] .support-steps-v32 article{padding:22px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(6,56,69,.07)}
body[data-page="solutions"] .support-steps-v32 article>span{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#e0f6f3;color:#07877e;font-weight:800;margin-bottom:14px}
body[data-page="solutions"] .support-steps-v32 strong{display:block;font-size:18px;margin-bottom:6px}
body[data-page="solutions"] .support-steps-v32 p{margin:0;color:#63737d;font-size:13px;line-height:1.6}

@media(max-width:1100px){
  body[data-page="solutions"] .solutions-grid-v32{grid-template-columns:1fr 1fr}
  body[data-page="solutions"] .engineering-showcase-v32{grid-template-columns:1fr}
  body[data-page="solutions"] .engineering-visual-v32{min-height:360px}
}
@media(max-width:820px){
  body[data-page="solutions"] .solutions-grid-v32{grid-template-columns:1fr}
  body[data-page="solutions"] .solution-card-v32 .card-media{height:220px}
  body[data-page="solutions"] .engineering-copy-v32{padding:30px 26px}
  body[data-page="solutions"] .engineering-copy-v32 h2{font-size:32px}
  body[data-page="solutions"] .support-steps-v32{grid-template-columns:1fr}
  body[data-page="solutions"] .solutions-support-v32{padding:28px}
}

/* ===== V33 ABOUT / NOSOTROS PREMIUM REDESIGN ===== */
body[data-page="about"] .page-hero{
  background-image:linear-gradient(90deg, rgba(4,25,35,.88) 0%, rgba(4,37,50,.70) 36%, rgba(3,28,38,.24) 70%, rgba(4,25,35,.58) 100%), url('../assets/pixel/about-hero-premium-v33.png');
}
body[data-page="about"] .about-hero-layout-v33{
  grid-template-columns:minmax(0,1fr);
}
body[data-page="about"] .about-hero-copy-v33{max-width:860px}
body[data-page="about"] .about-hero-pills-v33 span{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.12);
}
body[data-page="about"] .about-hero-metrics-v33{max-width:820px}
body[data-page="about"] .about-main-v33{padding-top:38px}

body[data-page="about"] .about-purpose-grid-v33{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}
body[data-page="about"] .about-visual-card-v33{
  position:relative;
  min-height:520px;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(145deg,#062d38,#0a5965);
  box-shadow:0 22px 44px rgba(6,29,42,.10);
}
body[data-page="about"] .about-visual-card-v33 img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  animation:aboutVisualFloatV33 10s ease-in-out infinite alternate;
}
body[data-page="about"] .about-visual-card-v33:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(3,23,31,.44),rgba(6,55,69,.12) 42%,rgba(3,23,31,.5));
}
body[data-page="about"] .about-visual-glow-v33{
  position:absolute;
  z-index:2;
  inset:auto auto 12% 10%;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(84,239,226,.34),rgba(84,239,226,0) 68%);
  filter:blur(8px);
}
body[data-page="about"] .about-pulse-v33{
  position:absolute;
  z-index:3;
  border-radius:50%;
  border:1px solid rgba(96,245,233,.52);
  animation:aboutPulseV33 4.6s ease-out infinite;
}
body[data-page="about"] .about-pulse-v33.pulse-a{width:112px;height:112px;left:58%;top:20%}
body[data-page="about"] .about-pulse-v33.pulse-b{width:86px;height:86px;left:25%;top:58%;animation-delay:1.6s}
body[data-page="about"] .about-node-v33{
  position:absolute;
  z-index:4;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#5ef1e4;
  box-shadow:0 0 0 8px rgba(69,232,218,.14),0 0 22px rgba(69,232,218,.82);
  animation:aboutNodeV33 2.5s ease-in-out infinite;
}
body[data-page="about"] .about-node-v33.node-a{left:61%;top:25%}
body[data-page="about"] .about-node-v33.node-b{left:28%;top:62%;animation-delay:.7s}
body[data-page="about"] .about-node-v33.node-c{left:72%;top:72%;animation-delay:1.2s}
body[data-page="about"] .about-floating-chip-v33{
  position:absolute;
  z-index:4;
  padding:11px 16px;
  border-radius:999px;
  color:#fff;
  background:rgba(5,37,48,.54);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 18px 40px rgba(3,21,28,.18);
}
body[data-page="about"] .about-floating-chip-v33.chip-a{left:22px;top:24px}
body[data-page="about"] .about-floating-chip-v33.chip-b{right:22px;top:46px}
body[data-page="about"] .about-floating-chip-v33.chip-c{left:28px;bottom:22px}

body[data-page="about"] .about-purpose-copy-v33{
  padding:34px;
  border-radius:32px;
  background:linear-gradient(135deg,#eef8f9,#dcecef);
  box-shadow:0 18px 38px rgba(7,29,39,.05);
}
body[data-page="about"] .about-purpose-copy-v33 h2{
  margin:0 0 12px;
  font:800 42px/1.04 Manrope;
  color:#082630;
}
body[data-page="about"] .about-purpose-copy-v33>p{
  margin:0;
  color:#5c6d77;
  font-size:16px;
  line-height:1.8;
}
body[data-page="about"] .about-bullet-grid-v33{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:22px;
}
body[data-page="about"] .about-bullet-card-v33{
  padding:18px 18px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(6,56,69,.06);
}
body[data-page="about"] .about-bullet-card-v33 strong{
  display:block;
  margin-bottom:6px;
  font-size:15px;
  color:#08303b;
}
body[data-page="about"] .about-bullet-card-v33 span{
  display:block;
  color:#60717b;
  font-size:14px;
  line-height:1.6;
}

body[data-page="about"] .about-highlight-strip-v33{
  margin-top:26px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  padding:32px;
  border-radius:30px;
  background:linear-gradient(135deg,#06313e,#0b5e69);
  box-shadow:0 18px 40px rgba(7,29,39,.08);
}
body[data-page="about"] .about-highlight-copy-v33 h2{
  margin:0 0 10px;
  color:#fff;
  font:800 40px/1.06 Manrope;
}
body[data-page="about"] .about-highlight-copy-v33 p{
  margin:0;
  color:#d8eaee;
  font-size:16px;
  line-height:1.75;
}
body[data-page="about"] .about-highlight-points-v33{
  display:grid;
  gap:14px;
}
body[data-page="about"] .about-highlight-points-v33 article{
  padding:18px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
body[data-page="about"] .about-highlight-points-v33 strong{
  display:block;
  color:#fff;
  font-size:18px;
  margin-bottom:4px;
}
body[data-page="about"] .about-highlight-points-v33 span{
  display:block;
  color:#d6ebed;
  font-size:14px;
  line-height:1.65;
}

body[data-page="about"] .about-section-head-v33{margin-top:34px}
body[data-page="about"] .about-value-grid-v33{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
body[data-page="about"] .about-value-card-v33{
  padding:24px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(8,48,59,.08);
  box-shadow:0 14px 30px rgba(7,29,39,.04);
  transition:transform .28s ease, box-shadow .28s ease;
}
body[data-page="about"] .about-value-card-v33:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(7,29,39,.08);
}
body[data-page="about"] .about-value-icon-v33{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  margin-bottom:14px;
  background:linear-gradient(135deg,#e7faf7,#d6f0f1);
  color:#0a7f76;
  font-weight:800;
}
body[data-page="about"] .about-value-card-v33 h3{
  margin:0 0 8px;
  font:800 21px/1.18 Manrope;
}
body[data-page="about"] .about-value-card-v33 p{
  margin:0;
  color:#60717b;
  font-size:14px;
  line-height:1.75;
}

body[data-page="about"] .about-process-wrap-v33{margin-top:34px}
body[data-page="about"] .about-process-grid-v33{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
body[data-page="about"] .about-process-card-v33{
  position:relative;
  padding:24px;
  border-radius:26px;
  background:linear-gradient(180deg,#fdfefe,#eef5f7);
  border:1px solid rgba(8,48,59,.08);
  overflow:hidden;
}
body[data-page="about"] .about-process-card-v33:before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#16d7c1,#0c8b83);
}
body[data-page="about"] .about-process-card-v33 span{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:14px;
  background:#e0f5f2;
  color:#0a7f76;
  font-weight:800;
  margin-bottom:14px;
}
body[data-page="about"] .about-process-card-v33 h3{margin:0 0 8px;font:800 22px/1.15 Manrope}
body[data-page="about"] .about-process-card-v33 p{margin:0;color:#60717b;font-size:14px;line-height:1.75}

body[data-page="about"] .about-cta-band-v33{
  margin-top:34px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:18px;
  padding:30px 32px;
  border-radius:28px;
  background:linear-gradient(135deg,#062d39,#0a5d68);
  box-shadow:0 18px 36px rgba(7,29,39,.08);
}
body[data-page="about"] .about-cta-band-v33 h2{margin:0 0 10px;color:#fff;font:800 38px/1.06 Manrope}
body[data-page="about"] .about-cta-band-v33 p{margin:0;color:#d5e8eb;font-size:16px;line-height:1.75}
body[data-page="about"] .about-cta-actions-v33{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}

@keyframes aboutPulseV33{0%{transform:scale(.6);opacity:.85}70%{transform:scale(1.45);opacity:.08}100%{transform:scale(1.56);opacity:0}}
@keyframes aboutNodeV33{0%,100%{transform:scale(.88);opacity:.72}50%{transform:scale(1.16);opacity:1}}
@keyframes aboutVisualFloatV33{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.06) translate3d(-8px,-4px,0)}}

@media(max-width:1180px){
  body[data-page="about"] .about-purpose-grid-v33,
  body[data-page="about"] .about-highlight-strip-v33,
  body[data-page="about"] .about-cta-band-v33{grid-template-columns:1fr}
  body[data-page="about"] .about-value-grid-v33{grid-template-columns:repeat(2,1fr)}
  body[data-page="about"] .about-process-grid-v33{grid-template-columns:1fr}
  body[data-page="about"] .about-cta-actions-v33{justify-content:flex-start}
}
@media(max-width:820px){
  body[data-page="about"] .about-visual-card-v33{min-height:360px}
  body[data-page="about"] .about-purpose-copy-v33,
  body[data-page="about"] .about-highlight-strip-v33,
  body[data-page="about"] .about-cta-band-v33{padding:26px}
  body[data-page="about"] .about-purpose-copy-v33 h2,
  body[data-page="about"] .about-highlight-copy-v33 h2,
  body[data-page="about"] .about-cta-band-v33 h2{font-size:32px}
  body[data-page="about"] .about-bullet-grid-v33,
  body[data-page="about"] .about-value-grid-v33{grid-template-columns:1fr}
}
@media(max-width:520px){
  body[data-page="about"] .about-visual-card-v33{min-height:310px}
  body[data-page="about"] .about-floating-chip-v33{font-size:11px;padding:9px 12px}
  body[data-page="about"] .about-purpose-copy-v33 h2,
  body[data-page="about"] .about-highlight-copy-v33 h2,
  body[data-page="about"] .about-cta-band-v33 h2{font-size:28px}
}

/* ===== V34 ABOUT / NOSOTROS CLEAN PREMIUM REDESIGN ===== */
body[data-page="about"] .about-hero-v34{
  background-image:linear-gradient(90deg, rgba(3,19,28,.84) 0%, rgba(4,28,39,.76) 36%, rgba(3,19,28,.28) 68%, rgba(3,19,28,.54) 100%), url('../assets/pixel/about-hero-v34.png');
  background-position:center center;
  min-height:560px;
}
body[data-page="about"] .about-hero-layout-v34{grid-template-columns:minmax(0,1fr)}
body[data-page="about"] .about-hero-copy-v34{max-width:780px;padding:10px 0 6px}
body[data-page="about"] .about-hero-copy-v34 h1{max-width:720px}
body[data-page="about"] .about-hero-copy-v34 p{max-width:700px}
body[data-page="about"] .about-hero-pills-v34 span{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12)}
body[data-page="about"] .about-main-v34{padding-top:40px}

body[data-page="about"] .about-intro-grid-v34{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}
body[data-page="about"] .about-intro-visual-v34{
  position:relative;
  min-height:520px;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(135deg,#052935,#0b5964);
  box-shadow:0 24px 48px rgba(6,26,36,.08);
}
body[data-page="about"] .about-intro-visual-v34 img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:aboutVisualFloatV34 12s ease-in-out infinite alternate;
}
body[data-page="about"] .about-intro-visual-v34::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,30,39,.12),rgba(4,19,28,.28));
}
body[data-page="about"] .about-visual-chip-v34{
  position:absolute;z-index:2;padding:12px 16px;border-radius:999px;
  color:#fff;background:rgba(4,30,39,.58);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);font-size:12px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 18px 40px rgba(4,19,28,.18)
}
body[data-page="about"] .about-visual-chip-v34.chip-1{left:22px;top:22px}
body[data-page="about"] .about-visual-chip-v34.chip-2{right:24px;top:34px}
body[data-page="about"] .about-visual-chip-v34.chip-3{left:24px;bottom:26px}

body[data-page="about"] .about-intro-copy-v34{
  padding:34px;border-radius:32px;background:linear-gradient(135deg,#eef8f9,#dfeef1);box-shadow:0 18px 36px rgba(7,29,39,.05)
}
body[data-page="about"] .about-intro-copy-v34 h2{margin:0 0 12px;color:#072732;font:800 42px/1.06 Manrope}
body[data-page="about"] .about-intro-copy-v34>p{margin:0;color:#5b6c76;font-size:16px;line-height:1.8}
body[data-page="about"] .about-feature-list-v34{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
body[data-page="about"] .about-feature-list-v34 article{padding:18px;border-radius:22px;background:rgba(255,255,255,.76);border:1px solid rgba(8,48,59,.06)}
body[data-page="about"] .about-feature-list-v34 strong{display:block;margin-bottom:6px;color:#0a323d;font-size:15px}
body[data-page="about"] .about-feature-list-v34 span{display:block;color:#61727c;font-size:14px;line-height:1.65}

body[data-page="about"] .about-values-head-v34{margin-top:34px}
body[data-page="about"] .about-values-grid-v34{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
body[data-page="about"] .about-value-card-v34{padding:24px;border-radius:26px;background:#fff;border:1px solid rgba(8,48,59,.08);box-shadow:0 14px 30px rgba(7,29,39,.04);transition:transform .28s ease, box-shadow .28s ease}
body[data-page="about"] .about-value-card-v34:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(7,29,39,.08)}
body[data-page="about"] .about-value-badge-v34{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#e6faf7,#d9f1f2);color:#0b8077;font-weight:800;margin-bottom:14px}
body[data-page="about"] .about-value-card-v34 h3{margin:0 0 8px;font:800 22px/1.15 Manrope;color:#082a34}
body[data-page="about"] .about-value-card-v34 p{margin:0;color:#60717b;font-size:14px;line-height:1.75}

body[data-page="about"] .about-solutions-band-v34{
  margin-top:34px;display:grid;grid-template-columns:1.02fr .98fr;gap:18px;padding:30px 32px;border-radius:30px;background:linear-gradient(135deg,#062f3a,#0a5d68);box-shadow:0 18px 40px rgba(7,29,39,.08)
}
body[data-page="about"] .about-solutions-copy-v34 h2{margin:0 0 10px;color:#fff;font:800 40px/1.08 Manrope}
body[data-page="about"] .about-solutions-copy-v34 p{margin:0;color:#d6ebee;font-size:16px;line-height:1.75}
body[data-page="about"] .about-solutions-grid-v34{display:grid;gap:14px}
body[data-page="about"] .about-solutions-grid-v34 article{padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
body[data-page="about"] .about-solutions-grid-v34 strong{display:block;color:#fff;font-size:18px;margin-bottom:4px}
body[data-page="about"] .about-solutions-grid-v34 span{display:block;color:#d6ebed;font-size:14px;line-height:1.65}

body[data-page="about"] .about-process-head-v34{margin-top:34px}
body[data-page="about"] .about-process-grid-v34{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
body[data-page="about"] .about-process-card-v34{position:relative;padding:24px;border-radius:26px;background:linear-gradient(180deg,#fdfefe,#eef5f7);border:1px solid rgba(8,48,59,.08);overflow:hidden}
body[data-page="about"] .about-process-card-v34::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#16d7c1,#0c8b83)}
body[data-page="about"] .about-process-card-v34 span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;background:#e0f5f2;color:#0a7f76;font-weight:800;margin-bottom:14px}
body[data-page="about"] .about-process-card-v34 h3{margin:0 0 8px;font:800 22px/1.15 Manrope;color:#082a34}
body[data-page="about"] .about-process-card-v34 p{margin:0;color:#60717b;font-size:14px;line-height:1.75}

body[data-page="about"] .about-cta-v34{margin-top:34px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:18px;padding:30px 32px;border-radius:28px;background:linear-gradient(135deg,#062d39,#0a5d68);box-shadow:0 18px 36px rgba(7,29,39,.08)}
body[data-page="about"] .about-cta-v34 h2{margin:0 0 10px;color:#fff;font:800 38px/1.06 Manrope}
body[data-page="about"] .about-cta-v34 p{margin:0;color:#d5e8eb;font-size:16px;line-height:1.75}
body[data-page="about"] .about-cta-actions-v34{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}

@keyframes aboutVisualFloatV34{0%{transform:scale(1.01) translate3d(0,0,0)}100%{transform:scale(1.04) translate3d(-8px,-5px,0)}}

@media(max-width:1180px){
  body[data-page="about"] .about-intro-grid-v34,
  body[data-page="about"] .about-solutions-band-v34,
  body[data-page="about"] .about-cta-v34{grid-template-columns:1fr}
  body[data-page="about"] .about-values-grid-v34{grid-template-columns:repeat(2,1fr)}
  body[data-page="about"] .about-process-grid-v34{grid-template-columns:1fr}
  body[data-page="about"] .about-cta-actions-v34{justify-content:flex-start}
}
@media(max-width:820px){
  body[data-page="about"] .about-hero-v34{min-height:520px}
  body[data-page="about"] .about-intro-visual-v34{min-height:340px}
  body[data-page="about"] .about-intro-copy-v34,
  body[data-page="about"] .about-solutions-band-v34,
  body[data-page="about"] .about-cta-v34{padding:26px}
  body[data-page="about"] .about-intro-copy-v34 h2,
  body[data-page="about"] .about-solutions-copy-v34 h2,
  body[data-page="about"] .about-cta-v34 h2{font-size:32px}
  body[data-page="about"] .about-feature-list-v34,
  body[data-page="about"] .about-values-grid-v34{grid-template-columns:1fr}
}
@media(max-width:520px){
  body[data-page="about"] .about-hero-v34{min-height:480px}
  body[data-page="about"] .about-intro-copy-v34 h2,
  body[data-page="about"] .about-solutions-copy-v34 h2,
  body[data-page="about"] .about-cta-v34 h2{font-size:28px}
  body[data-page="about"] .about-visual-chip-v34{font-size:11px;padding:9px 12px}
}

/* =====================================================================
   SERVICAM V35 — REGISTRO PREMIUM + ACCESO AL BACKOFFICE
   ===================================================================== */
.register-page-hero{
  background-image:linear-gradient(90deg,rgba(4,25,35,.92),rgba(4,47,60,.76) 44%,rgba(4,35,47,.32) 76%),url('../assets/pixel/hero-products.png');
  background-position:center;
  background-size:cover;
}
.register-hero-layout{grid-template-columns:minmax(0,1fr)!important}
.register-hero-layout>div{max-width:800px}
.register-hero-pills span{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14)}
.register-main{display:grid;grid-template-columns:minmax(0,1fr) 570px;gap:28px;padding:44px 0 72px;align-items:start}
.register-benefits{padding:38px;border-radius:30px;background:linear-gradient(145deg,#052e3a 0%,#08606a 100%);color:#fff;box-shadow:var(--v6-shadow-lg);position:sticky;top:22px;overflow:hidden}
.register-benefits:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-120px;bottom:-140px;background:radial-gradient(circle,rgba(25,222,202,.26),transparent 68%);pointer-events:none}
.register-benefits h2{font:800 42px/1.05 Manrope;margin:0 0 12px;max-width:600px}
.register-benefits>p{font-size:16px;line-height:1.75;color:#d6e9ec;max-width:720px}
.register-benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.register-benefit-grid article{display:flex;gap:13px;padding:17px;border-radius:19px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.06)}
.register-benefit-icon{flex:0 0 38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.11);color:#68f0df;font-weight:800;font-size:12px}
.register-benefit-grid strong{display:block;font-size:14px;margin-bottom:4px}.register-benefit-grid small{display:block;color:#d5e8eb;font-size:12px;line-height:1.5}
.register-security-note{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:16px;border-radius:18px;background:rgba(2,30,38,.30);border:1px solid rgba(255,255,255,.07)}
.register-security-note>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#14bcae;color:#fff;font-weight:900}.register-security-note strong{display:block;font-size:13px}.register-security-note small{display:block;color:#cfe4e7;line-height:1.5;margin-top:3px}
.register-card{padding:34px;border-radius:28px}
.register-card-head h2{font:800 34px/1.05 Manrope;margin:5px 0 8px}.register-card-head p{color:#6d7b86;font-size:14px;margin:0 0 24px}
.register-form{display:grid;gap:18px}.register-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 14px}.register-form label{font-size:12px;font-weight:800;color:#243741}.register-form .full-field{grid-column:1/-1}.register-form .field{margin-top:7px;width:100%;height:48px;border:1px solid #d7e3e8;border-radius:13px;padding:0 14px;background:#fff;font-size:13px;outline:none;transition:.2s}.register-form select.field{appearance:auto}.register-form .field:focus{border-color:#13b6a8;box-shadow:0 0 0 3px rgba(19,182,168,.10)}.optional{font-size:10px;color:#85949c;font-weight:600;margin-left:4px}
.password-field-wrap{position:relative;margin-top:7px}.password-field-wrap .field{margin-top:0;padding-right:70px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:#edf8f7;color:#087e75;border-radius:9px;padding:7px 10px;font-size:10px;font-weight:800;cursor:pointer}
.register-check{display:flex!important;align-items:flex-start;gap:10px!important;font-size:12px!important;font-weight:500!important;line-height:1.5;color:#53656e!important}.register-check input{margin-top:2px;accent-color:#0eb7a8}.register-check a{color:#078b80;font-weight:800}.register-check.soft{padding:13px 14px;border-radius:14px;background:#f3faf9;border:1px solid #dcefeb}
.register-submit{height:52px;border-radius:14px!important;font-size:14px!important;display:flex!important;align-items:center;justify-content:center;gap:10px}.register-submit span{font-size:20px;line-height:1}.register-login-link{text-align:center;font-size:12px;color:#6c7c85}.register-login-link a{color:#078b80;font-weight:800}
.login-register-btn{display:flex!important;align-items:center;justify-content:center;text-decoration:none;height:48px}.login-card .password-field-wrap{margin-top:7px}.login-card .password-field-wrap .field{margin-top:0;padding-right:72px;width:100%}
@media(max-width:1080px){.register-main{grid-template-columns:1fr}.register-benefits{position:static}.register-benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.register-main{padding-top:26px}.register-benefits,.register-card{padding:24px;border-radius:24px}.register-benefits h2{font-size:31px}.register-benefit-grid,.register-form-grid{grid-template-columns:1fr}.register-form .full-field{grid-column:auto}}

/* =====================================================================
   SERVICAM V36 — AUTH CLEANUP + HEADER CART POLISH
   ===================================================================== */
.header-row{
  grid-template-columns:210px minmax(340px,1fr) minmax(250px,330px) minmax(210px,auto) auto !important;
}
.header-quick-actions{
  gap:16px !important;
  min-width:205px !important;
}
.header-quick-actions .mini-action{
  min-height:46px !important;
  padding:4px 2px !important;
  border-radius:12px !important;
}
.header-quick-actions .mini-icon-stack{
  width:34px !important;
  height:34px !important;
  border-radius:11px !important;
  background:#f1f8f9 !important;
  display:grid !important;
  place-items:center !important;
  position:relative !important;
  flex:0 0 34px !important;
}
.header-quick-actions .mini-icon-stack>.site-icon{
  font-size:20px !important;
  color:#0a2d38 !important;
}
.header-quick-actions .mini-action span:last-child{
  display:grid !important;
  align-content:center !important;
}
.header-quick-actions .mini-action strong{
  font-size:12px !important;
  line-height:1.1 !important;
}
.header-quick-actions .mini-action small{
  font-size:10px !important;
  line-height:1.1 !important;
}
.header-quick-actions .cart-action{
  padding-right:0 !important;
}
.header-quick-actions .cart-count{
  position:absolute !important;
  top:-7px !important;
  right:-7px !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  padding:0 !important;
  border-radius:999px !important;
  border:2px solid #fff !important;
  background:#0bb9aa !important;
  color:#fff !important;
  font-size:9px !important;
  font-style:normal !important;
  font-weight:900 !important;
  line-height:14px !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:0 4px 10px rgba(0,0,0,.10) !important;
}

/* Auth pages: no giant marketing hero */
.auth-main{
  padding-top:34px !important;
}
.auth-page-heading{
  grid-column:1/-1;
  padding:4px 2px 10px;
  max-width:820px;
}
.auth-page-heading h1{
  margin:7px 0 8px;
  font:800 36px/1.07 Manrope;
  color:#082d38;
}
.auth-page-heading p{
  margin:0;
  color:#687984;
  font-size:15px;
  line-height:1.7;
}
.login-main.auth-login-main{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.75fr);
  gap:28px;
  padding-bottom:70px;
  align-items:start;
}
.login-main.auth-login-main .login-benefits{
  margin-top:0 !important;
}
.register-main.register-main-v36{
  padding-top:34px !important;
}
.register-main-v36 .auth-page-heading{
  grid-column:1/-1;
}

/* Password recovery */
.recover-main-v36{padding-bottom:72px !important}
.recover-layout-v36{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(380px,.7fr);
  gap:28px;
  align-items:start;
}
.recover-info-v36{
  padding:36px;
  border-radius:30px;
  background:linear-gradient(145deg,#052e3a 0%,#08606a 100%);
  color:#fff;
  box-shadow:var(--v6-shadow-lg);
  overflow:hidden;
  position:relative;
}
.recover-info-v36:after{
  content:"";
  position:absolute;
  width:300px;height:300px;border-radius:50%;
  right:-100px;bottom:-130px;
  background:radial-gradient(circle,rgba(25,222,202,.24),transparent 68%);
}
.recover-icon-v36{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:#65f1e0;font-size:30px;font-weight:800;margin-bottom:18px;
}
.recover-info-v36 h2{font:800 38px/1.06 Manrope;margin:0 0 12px;max-width:620px}
.recover-info-v36>p{color:#d6e9ec;line-height:1.75;font-size:15px;max-width:700px}
.recover-steps-v36{display:grid;gap:12px;margin-top:24px;position:relative;z-index:1}
.recover-steps-v36>div{display:flex;gap:13px;align-items:flex-start;padding:16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06)}
.recover-steps-v36 b{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.10);color:#67f1e1;font-size:12px;flex:0 0 38px}
.recover-steps-v36 strong{display:block;font-size:14px;margin-bottom:4px}.recover-steps-v36 small{display:block;color:#d5e8eb;font-size:12px;line-height:1.5}
.recover-card-v36{padding:34px;border-radius:28px}
.recover-form-v36{margin-top:22px}.recover-back-v36{display:flex!important;align-items:center;justify-content:center;text-decoration:none}
.recover-success-v36{margin-top:18px;padding:15px 16px;border-radius:14px;background:#eaf9f6;border:1px solid #cceee8;color:#0a6e67}
.recover-success-v36 strong{display:block;margin-bottom:4px}.recover-success-v36 p{margin:0;font-size:12px;line-height:1.5}

@media(min-width:1101px) and (max-width:1450px){
  .header-row{grid-template-columns:198px minmax(285px,1fr) minmax(235px,300px) minmax(185px,auto) auto !important}
  .header-quick-actions{gap:10px !important;min-width:185px !important}
  .header-quick-actions .mini-icon-stack{width:31px !important;height:31px !important;flex-basis:31px !important}
  .header-quick-actions .mini-action strong{font-size:10.5px !important}
  .header-quick-actions .mini-action small{font-size:9px !important}
}
@media(max-width:1080px){
  .login-main.auth-login-main,.recover-layout-v36{grid-template-columns:1fr}
}
@media(max-width:680px){
  .auth-main{padding-top:24px !important}
  .auth-page-heading h1{font-size:30px}
  .recover-info-v36,.recover-card-v36{padding:24px;border-radius:24px}
  .recover-info-v36 h2{font-size:30px}
}

/* =====================================================================
   SERVICAM V37 — HERO VISUAL POLISH + PREMIUM SUPPORT CHAT
   ===================================================================== */

/* Nosotros: limpia el header, elimina CTA redundante y usa composición completa */
body[data-page="about"] .page-hero.about-hero-v37{
  min-height:540px !important;
  background-image:
    linear-gradient(90deg,rgba(2,18,28,.92) 0%,rgba(3,25,36,.77) 38%,rgba(2,22,31,.24) 68%,rgba(2,18,28,.12) 100%),
    url('../assets/pixel/about-hero-v37.png') !important;
  background-size:cover !important;
  background-position:center center !important;
}
body[data-page="about"] .about-hero-layout-v37{grid-template-columns:minmax(0,1fr) !important}
body[data-page="about"] .about-hero-copy-v37{max-width:760px !important;padding:12px 0 !important}
body[data-page="about"] .about-hero-copy-v37 h1{max-width:680px !important}
body[data-page="about"] .about-hero-copy-v37 p{max-width:700px !important}
body[data-page="about"] .about-hero-pills-v37 span{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.14) !important;
  backdrop-filter:blur(6px);
}

/* Contacto: banner exclusivo sin card flotante */
body[data-page="contact"] .page-hero.contact-hero-v37{
  min-height:470px !important;
  background-image:
    linear-gradient(90deg,rgba(2,18,28,.93) 0%,rgba(3,27,39,.78) 37%,rgba(2,22,31,.22) 68%,rgba(2,18,28,.08) 100%),
    url('../assets/pixel/contact-hero-v37.png') !important;
  background-size:cover !important;
  background-position:center center !important;
}
body[data-page="contact"] .contact-hero-layout-v37{grid-template-columns:minmax(0,1fr) !important}
body[data-page="contact"] .contact-hero-layout-v37>div{max-width:760px !important}

/* Carrito: hero exclusivo, limpio y pasos fuera de la imagen */
body[data-page="cart"] .page-hero.cart-hero-v37{
  min-height:430px !important;
  background-image:
    linear-gradient(90deg,rgba(2,18,28,.94) 0%,rgba(3,26,37,.78) 37%,rgba(2,22,31,.16) 68%,rgba(2,18,28,.06) 100%),
    url('../assets/pixel/cart-hero-v37.png') !important;
  background-size:cover !important;
  background-position:center center !important;
}
body[data-page="cart"] .cart-hero-layout-v37{grid-template-columns:minmax(0,1fr) !important}
body[data-page="cart"] .cart-hero-layout-v37>div{max-width:720px !important}
.cart-progress-strip-v37{
  background:#fff;
  border-bottom:1px solid var(--v6-line);
  box-shadow:0 12px 28px rgba(7,29,39,.035);
}
.cart-progress-v37{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:flex-start !important;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.cart-progress-v37::-webkit-scrollbar{display:none}
.cart-progress-v37>strong{
  flex:0 0 auto;
  margin-right:28px;
  color:#082c37;
  font:800 13px Manrope;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cart-progress-v37 span{color:#6a7c86 !important;white-space:nowrap}
.cart-progress-v37 span.active{color:#07877d !important;font-weight:800}
.cart-progress-v37 i{background:#edf4f5 !important;color:#62747e !important}
.cart-progress-v37 span.active i{background:#0bb7a8 !important;color:#fff !important}
.cart-progress-v37 em{background:#dce7e9 !important;min-width:42px}

/* Floating support trigger */
.floating-help{
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
  z-index:91 !important;
}
.floating-help:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(4,125,124,.38)}
.floating-help[aria-expanded="true"]{transform:scale(.94);box-shadow:0 10px 25px rgba(4,125,124,.28)}

/* Premium chat */
.servicam-chat-panel{
  position:fixed;
  right:22px;
  bottom:94px;
  width:min(410px,calc(100vw - 32px));
  max-height:min(700px,calc(100vh - 126px));
  display:flex;
  flex-direction:column;
  z-index:90;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(180deg,#062c39 0%,#071f2a 100%);
  border:1px solid rgba(64,228,213,.28);
  box-shadow:0 30px 70px rgba(0,21,29,.34),0 0 0 1px rgba(255,255,255,.04) inset;
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(18px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .2s ease,transform .24s ease,visibility .2s;
}
.servicam-chat-panel.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.chat-head{
  display:grid;
  grid-template-columns:54px 1fr 38px;
  gap:12px;
  align-items:center;
  padding:18px 18px 16px;
  background:
    radial-gradient(circle at 82% 10%,rgba(18,201,188,.20),transparent 34%),
    linear-gradient(135deg,#08465a,#073143);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-agent-avatar{
  width:52px;height:52px;border-radius:17px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#17d6c2,#087e88);
  color:#fff;font:900 20px Manrope;
  box-shadow:0 8px 22px rgba(6,184,170,.25);
  position:relative;
}
.chat-agent-avatar>i{
  position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;
  background:#37e879;border:2px solid #08384a;
}
.chat-agent-copy{display:grid;gap:2px;min-width:0}
.chat-agent-copy strong{font:800 17px Manrope}
.chat-agent-copy span{font-size:12px;color:#61eedc;font-weight:800}
.chat-agent-copy span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#39e87a;margin-right:4px}
.chat-agent-copy small{font-size:11px;color:#b9d0d6}
.chat-close{
  width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#fff;font-size:24px;line-height:1;cursor:pointer;
}
.chat-messages{
  flex:1 1 auto;
  min-height:210px;
  max-height:300px;
  overflow:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  scrollbar-width:thin;
  scrollbar-color:#1d6170 transparent;
}
.chat-row{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:end;max-width:92%}
.chat-row.user{align-self:flex-end;grid-template-columns:minmax(0,1fr) 30px}
.chat-row.user .chat-avatar-mini{grid-column:2;grid-row:1}
.chat-row.user>div:last-child{grid-column:1;grid-row:1;text-align:right}
.chat-avatar-mini{
  width:30px;height:30px;border-radius:10px;background:#0da999;color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:900;border:1px solid rgba(255,255,255,.15);
}
.chat-row.user .chat-avatar-mini{background:#14bbaa}
.chat-bubble{
  display:inline-block;
  padding:11px 13px;
  border-radius:16px 16px 16px 5px;
  background:#163747;
  border:1px solid rgba(255,255,255,.08);
  color:#f4fbfc;
  font-size:13px;
  line-height:1.52;
  text-align:left;
}
.chat-row.user .chat-bubble{
  border-radius:16px 16px 5px 16px;
  background:linear-gradient(135deg,#0fae9f,#087f8d);
  border-color:rgba(84,244,227,.30);
}
.chat-row small{display:block;margin-top:5px;color:#7998a3;font-size:9px;padding:0 4px}
.chat-quick{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 16px 14px;
}
.chat-quick button{
  min-height:48px;
  display:grid;
  grid-template-columns:26px 1fr auto;
  gap:8px;
  align-items:center;
  padding:8px 11px;
  border-radius:15px;
  border:1px solid rgba(38,222,207,.30);
  background:#0b3241;
  color:#effbfc;
  text-align:left;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
.chat-quick button:hover{background:#0d4050;border-color:rgba(57,239,222,.55);transform:translateY(-1px)}
.chat-quick .site-icon{font-size:20px;color:#39e5d4}
.chat-quick b{font-size:20px;font-weight:500;color:#cde8eb}
.chat-compose{
  margin:0 16px 8px;
  height:54px;
  display:grid;
  grid-template-columns:1fr 46px;
  align-items:center;
  border-radius:17px;
  overflow:hidden;
  background:#0d3040;
  border:1px solid rgba(117,180,190,.28);
}
.chat-compose input{
  width:100%;height:100%;border:0;outline:0;background:transparent;color:#fff;padding:0 15px;font-size:13px;
}
.chat-compose input::placeholder{color:#7898a3}
.chat-compose button{
  width:40px;height:40px;border:0;border-radius:13px;margin-right:6px;justify-self:end;
  background:linear-gradient(135deg,#19d7c4,#0a9c9a);color:#fff;font-size:18px;cursor:pointer;
  box-shadow:0 7px 18px rgba(7,173,162,.22);
}
.chat-support-link{
  display:block !important;
  margin:0 16px 14px !important;
  text-align:center;
  color:#91b9c0 !important;
  font-size:10px !important;
}

@media(max-width:820px){
  body[data-page="about"] .page-hero.about-hero-v37,
  body[data-page="contact"] .page-hero.contact-hero-v37,
  body[data-page="cart"] .page-hero.cart-hero-v37{
    min-height:430px !important;
    background-position:68% center !important;
  }
  .cart-progress-v37{min-height:68px}
  .cart-progress-v37>strong{display:none}
  .servicam-chat-panel{right:12px;bottom:86px;width:calc(100vw - 24px);max-height:calc(100vh - 108px);border-radius:22px}
  .chat-messages{max-height:270px}
}
@media(max-width:520px){
  body[data-page="about"] .page-hero.about-hero-v37,
  body[data-page="contact"] .page-hero.contact-hero-v37,
  body[data-page="cart"] .page-hero.cart-hero-v37{
    min-height:400px !important;
    background-position:72% center !important;
  }
  .cart-progress-v37 em{min-width:18px;width:18px;margin:0 5px}
  .cart-progress-v37 span{font-size:10px}
  .cart-progress-v37 i{width:22px;height:22px}
  .chat-head{grid-template-columns:48px 1fr 36px;padding:15px}
  .chat-agent-avatar{width:46px;height:46px;border-radius:15px}
  .chat-quick{grid-template-columns:1fr}
  .chat-messages{min-height:190px;max-height:240px;padding:14px}
}

/* =====================================================================
   SERVICAM V38 — FINAL HERO COMPOSITION + PREMIUM CHAT AVATAR
   ===================================================================== */
body[data-page="about"] .page-hero.about-hero-v37{
  min-height:530px !important;
  background-image:
    linear-gradient(90deg,rgba(2,18,28,.90) 0%,rgba(3,25,36,.72) 37%,rgba(2,22,31,.18) 66%,rgba(2,18,28,.05) 100%),
    url('../assets/pixel/about-hero-v38.png') !important;
  background-size:cover !important;
  background-position:center center !important;
}
body[data-page="about"] .about-hero-copy-v37{max-width:720px !important}
body[data-page="about"] .about-hero-copy-v37 h1{max-width:650px !important}
body[data-page="about"] .about-hero-copy-v37 p{max-width:680px !important}

body[data-page="contact"] .page-hero.contact-hero-v37{
  min-height:455px !important;
  background-image:
    linear-gradient(90deg,rgba(2,18,28,.92) 0%,rgba(3,27,39,.72) 36%,rgba(2,22,31,.15) 65%,rgba(2,18,28,.02) 100%),
    url('../assets/pixel/contact-hero-v38.png') !important;
  background-size:cover !important;
  background-position:center center !important;
}
body[data-page="contact"] .contact-hero-layout-v37>div{max-width:700px !important}

body[data-page="cart"] .page-hero.cart-hero-v37{
  min-height:420px !important;
  background-image:
    linear-gradient(90deg,rgba(2,18,28,.94) 0%,rgba(3,26,37,.73) 36%,rgba(2,22,31,.13) 65%,rgba(2,18,28,.02) 100%),
    url('../assets/pixel/cart-hero-v38.png') !important;
  background-size:cover !important;
  background-position:center center !important;
}
body[data-page="cart"] .cart-hero-layout-v37>div{max-width:680px !important}

.chat-agent-avatar,.chat-avatar-mini{
  overflow:hidden !important;
  background:#0a4250 !important;
}
.chat-agent-avatar img,.chat-avatar-mini img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.chat-agent-avatar{border:2px solid rgba(71,238,222,.72) !important}
.chat-avatar-mini{border:1px solid rgba(71,238,222,.58) !important}
.chat-agent-avatar>i{z-index:2}

@media(max-width:820px){
  body[data-page="about"] .page-hero.about-hero-v37{
    min-height:440px !important;
    background-position:74% center !important;
  }
  body[data-page="contact"] .page-hero.contact-hero-v37{
    min-height:420px !important;
    background-position:77% center !important;
  }
  body[data-page="cart"] .page-hero.cart-hero-v37{
    min-height:390px !important;
    background-position:76% center !important;
  }
}
@media(max-width:520px){
  body[data-page="about"] .page-hero.about-hero-v37,
  body[data-page="contact"] .page-hero.contact-hero-v37,
  body[data-page="cart"] .page-hero.cart-hero-v37{
    background-position:79% center !important;
  }
}

/* V40 cuenta funcional */
.account-runtime-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px}.account-runtime-card{display:flex;align-items:center;gap:14px;border:1px solid #dbe7ea;border-radius:16px;padding:14px;background:#fff}.account-runtime-card img{width:72px;height:58px;object-fit:contain}.account-runtime-card div{display:grid;gap:4px;min-width:0}.account-runtime-card small{color:#6d7d83}.rt-store-modal{position:fixed;inset:0;z-index:9999;background:rgba(1,23,32,.62);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}.rt-store-modal.open{display:flex}.rt-store-modal-card{width:min(720px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;padding:26px;box-shadow:0 32px 90px rgba(0,30,42,.28);position:relative}.rt-store-close{position:absolute;right:16px;top:12px;border:0;background:#eef5f6;width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer}.account-menu button.link-btn{width:100%;text-align:left;padding:12px 14px;color:#c43b4b}
@media(max-width:760px){.account-runtime-grid{grid-template-columns:1fr}.account-layout{grid-template-columns:1fr}.account-menu{position:static}}