:root{
    --purple:#5c35f4;
    --purple-dark:#3c22c9;
    --purple-soft:#f2efff;
    --ink:#11131a;
    --muted:#626875;
    --line:#e3e6ec;
    --soft:#f7f8fb;
    --black:#090b10;
    --green:#18bd4b;
    --radius:14px;
    --shadow:0 18px 45px rgba(15,23,42,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-width:0;
    overflow-x:hidden;
    background:#fff;
    color:var(--ink);
    font-family:"Montserrat",Arial,Helvetica,sans-serif;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.site-container{width:min(1600px,calc(100% - 48px));margin-inline:auto}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.icon{width:1em;height:1em;display:block;flex:0 0 auto}

/* Header */
.top-header{
    position:relative;
    z-index:40;
    min-height:76px;
    background:linear-gradient(100deg,#080a0f 0%,#0c0f15 62%,#0a0b11 100%);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.header-inner{min-height:76px;display:flex;align-items:center;gap:34px}
.logo-link{width:150px;flex:0 0 150px;text-decoration:none}
.logo-link img{width:145px;height:auto}
.search-form{position:relative;width:min(470px,38vw);height:44px}
.search-form input{
    width:100%;height:100%;padding:0 52px 0 18px;border:1px solid #d8dbe2;border-radius:10px;
    outline:none;background:#fff;color:#20232a;font-size:13px;
}
.search-form input::placeholder{color:#858a95}
.search-form input:focus{border-color:#8169f8;box-shadow:0 0 0 4px rgba(92,53,244,.16)}
.search-form button{
    position:absolute;inset:0 0 0 auto;width:48px;border:0;background:transparent;color:#707580;
    display:grid;place-items:center;border-radius:0 10px 10px 0;
}
.search-form button .icon{width:19px;height:19px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.header-store-link,.header-whatsapp{
    min-height:42px;padding:0 17px;border-radius:9px;color:#fff;text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:700;
    transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.header-store-link{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.header-store-link:hover{background:rgba(255,255,255,.1);border-color:#fff}
.header-whatsapp{background:linear-gradient(135deg,#4c2be9,#704eff);box-shadow:0 10px 24px rgba(80,47,226,.28)}
.header-whatsapp:hover{box-shadow:0 13px 28px rgba(80,47,226,.38)}
.header-store-link .icon,.header-whatsapp .icon{width:19px;height:19px}

/* Navigation */
.main-nav{
    position:relative;z-index:35;height:58px;background:#fff;border-bottom:1px solid #e8e9ee;
    box-shadow:0 3px 12px rgba(15,23,42,.025);
}
.nav-inner{height:100%;display:flex;align-items:center}
.nav-links.navbar-menu{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.nav-links.navbar-menu a{
    position:relative;height:100%;padding:0 8px;display:flex;align-items:center;color:#17191f;
    text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;white-space:nowrap;
    transition:color .18s ease;
}
.nav-links.navbar-menu a:hover,.nav-links.navbar-menu a.active{color:var(--purple)}
.nav-links.navbar-menu a.active::after{
    content:"";position:absolute;left:8px;right:8px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--purple);
}

/* Hero */
.hero{height:clamp(430px,31vw,540px);margin-top:18px}
.hero-slider{position:relative;height:100%;overflow:hidden;border:1px solid #20232a;border-radius:16px;background:#080b11;box-shadow:var(--shadow)}
.hero-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .55s ease;isolation:isolate}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-slide-dark::after{background:linear-gradient(90deg,rgba(3,7,15,.94) 0%,rgba(3,7,15,.77) 30%,rgba(3,7,15,.19) 60%,rgba(3,7,15,0) 100%)}
.hero-slide-light::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.78) 30%,rgba(255,255,255,.16) 60%,rgba(255,255,255,0) 100%)}
.hero-content{position:absolute;z-index:2;left:clamp(42px,5vw,84px);top:50%;width:clamp(330px,31vw,500px);transform:translateY(-50%);color:#fff}
.hero-slide-light .hero-content,.hero-slide-light h1,.hero-slide-light h2{color:#0d1627}
.hero-slide-light .hero-description{color:#354052}
.hero-slide-light .button-outline{border-color:#182235;color:#182235;background:rgba(255,255,255,.5)}
.eyebrow,.section-eyebrow{margin:0;color:#6543ff;font-size:13px;line-height:1.2;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.hero h1,.hero h2{margin:12px 0 18px;font-size:clamp(46px,4.2vw,68px);line-height:.98;letter-spacing:-2px;text-transform:uppercase;font-weight:900}
.hero h2{font-size:clamp(42px,3.8vw,62px)}
.hero-description{margin:0;max-width:480px;color:#f0f2f7;font-size:clamp(13px,1vw,16px);line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.button{
    min-height:46px;padding:0 20px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
    gap:9px;color:#fff;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap;
    transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.button .icon{width:19px;height:19px}
.button-primary{background:linear-gradient(135deg,#4c2be9,#704eff);border:1px solid transparent;box-shadow:0 10px 23px rgba(82,48,228,.22)}
.button-primary:hover{transform:translateY(-1px);box-shadow:0 13px 27px rgba(82,48,228,.32)}
.button-outline{background:rgba(11,14,19,.24);border:1px solid rgba(255,255,255,.92)}
.hero-dots{position:absolute;z-index:4;left:50%;bottom:18px;display:flex;gap:9px;transform:translateX(-50%)}
.hero-dot{width:10px;height:10px;padding:0;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.2)}
.hero-dot.is-active{border-color:#6847ff;background:#6847ff;box-shadow:0 0 0 4px rgba(104,71,255,.16)}

/* Benefits */
.benefits{
    min-height:96px;margin-top:20px;border:1px solid var(--line);border-radius:14px;background:#fff;
    display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 10px 30px rgba(15,23,42,.04);overflow:hidden;
}
.benefit{min-width:0;display:flex;align-items:center;gap:16px;padding:18px 24px;color:#111216;text-decoration:none}
.benefit:not(:last-child){border-right:1px solid var(--line)}
.benefit>.icon{width:35px;height:35px;stroke-width:1.7}
.benefit h3{margin:0 0 7px;font-size:11px;line-height:1.1;text-transform:uppercase;font-weight:800;white-space:nowrap}
.benefit p{margin:0;color:#626875;font-size:11px;line-height:1.5}
.benefit-link{transition:background-color .18s ease}
.benefit-link:hover{background:#faf9ff}

/* Shared home section rhythm */
.promotions,.featured-products,.brand-service-showcase{margin-top:64px}

/* Promotions */
.promotions{min-height:238px;display:grid;grid-template-columns:minmax(240px,.76fr) repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.promotion-intro{display:flex;flex-direction:column;justify-content:center;padding:10px 26px 10px 16px}
.promotion-intro h2{margin:8px 0 13px;font-size:clamp(28px,2.25vw,38px);line-height:1.02;letter-spacing:-1.1px}
.promotion-intro>p:not(.section-eyebrow){margin:0;color:#616773;font-size:12px;line-height:1.6}
.small-dark-button{
    width:max-content;min-height:40px;margin-top:20px;padding:0 17px;border-radius:8px;background:#101216;color:#fff;
    display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-size:10px;font-weight:700;
    transition:transform .18s ease,background-color .18s ease;
}
.small-dark-button:hover{transform:translateY(-1px);background:#252830}
.small-dark-button .icon{width:14px;height:14px}
.promotion-card{
    position:relative;overflow:hidden;min-height:238px;border-radius:14px;background-size:cover;background-position:center;
    color:#fff;text-decoration:none;box-shadow:0 14px 36px rgba(15,23,42,.1);transition:transform .22s ease,box-shadow .22s ease;
}
.promotion-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,10,21,.72),rgba(7,10,21,.12) 72%)}
.promotion-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(15,23,42,.15)}
.student-card{background-image:url("../images/promotions/student.webp")}
.gaming-card{background-image:url("../images/promotions/gaming.webp")}
.office-card{background-image:url("../images/promotions/office.webp")}
.promotion-copy{position:absolute;z-index:2;left:22px;top:24px;display:flex;flex-direction:column}
.promotion-copy strong{font-size:22px;line-height:1.02;text-transform:uppercase;letter-spacing:-.5px}
.promotion-copy small{margin-top:13px;font-size:11px;line-height:1.5}
.round-arrow{position:absolute;z-index:2;left:22px;bottom:20px;width:42px;height:42px;border-radius:50%;background:#fff;color:#111216;display:grid;place-items:center;transition:transform .18s ease}
.round-arrow .icon{width:17px;height:17px}
.promotion-card:hover .round-arrow{transform:translateX(4px)}

/* Featured products */
.featured-products{
    position:relative;
    margin-top:48px;
    padding:28px 30px 30px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(15,23,42,.035);
}
.section-heading-row,.mini-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}
.section-heading-row{min-height:34px;margin-bottom:16px}
.section-heading-row h2,.mini-heading h2{margin:0;color:#111216;font-weight:800}
.section-heading-row h2{font-size:20px;text-transform:none}
.section-heading-row a,.mini-heading a{display:flex;align-items:center;gap:7px;color:#4d31df;text-decoration:none;font-size:10px;font-weight:700}
.section-heading-row a .icon,.mini-heading a .icon{width:13px;height:13px}
.search-status{margin:-4px 0 16px;padding:10px 13px;border-radius:8px;background:#f3f0ff;color:#3d27be;font-size:11px;line-height:1.3}
.search-status a{float:right;font-weight:800}


.product-card{
    flex:0 0 calc((100% - 72px)/5);
    min-width:220px;
    height:420px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    display:flex;
    flex-direction:column;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.product-card:hover{transform:translateY(-4px);border-color:#cfc6ff;box-shadow:0 17px 35px rgba(39,31,91,.1)}
.product-main-link{min-height:0;color:inherit;text-decoration:none;display:flex;flex:1;flex-direction:column}
.product-image{
    position:relative;
    height:200px;
    flex:0 0 200px;
    margin-bottom:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:9px;
    background:linear-gradient(180deg,#fff,#fbfbfd);
}
.product-image img{
    width:auto;
    height:auto;
    max-width:88%;
    max-height:88%;
    object-fit:contain;
    transition:transform .25s ease;
}
.product-image--desktop img{max-width:76%;max-height:76%}
.product-card:hover .product-image img{transform:scale(1.035)}
.product-badge{
    position:absolute;
    z-index:2;
    top:8px;
    left:8px;
    min-height:24px;
    padding:0 9px;
    border-radius:999px;
    background:rgba(84,48,226,.94);
    color:#fff;
    display:inline-flex;
    align-items:center;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.035em;
    text-transform:uppercase;
    box-shadow:0 6px 15px rgba(74,44,190,.18);
}
.product-meta{margin:0 0 5px;color:#777d88;font-size:10px;line-height:1.2;font-weight:700}
.product-meta span{margin:0 3px;color:#aaaeb7}
.product-card h3{min-height:37px;margin:0 0 6px;color:#141519;font-size:13px;line-height:1.4;font-weight:700}
.product-spec{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6a6f79;font-size:10px;line-height:1.35}
.product-price{margin:10px 0 10px;color:#3d28bf;font-size:18px;line-height:1;font-weight:800}
.product-whatsapp{
    min-height:45px;
    height:45px;
    margin-top:0;
    border-radius:8px;
    background:linear-gradient(135deg,#4c2be9,#6746f6);
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:10px;
    font-weight:700;
    transition:filter .18s ease,transform .18s ease;
}
.product-whatsapp:hover{filter:brightness(1.08);transform:translateY(-1px)}
.product-whatsapp .icon{width:16px;height:16px}



.no-results{min-height:220px;display:grid;place-items:center;color:#5d6068;font-size:14px;text-align:center}
.no-results a{color:#4b31d9;font-weight:800}

/* Home categories */

.mini-heading{min-height:32px;margin-bottom:16px}
.mini-heading h2{font-size:15px}






/* Brand & service showcase with real HTML text */
.brand-service-showcase{
    margin-top:48px;
    padding-top:20px;
    border-top:1px solid #eceef2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.showcase-panel{min-width:0}
.showcase-panel>h2{margin:0 0 9px;color:#111216;font-size:17px;line-height:1.1;text-transform:none;font-weight:800}
.showcase-slider{position:relative;height:330px;min-height:330px;overflow:hidden;border-radius:16px;background:#0a0d13;box-shadow:0 16px 36px rgba(15,23,42,.11)}
.showcase-slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .42s ease;color:#fff;text-decoration:none;isolation:isolate}
.showcase-slide.is-active{opacity:1;pointer-events:auto}
.showcase-slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,7,13,.9) 0%,rgba(4,7,13,.68) 43%,rgba(4,7,13,.12) 78%,rgba(4,7,13,.02) 100%)}
[data-showcase-slider="brands"] .showcase-slide::after{background:linear-gradient(90deg,rgba(5,8,15,.76) 0%,rgba(5,8,15,.48) 44%,rgba(5,8,15,.08) 78%,rgba(5,8,15,0) 100%)}
[data-showcase-slider="brands"] .showcase-background{filter:brightness(1.16) saturate(1.04)}
.showcase-background{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.showcase-content{position:absolute;left:62px;top:50%;width:min(330px,58%);transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start}
.showcase-brand-logo{display:block;width:auto;height:auto;max-width:150px;max-height:58px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.showcase-brand-logo--acer{max-width:185px;max-height:70px}
.showcase-brand-content>span{margin-top:13px;color:#f3f4f8;font-size:12px;line-height:1.55}
.showcase-brand-content>strong{margin-top:16px;display:flex;align-items:center;gap:8px;color:#fff;font-size:10px;text-transform:none;letter-spacing:0}
.showcase-brand-content>strong .icon{width:14px;height:14px}
.showcase-service-icon{width:49px;height:49px;margin-bottom:9px;border-radius:12px;background:rgba(255,255,255,.95);color:#151922;display:grid;place-items:center}
.showcase-service-icon .icon{width:28px;height:28px}
.showcase-service-content>strong{font-size:22px;line-height:1.15;text-transform:none}
.showcase-service-content>span:not(.showcase-service-icon){margin-top:8px;color:#eef0f5;font-size:12px;line-height:1.55}
.showcase-service-content>em{margin-top:14px;display:flex;align-items:center;gap:8px;color:#fff;font-size:10px;font-style:normal;font-weight:700;text-transform:none}
.showcase-service-content>em .icon{width:14px;height:14px}
.showcase-arrow{position:absolute;z-index:12;top:50%;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#fff;color:#111216;display:grid;place-items:center;transform:translateY(-50%);box-shadow:0 6px 17px rgba(0,0,0,.2);transition:transform .18s ease}
.showcase-arrow .icon{width:15px;height:15px}
.showcase-prev{left:9px}
.showcase-next{right:9px}
.showcase-arrow:hover{transform:translateY(-50%) scale(1.06)}
.showcase-dots{height:25px;margin-top:4px;display:flex;align-items:flex-start;justify-content:center;gap:9px}
.showcase-dots button{width:8px;height:8px;padding:0;border:1px solid #9da1aa;border-radius:50%;background:#fff}
.showcase-dots button.is-active{border-color:#252525;background:#252525}

/* Visit store */








.store-info-item{display:flex;gap:11px;color:#17181c}
.store-info-item>.icon{width:19px;height:19px;margin-top:1px}
.store-info-item p{margin:0;font-size:10px;line-height:1.55}
.store-info-item strong{font-weight:800}




/* Footer */
.footer{margin-top:0;background:linear-gradient(100deg,#080a0f,#0d1118);color:#fff}
.footer-inner{position:relative;min-height:270px;padding:42px 18px 56px;display:grid;grid-template-columns:1.25fr .8fr 1fr 1fr 1.05fr;gap:46px}
.footer-brand img{width:145px;height:auto}
.footer-brand p{margin:12px 0 16px;color:#dfe2e9;font-size:12px;line-height:1.6}
.social-links{display:flex;gap:9px}
.social-links a{width:36px;height:36px;border:1px solid rgba(255,255,255,.58);border-radius:7px;color:#fff;text-decoration:none;display:grid;place-items:center;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.social-links a:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:#fff}
.social-links .icon{width:18px;height:18px}
.tiktok-letter{font-size:18px;font-weight:800}
.footer-column h3,.footer-help h3{margin:2px 0 16px;color:#fff;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.footer-column a{display:block;margin-bottom:10px;color:#dfe2e9;text-decoration:none;font-size:11px;line-height:1.2;transition:color .18s ease}
.footer-column a:hover{color:#a996ff}
.footer-help p{margin:0 0 17px;color:#dfe2e9;font-size:11px;line-height:1.55}
.footer-help>a{width:max-content;min-height:42px;padding:0 17px;border:1px solid rgba(255,255,255,.82);border-radius:8px;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:700;transition:background-color .18s ease,transform .18s ease}
.footer-help>a:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.footer-help>a .icon{width:17px;height:17px}
.copyright{position:absolute;left:50%;bottom:20px;margin:0;transform:translateX(-50%);color:#cfd3dc;font-size:10px;white-space:nowrap}

/* Focus */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(91,53,244,.42);outline-offset:3px}

@media (max-width:1280px){
    .site-container{width:min(1120px,calc(100% - 36px))}
    .header-inner{gap:24px}
    .logo-link{width:132px;flex-basis:132px}.logo-link img{width:128px}
    .search-form{width:390px}
    .hero{height:430px}
    .promotions{grid-template-columns:230px repeat(3,minmax(0,1fr));gap:14px}
    .promotion-card{min-height:220px}
    .product-card{flex-basis:calc((100% - 54px)/4);min-width:210px}
    .benefit{padding:16px}.benefit h3{font-size:10px}.benefit p{font-size:10px}
    .showcase-slider{height:330px;min-height:330px}
    .showcase-content{left:48px}
    .footer-inner{gap:28px}
}

@media (max-width:980px){
    .site-container{width:calc(100% - 28px)}
    .top-header{padding:12px 0}
    .header-inner{min-height:0;flex-wrap:wrap;gap:12px 18px}
    .logo-link{width:128px;flex-basis:128px}.logo-link img{width:125px}
    .header-actions{margin-left:auto}
    .search-form{order:3;width:100%;height:42px}
    .main-nav{height:auto;min-height:54px;overflow-x:auto}
    .nav-inner{overflow-x:auto}
    .nav-links.navbar-menu{min-width:720px;justify-content:flex-start;gap:34px}
    .hero{height:470px}
    .benefits{grid-template-columns:repeat(2,1fr)}
    .benefit:nth-child(2n){border-right:0}.benefit{border-bottom:1px solid var(--line)}.benefit:last-child{border-bottom:0}
    .promotions{grid-template-columns:1fr 1fr}
    .promotion-intro{min-height:210px;padding-left:12px}
    .product-card{flex-basis:calc((100% - 36px)/3)}
    
    .brand-service-showcase{grid-template-columns:1fr}
    .showcase-slider{height:330px;min-height:330px}
    
    
    
    .footer-inner{grid-template-columns:repeat(3,1fr)}
    .footer-help{grid-column:auto}
}

@media (max-width:680px){
    body{font-size:14px}
    .site-container{width:calc(100% - 22px)}
    .header-store-link{display:none}
    .header-whatsapp{width:44px;padding:0}.header-whatsapp span{display:none}
    .hero{height:520px;margin-top:12px}
    .hero-content{left:24px;right:24px;top:50%;width:auto}
    .hero h1,.hero h2{font-size:42px;letter-spacing:-1.4px}
    .hero-description{font-size:12px;max-width:330px}
    .hero-slide-light::after{background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.87) 58%,rgba(255,255,255,.28) 100%)}
    .hero-slide-dark::after{background:linear-gradient(90deg,rgba(3,7,15,.96) 0%,rgba(3,7,15,.87) 58%,rgba(3,7,15,.35) 100%)}
    .benefits{grid-template-columns:1fr}
    .benefit{border-right:0!important}
    .promotions,.featured-products,.brand-service-showcase{margin-top:44px}
    .promotions{grid-template-columns:1fr}
    .promotion-intro{min-height:auto;padding:0 4px 8px}
    .promotion-card{min-height:230px}
    .featured-products{padding:24px 16px 24px}
    .section-heading-row h2{font-size:17px}
    
    .product-card{flex-basis:82%;min-width:82%;height:410px}
    
    
    
    .showcase-slider{height:300px;min-height:300px}
    .showcase-content{left:48px;width:68%}
    .showcase-brand-name{font-size:38px}
    
    
    
    
    
    
    .footer-inner{grid-template-columns:1fr 1fr;gap:34px 24px;padding-inline:8px}
    .footer-brand{grid-column:1/-1}.footer-help{grid-column:1/-1}
    .copyright{width:100%;padding:0 12px;text-align:center;white-space:normal}
}


/* Navbar refinement: compact sticky two-level header */
:root{
    --desktop-header-height:84px;
    --desktop-nav-height:60px;
    --mobile-header-height:68px;
}
.top-header{
    position:sticky;
    top:0;
    z-index:100;
    min-height:var(--desktop-header-height);
}
.header-inner{
    min-height:var(--desktop-header-height);
    gap:28px;
}
.logo-link{
    width:172px;
    flex:0 0 172px;
}
.logo-link img{
    width:166px;
    height:auto;
}
.search-form{
    width:min(405px,31vw);
    height:42px;
}
.main-nav{
    position:sticky;
    top:var(--desktop-header-height);
    z-index:95;
    height:var(--desktop-nav-height);
    transition:box-shadow .22s ease,border-color .22s ease;
}
body.has-scrolled .main-nav{
    border-bottom-color:#dfe2e9;
    box-shadow:0 9px 24px rgba(15,23,42,.09);
}
.nav-links.navbar-menu{
    justify-content:center;
    gap:clamp(26px,3.1vw,58px);
}
.nav-links.navbar-menu a{
    padding-inline:5px;
}
.nav-links.navbar-menu a.active::after{
    left:50%;
    right:auto;
    bottom:0;
    width:calc(100% - 10px);
    height:2px;
    transform:translateX(-50%);
    border-radius:2px 2px 0 0;
}
.mobile-search-toggle,.mobile-menu-toggle{
    display:none;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.28);
    border-radius:9px;
    background:rgba(255,255,255,.05);
    color:#fff;
    align-items:center;
    justify-content:center;
}
.mobile-search-toggle .icon,.mobile-menu-toggle .icon{
    width:20px;
    height:20px;
}

@media (max-width:1280px){
    .header-inner{gap:22px}
    .logo-link{width:154px;flex-basis:154px}
    .logo-link img{width:150px}
    .search-form{width:min(345px,30vw)}
    .nav-links.navbar-menu{gap:clamp(21px,2.4vw,38px)}
}

@media (max-width:980px){
    .top-header{
        min-height:var(--mobile-header-height);
        padding:0;
    }
    .header-inner{
        min-height:var(--mobile-header-height);
        flex-wrap:nowrap;
        gap:10px;
    }
    .logo-link{
        width:142px;
        flex:0 0 142px;
    }
    .logo-link img{width:138px}
    .header-actions{
        gap:8px;
        margin-left:auto;
    }
    .mobile-search-toggle,.mobile-menu-toggle{display:inline-flex}
    .header-store-link{display:none}
    .header-whatsapp{
        width:42px;
        min-height:42px;
        padding:0;
    }
    .header-whatsapp span{display:none}
    .search-form{
        display:none;
        position:fixed;
        z-index:120;
        top:calc(var(--mobile-header-height) + 10px);
        left:14px;
        right:14px;
        width:auto;
        height:46px;
        order:initial;
        filter:drop-shadow(0 12px 26px rgba(15,23,42,.18));
    }
    body.mobile-search-open .search-form{display:block}
    .main-nav{
        position:fixed;
        top:var(--mobile-header-height);
        left:0;
        right:0;
        z-index:110;
        height:auto;
        min-height:0;
        max-height:calc(100vh - var(--mobile-header-height));
        overflow:auto;
        border-bottom:1px solid #e4e6ec;
        background:#fff;
        box-shadow:0 16px 34px rgba(15,23,42,.15);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        pointer-events:none;
        transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    }
    body.mobile-menu-open .main-nav{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }
    .nav-inner{
        width:100%;
        overflow:visible;
        padding:10px 14px 16px;
    }
    .nav-links.navbar-menu{
        min-width:0;
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
    }
    .nav-links.navbar-menu a{
        width:100%;
        min-height:48px;
        height:auto;
        padding:0 12px;
        border-bottom:1px solid #eff0f4;
        font-size:12px;
    }
    .nav-links.navbar-menu a:last-child{border-bottom:0}
    .nav-links.navbar-menu a.active::after{
        left:12px;
        bottom:7px;
        width:34px;
        transform:none;
    }
    body.mobile-menu-open,
    body.mobile-search-open{overflow:hidden}
}

@media (max-width:480px){
    .site-container{width:calc(100% - 20px)}
    .logo-link{width:124px;flex-basis:124px}
    .logo-link img{width:121px}
    .mobile-search-toggle,.mobile-menu-toggle,.header-whatsapp{
        width:40px;
        height:40px;
        min-height:40px;
    }
    .header-actions{gap:6px}
}

@media (max-width:680px){
    .product-image{height:190px;flex-basis:190px}
    .product-card h3{min-height:auto}
    .showcase-content{left:54px;width:72%}
    .showcase-brand-logo{max-width:138px;max-height:52px}
    .showcase-brand-logo--acer{max-width:165px;max-height:62px}
}

/* Homepage first-screen refinement — 15 Jul 2026 */
:root{
    --desktop-header-height:82px;
    --desktop-nav-height:60px;
}

/* One controlled alignment line for header, navigation and homepage sections. */
.site-container{
    width:min(94%,1500px);
    margin-inline:auto;
}

.top-header,
.header-inner{
    min-height:var(--desktop-header-height);
}
.header-inner{
    gap:24px;
}
.logo-link{
    width:158px;
    flex-basis:158px;
}
.logo-link img{
    width:152px;
}
.search-form{
    width:min(400px,30vw);
    height:40px;
}
.header-actions{
    gap:10px;
}
.header-store-link,
.header-whatsapp{
    min-height:38px;
    padding-inline:14px;
    border-radius:8px;
    gap:7px;
    font-size:11px;
}
.header-store-link .icon,
.header-whatsapp .icon{
    width:17px;
    height:17px;
}

.main-nav{
    top:var(--desktop-header-height);
    height:var(--desktop-nav-height);
}
.nav-links.navbar-menu{
    gap:clamp(24px,2.8vw,52px);
}

/* 82 + 60 + 20 + 490 + 20 + 90 = 762px first-screen composition. */
.hero{
    width:min(94%,1500px);
    height:490px;
    min-height:480px;
    max-height:510px;
    margin:20px auto 0;
}
.hero-slider{
    border-radius:18px;
}
.hero-slide{
    background:#0a0d14;
}
.hero-slide-light{
    background:linear-gradient(100deg,#f8fbff 0%,#e9f1ff 58%,#b6cbea 100%);
}
.hero-slide-dark{
    background:linear-gradient(100deg,#050817 0%,#090d24 58%,#180b34 100%);
}
.hero-art{
    top:0;
    bottom:0;
    left:3%;
    right:auto;
    width:94%;
    height:100%;
    object-fit:cover;
    object-position:center 62%;
}
.hero-content{
    left:clamp(70px,5.25vw,86px);
    width:39%;
    min-width:360px;
    max-width:520px;
}
.hero h1,
.hero h2{
    margin:10px 0 16px;
    font-size:clamp(42px,3.7vw,60px);
    line-height:1;
    letter-spacing:-1.7px;
}
.hero h2{
    font-size:clamp(39px,3.4vw,55px);
}
.hero-description{
    max-width:455px;
    font-size:clamp(12px,.9vw,15px);
    line-height:1.55;
}
.hero-actions{
    margin-top:20px;
}
.hero .button{
    min-height:44px;
    padding-inline:18px;
}
.hero-dots{
    bottom:15px;
}

.benefits{
    min-height:90px;
    margin-top:20px;
}
.benefit{
    gap:13px;
    padding:14px 18px;
}
.benefit>.icon{
    width:31px;
    height:31px;
}
.benefit h3{
    margin-bottom:5px;
    font-size:10.5px;
}
.benefit p{
    font-size:10.5px;
    line-height:1.4;
}

@media (max-width:1400px) and (min-width:981px){
    .site-container,
    .hero{
        width:calc(100% - 56px);
    }
    .hero{
        height:470px;
        min-height:470px;
    }
    .hero-content{
        left:clamp(58px,5vw,72px);
        min-width:340px;
    }
    .hero h1,
    .hero h2{
        font-size:clamp(40px,4vw,54px);
    }
    .hero h2{
        font-size:clamp(38px,3.7vw,50px);
    }
    .benefit{
        padding-inline:14px;
    }
}

@media (max-width:1100px) and (min-width:981px){
    .header-store-link{
        display:none;
    }
    .search-form{
        width:min(350px,34vw);
    }
    .hero-art{
        left:2%;
        width:96%;
    }
}

@media (max-width:980px){
    .site-container{
        width:calc(100% - 28px);
    }
    .hero{
        width:calc(100% - 28px);
        height:470px;
        min-height:470px;
        max-height:none;
        margin-top:16px;
    }
    .hero-slider{
        border-radius:16px;
    }
    .hero-art{
        left:0;
        width:100%;
        object-position:center 60%;
    }
    .benefits{
        margin-top:18px;
    }
}

@media (max-width:680px){
    .hero{
        width:calc(100% - 22px);
        height:500px;
        min-height:500px;
        margin-top:12px;
    }
    .hero-content{
        left:24px;
        right:24px;
        width:auto;
        min-width:0;
        max-width:none;
    }
    .hero h1,
    .hero h2{
        font-size:40px;
        letter-spacing:-1.25px;
    }
    .hero-art{
        object-position:58% 58%;
    }
    .benefits{
        min-height:0;
    }
}

@media (max-width:480px){
    .site-container,
    .hero{
        width:calc(100% - 20px);
    }
}

/* Keep the reduced hero artwork above the slide edge-fill and below overlays. */
.hero-art{z-index:0}
.hero-slide::after{z-index:1}
.hero-content{z-index:2}


/* =========================================================
   LASTO consistency pass — compact spacing and shared sizing
   ========================================================= */
:root{
    --radius:16px;
    --section-space:76px;
    --content-max:1500px;
}
.site-container{width:min(var(--content-max),94%);margin-inline:auto}
.top-header,.header-inner{min-height:82px}
.main-nav{height:60px}
.header-store-link,.header-whatsapp{min-height:39px;padding-inline:14px;font-size:10.5px}
.header-store-link .icon,.header-whatsapp .icon{width:17px;height:17px}
.promotions,.featured-products,.brand-service-showcase{margin-top:var(--section-space)}

/* Homepage category cards */








/* Shorter trusted brand / service banners */
.brand-service-showcase{margin-top:46px;padding-top:18px;gap:22px}
.showcase-slider{height:278px;min-height:278px;border-radius:16px}
.showcase-content{left:58px;top:47%;width:min(330px,58%)}
.showcase-brand-wordmark{
    display:block;
    max-width:200px;
    color:#fff;
    font-size:36px;
    line-height:1;
    font-weight:900;
    letter-spacing:-1.7px;
    text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.showcase-brand-wordmark--asus{letter-spacing:2px;font-size:31px}
.showcase-brand-wordmark--dell{text-transform:uppercase}
.showcase-brand-wordmark--lenovo{text-transform:uppercase;font-size:31px;letter-spacing:-1px}
.showcase-service-content{top:46%}
.showcase-prev{left:16px}.showcase-next{right:16px}
.showcase-arrow{width:36px;height:36px}
.showcase-dots{height:20px}

/* More balanced store panel */








/* Keep footer content from spreading too far on large monitors */
.footer-inner{grid-template-columns:1.25fr .8fr .95fr .95fr 1.05fr;gap:32px;padding-inline:0}

@media (max-width:1440px){
    
}
@media (max-width:1280px){
    .site-container{width:min(1120px,calc(100% - 56px))}
    
    .brand-service-showcase{gap:18px}
    .showcase-slider{height:260px;min-height:260px}
    .showcase-content{left:50px}
}
@media (max-width:980px){
    .site-container{width:calc(100% - 32px)}
    .top-header,.header-inner{min-height:0}
    .main-nav{height:auto}
    .promotions,.featured-products,.brand-service-showcase{margin-top:56px}
    .brand-service-showcase{grid-template-columns:1fr}
    .showcase-slider{height:285px;min-height:285px}
    
    
    
    
}
@media (max-width:680px){
    .site-container{width:calc(100% - 28px)}
    
    
    .showcase-content{left:46px;width:66%}
    .showcase-brand-wordmark{font-size:30px}
    
    
    
    
    
    
}

/* Final visual corrections after desktop preview */
.showcase-brand-content>.showcase-brand-wordmark{
    margin-top:0;
    color:#fff;
    font-size:36px;
    line-height:1;
    font-weight:900;
    letter-spacing:-1.7px;
}
.showcase-brand-content>.showcase-brand-wordmark--asus{font-size:31px;letter-spacing:2px}
.showcase-brand-content>.showcase-brand-wordmark--lenovo{font-size:31px;letter-spacing:-1px}
@media (max-width:680px){
    .showcase-brand-content>.showcase-brand-wordmark{font-size:30px}
}


/* Compact Trusted Brands + Our Services carousel banners */
.brand-service-showcase{
    margin-top:72px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    align-items:stretch;
}
.showcase-panel{
    min-width:0;
    height:100%;
}
.showcase-panel>h2{display:none}
.showcase-slider{
    position:relative;
    width:100%;
    height:250px;
    min-height:250px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:24px;
    background:#11131a;
    box-shadow:0 9px 26px rgba(20,18,38,.1);
}
.showcase-slide{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    color:#fff;
    text-decoration:none;
    isolation:isolate;
    transition:opacity .38s ease;
}
.showcase-slide.is-active{opacity:1;pointer-events:auto}
.showcase-background{
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1.01);
}
.showcase-slide::after,
[data-showcase-slider="brands"] .showcase-slide::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgba(8,10,18,.86),rgba(8,10,18,.62) 50%,rgba(8,10,18,.44));
}
.showcase-content{
    position:absolute;
    inset:0;
    width:auto;
    padding:28px 72px 36px;
    transform:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.showcase-kicker{
    margin-bottom:10px;
    color:#d9d0ff;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.showcase-brand-logo-frame{
    width:172px;
    height:66px;
    padding:10px 16px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:16px;
    background:rgba(255,255,255,.93);
    box-shadow:0 8px 22px rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
}
.showcase-brand-logo,
.showcase-brand-logo--acer{
    display:block;
    width:auto;
    height:auto;
    max-width:138px;
    max-height:44px;
    object-fit:contain;
    object-position:center;
    filter:none;
}
.showcase-brand-content>span:not(.showcase-kicker):not(.showcase-brand-logo-frame){
    max-width:380px;
    margin-top:12px;
    color:#f4f4f8;
    font-size:11px;
    line-height:1.5;
}
.showcase-brand-content>strong{
    margin-top:11px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:10px;
    line-height:1;
    font-weight:700;
}
.showcase-service-content{top:0}
.showcase-service-icon{
    width:48px;
    height:48px;
    margin:0 0 8px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:15px;
    background:rgba(255,255,255,.94);
    color:#5d36e5;
    display:grid;
    place-items:center;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.showcase-service-icon .icon{width:26px;height:26px}
.showcase-service-content>strong{
    font-size:19px;
    line-height:1.15;
    text-transform:none;
}
.showcase-service-content>span:not(.showcase-service-icon):not(.showcase-kicker){
    max-width:390px;
    margin-top:7px;
    color:#f1f2f6;
    font-size:10.5px;
    line-height:1.48;
}
.showcase-service-content>em{
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:10px;
    line-height:1;
    font-style:normal;
    font-weight:700;
}
.showcase-brand-content>strong .icon,
.showcase-service-content>em .icon{width:13px;height:13px}
.showcase-arrow{
    position:absolute;
    z-index:12;
    top:50%;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid rgba(255,255,255,.68);
    border-radius:50%;
    background:rgba(255,255,255,.95);
    color:#171921;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    box-shadow:0 6px 16px rgba(0,0,0,.16);
    transition:transform .18s ease,background-color .18s ease;
}
.showcase-arrow:hover{transform:translateY(-50%) scale(1.05);background:#fff}
.showcase-arrow .icon{width:14px;height:14px}
.showcase-prev{left:14px}
.showcase-next{right:14px}
.showcase-dots{
    position:absolute;
    z-index:13;
    left:50%;
    bottom:14px;
    width:auto;
    height:auto;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    transform:translateX(-50%);
}
.showcase-dots button{
    width:7px;
    height:7px;
    padding:0;
    border:1px solid rgba(255,255,255,.75);
    border-radius:50%;
    background:rgba(255,255,255,.25);
}
.showcase-dots button.is-active{
    width:19px;
    border-radius:99px;
    border-color:#fff;
    background:#fff;
}

@media (max-width:980px){
    .brand-service-showcase{grid-template-columns:1fr;gap:18px;margin-top:58px}
    .showcase-slider{height:250px;min-height:250px}
}
@media (max-width:560px){
    .showcase-slider{height:236px;min-height:236px;border-radius:20px}
    .showcase-content{padding:24px 52px 34px}
    .showcase-prev{left:10px}.showcase-next{right:10px}
    .showcase-arrow{width:33px;height:33px}
    .showcase-brand-logo-frame{width:150px;height:58px}
    .showcase-brand-logo,.showcase-brand-logo--acer{max-width:120px;max-height:38px}
    .showcase-service-content>strong{font-size:18px}
}

/* =========================================================
   LASTO TYPOGRAPHY SYSTEM — authoritative final rules
   Typography only; layout functionality remains unchanged.
   ========================================================= */
:root{
    --font-caption:10.5px;
    --font-small:11.5px;
    --font-body:13px;
    --font-body-large:14px;
    --font-card-title:15px;
    --font-subheading:20px;
    --font-section-title:clamp(25px,2vw,32px);
    --font-page-title:clamp(38px,3.2vw,54px);
}
html,body,input,select,textarea,button{font-family:"Montserrat",Arial,Helvetica,sans-serif}
body{font-size:var(--font-body);line-height:1.6}
p{font-size:var(--font-body);line-height:1.6}
small{font-size:var(--font-small);line-height:1.5}
button,.button,.btn,a[class*="button"]{font-size:11.5px;font-weight:700}
.navbar-menu a,.nav-links a,.nav-links.navbar-menu a{font-size:12px;font-weight:700}
.section-title,.mini-heading h2,.section-heading-row h2{font-size:var(--font-section-title);font-weight:800;line-height:1.2}
.page-title{font-size:var(--font-page-title);font-weight:800;line-height:1.1}

/* Homepage hero, benefits and category directory */
.hero-description{font-size:14px;line-height:1.65}
.hero-button,.hero a[class*="button"],.hero .button{font-size:12px;font-weight:700}
.benefit h3{font-size:12px;font-weight:700;line-height:1.25}
.benefit p{font-size:11.5px;line-height:1.45}


.mini-heading h2,.section-heading-row h2{font-size:clamp(24px,1.9vw,28px)}
.section-eyebrow,.eyebrow,.product-meta{font-size:10.5px;font-weight:600}

/* Homepage product cards */
.product-card h2,.product-card h3{font-size:15px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.product-card .product-spec,.product-spec{font-size:11.5px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.product-card .product-price,.product-price{font-size:20px;font-weight:800}
.product-whatsapp{font-size:11.5px;font-weight:700}

/* Trusted Brands and Our Services — final active carousel block */
.showcase-kicker{font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.04em}
.showcase-brand-content>span:not(.showcase-kicker):not(.showcase-brand-logo-frame){font-size:12px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.showcase-brand-content>strong,.showcase-service-content>em{font-size:11.5px;font-weight:700;line-height:1.25}
.showcase-service-content>strong{font-size:22px;font-weight:800;line-height:1.2}
.showcase-service-content>span:not(.showcase-service-icon):not(.showcase-kicker){font-size:12px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* Shared footer */
.footer-column h3,.footer-column h4,.footer-help h3,.footer-help h4{font-size:12px;font-weight:800;line-height:1.3}
.footer-column p,.footer-column a,.footer-help p,.footer-help a{font-size:12px;line-height:1.65}
.footer-brand p,.footer-brand-description{font-size:12.5px;line-height:1.65}
.copyright,.footer-copyright{font-size:11px;line-height:1.5}
.footer-whatsapp-button,.footer-help>a{font-size:11.5px;font-weight:700}

@media (max-width:768px){
    body,p{font-size:12px}
    .hero h1,.hero h2{font-size:clamp(34px,9vw,42px);line-height:1.05}
    .page-title{font-size:clamp(30px,8vw,38px)}
    .section-title,.mini-heading h2,.section-heading-row h2{font-size:clamp(22px,6vw,26px)}
    .product-card h2,.product-card h3{font-size:14px}
    button,.button,.btn,a[class*="button"]{font-size:11px}
    .benefit p{font-size:11.5px}
}



/* =========================================================
   LASTO requested routing/layout update — authoritative rules
   ========================================================= */
:root{
    --site-max-width:1500px;
    --site-side-space:clamp(20px,4vw,72px);
}
.site-container,
.header-inner,
.nav-inner,
.page-container,
.page-shell,
.section-inner,
.footer-inner{
    width:min(var(--site-max-width),calc(100% - (var(--site-side-space) * 2)));
    margin-left:auto;
    margin-right:auto;
}

/* Homepage hero is contained and remains the largest banner. */
.home-hero,.hero-carousel,.hero{
    width:min(var(--site-max-width),calc(100% - (var(--site-side-space) * 2)));
    height:clamp(420px,28vw,500px);
    min-height:0;
    max-height:none;
    margin:20px auto 0;
}
.hero-slider,.hero-slide{height:100%}
.hero-slider{border-radius:20px}
.hero-content{left:clamp(55px,4.2vw,75px);width:40%;min-width:340px;max-width:530px}
.hero-art{left:2.5%;width:95%;object-position:center 60%}

/* Supporting homepage banners. */
.promotions{min-height:0;align-items:stretch}
.promotion-intro,.promotion-card{height:clamp(250px,19vw,320px);min-height:250px}
.promotion-card{border-radius:20px}
.brand-service-showcase{margin-top:72px}
.showcase-slider{
    height:clamp(200px,14vw,240px);
    min-height:200px;
    border-radius:18px;
}

/* Featured products is a five-item grid, not a carousel. */
.featured-products{margin-top:72px;overflow:visible}
.featured-products-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.featured-products-grid .product-card{min-width:0;width:100%;height:420px;flex:none}

/* Removed homepage sections no longer contribute spacing. */
.brand-service-showcase + .footer{margin-top:72px}

/* Anchored headings remain visible below the desktop header/navigation. */
#our-store-location,#business-office-it-solutions{scroll-margin-top:155px}

@media (max-width:1400px){
    .featured-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
    :root{--site-side-space:clamp(30px,3.6vw,40px)}
    .hero{height:clamp(380px,42vw,430px)}
    .featured-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
    :root{--site-side-space:clamp(24px,3.6vw,30px)}
    .hero{height:auto;min-height:500px;margin-top:16px}
    .hero-content{left:28px;right:28px;width:auto;min-width:0}
    .brand-service-showcase{grid-template-columns:1fr}
    .showcase-slider{height:auto;min-height:240px}
    .promotion-intro,.promotion-card{height:auto;min-height:250px}
    #our-store-location,#business-office-it-solutions{scroll-margin-top:92px}
}
@media (max-width:560px){
    :root{--site-side-space:20px}
    .featured-products-grid{grid-template-columns:1fr}
    .featured-products{padding-inline:16px}
    .featured-products-grid .product-card{height:auto;min-height:420px}
}

/* Final mobile hero height fix: percentage-height slides need a definite parent height. */
@media (max-width:768px){
    .home-hero,.hero-carousel,.hero{height:500px;min-height:500px}
    .hero-slider,.hero-slide{height:100%}
}

/* =========================================================
   HOMEPAGE SPECIAL DEALS — authoritative final rules
   Layout and presentation only. Links, routing, images and
   WhatsApp behaviour remain controlled by the existing HTML.
   ========================================================= */
.promotions.site-container{
    width:min(1820px,calc(100% - 96px));
    max-width:1820px;
    min-height:0;
    margin-left:auto;
    margin-right:auto;
    display:grid;
    grid-template-columns:clamp(280px,17.7vw,340px) repeat(3,minmax(0,1fr));
    gap:22px;
    align-items:stretch;
    overflow:visible;
}

.promotions .promotion-intro{
    height:298px;
    min-height:298px;
    padding:12px 24px 12px 0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}

.promotions .promotion-intro .section-eyebrow{
    margin:0;
    color:#6b3df2;
    font-size:16px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.promotions .promotion-intro h2{
    margin:10px 0 16px;
    color:#111216;
    font-size:clamp(42px,2.3vw,44px);
    line-height:1.02;
    font-weight:800;
    letter-spacing:-1.7px;
    white-space:nowrap;
}

.promotions .promotion-intro>p:not(.section-eyebrow){
    margin:0;
    color:#626875;
    font-size:15px;
    line-height:1.65;
}

.promotions .promotion-card{
    width:100%;
    height:298px;
    min-height:298px;
    border-radius:18px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center right;
    box-shadow:0 14px 34px rgba(15,23,42,.11);
    transform:translateZ(0);
    transition:transform .22s ease,box-shadow .22s ease;
}

.promotions .promotion-card::before{
    background:linear-gradient(90deg,rgba(7,10,21,.82) 0%,rgba(7,10,21,.58) 36%,rgba(7,10,21,.16) 72%,rgba(7,10,21,.04) 100%);
}

.promotions .promotion-copy{
    left:28px;
    top:30px;
}

.promotions .promotion-copy strong{
    font-size:clamp(28px,1.55vw,30px);
    line-height:1.02;
    font-weight:800;
    letter-spacing:-.8px;
    white-space:nowrap;
}

.promotions .promotion-copy small{
    margin-top:14px;
    font-size:15px;
    line-height:1.45;
    font-weight:500;
    white-space:nowrap;
}

.promotions .round-arrow{
    left:28px;
    bottom:24px;
    width:52px;
    height:52px;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.promotions .round-arrow .icon{
    width:19px;
    height:19px;
}

.promotions .promotion-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(15,23,42,.15);
}

.promotions .promotion-card:hover .round-arrow{
    transform:translateX(3px);
}

/* Standard laptop screens: keep four columns, with proportionate sizing. */
@media (max-width:1500px){
    .promotions.site-container{
        width:calc(100% - 64px);
        grid-template-columns:clamp(230px,18vw,270px) repeat(3,minmax(0,1fr));
        gap:18px;
    }

    .promotions .promotion-intro,
    .promotions .promotion-card{
        height:clamp(245px,19vw,276px);
        min-height:245px;
    }

    .promotions .promotion-intro{
        padding-right:18px;
    }

    .promotions .promotion-intro h2{
        font-size:clamp(34px,2.65vw,40px);
        letter-spacing:-1.35px;
    }

    .promotions .promotion-intro>p:not(.section-eyebrow),
    .promotions .promotion-copy small{
        font-size:14px;
    }

    .promotions .promotion-copy strong{
        font-size:clamp(25px,2vw,28px);
    }
}

/* Tablet: introduction spans the row and promotion cards use two columns. */
@media (max-width:1180px){
    .promotions.site-container{
        width:calc(100% - 48px);
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px;
    }

    .promotions .promotion-intro{
        grid-column:1 / -1;
        height:auto;
        min-height:0;
        padding:0 0 8px;
    }

    .promotions .promotion-intro h2{
        margin-bottom:12px;
        font-size:clamp(36px,5vw,42px);
    }

    .promotions .promotion-card{
        height:clamp(250px,31vw,290px);
        min-height:250px;
    }
}

/* Mobile: one clean column without horizontal overflow. */
@media (max-width:700px){
    .promotions.site-container{
        width:calc(100% - 40px);
        grid-template-columns:minmax(0,1fr);
        gap:18px;
    }

    .promotions .promotion-intro{
        grid-column:auto;
        padding:0 2px 6px;
    }

    .promotions .promotion-intro .section-eyebrow{
        font-size:14px;
    }

    .promotions .promotion-intro h2{
        margin:8px 0 12px;
        font-size:clamp(32px,10vw,40px);
        letter-spacing:-1.2px;
    }

    .promotions .promotion-intro>p:not(.section-eyebrow){
        font-size:14px;
    }

    .promotions .promotion-card{
        height:clamp(235px,58vw,285px);
        min-height:235px;
        border-radius:18px;
    }

    .promotions .promotion-copy{
        left:24px;
        top:26px;
    }

    .promotions .promotion-copy strong{
        font-size:clamp(25px,7.6vw,29px);
    }

    .promotions .promotion-copy small{
        margin-top:12px;
        font-size:14px;
    }

    .promotions .round-arrow{
        left:24px;
        bottom:22px;
        width:48px;
        height:48px;
    }
}

@media (max-width:420px){
    .promotions.site-container{
        width:calc(100% - 28px);
    }

    .promotions .promotion-card{
        height:230px;
        min-height:230px;
    }
}


/* =========================================================
   HOMEPAGE FINAL COMPACT ADJUSTMENT — Special Deals
   ========================================================= */
.promotions .promotion-intro,
.promotions .promotion-card{
    height:300px;
    min-height:300px;
}

.promotions .promotion-intro h2{
    font-size:44px;
    line-height:1.04;
    letter-spacing:-1.5px;
}

.promotions .promotion-copy{
    top:30px;
    left:28px;
}

.promotions .promotion-copy strong{
    font-size:29px;
    line-height:.98;
    letter-spacing:-.8px;
}

.promotions .promotion-copy small{
    margin-top:14px;
    font-size:15px;
    line-height:1.4;
}

.promotions .round-arrow{
    left:28px;
    bottom:24px;
    width:52px;
    height:52px;
}

.promotions .round-arrow .icon{
    width:17px;
    height:17px;
}

/* Keep the previously defined responsive proportions authoritative. */
@media (max-width:1500px){
    .promotions .promotion-intro,
    .promotions .promotion-card{
        height:clamp(245px,19vw,276px);
        min-height:245px;
    }

    .promotions .promotion-intro h2{
        font-size:clamp(34px,2.65vw,40px);
    }

    .promotions .promotion-copy strong{
        font-size:clamp(25px,2vw,28px);
    }
}

@media (max-width:1180px){
    .promotions .promotion-intro{
        height:auto;
        min-height:0;
    }

    .promotions .promotion-intro h2{
        font-size:clamp(36px,5vw,42px);
    }

    .promotions .promotion-card{
        height:clamp(250px,31vw,290px);
        min-height:250px;
    }
}

@media (max-width:700px){
    .promotions .promotion-intro h2{
        font-size:clamp(32px,10vw,40px);
    }

    .promotions .promotion-card{
        height:clamp(235px,58vw,285px);
        min-height:235px;
    }

    .promotions .promotion-copy{
        top:26px;
        left:24px;
    }

    .promotions .promotion-copy strong{
        font-size:clamp(25px,7.6vw,29px);
    }

    .promotions .promotion-copy small{
        margin-top:12px;
        font-size:14px;
    }

    .promotions .round-arrow{
        left:24px;
        bottom:22px;
        width:48px;
        height:48px;
    }
}

@media (max-width:420px){
    .promotions .promotion-card{
        height:230px;
        min-height:230px;
    }
}

/* =========================================================
   HOMEPAGE TRUSTED BRANDS + OUR SERVICES — authoritative
   wide, low banner treatment. Carousel logic is unchanged.
   ========================================================= */
.brand-service-showcase.site-container{
    margin-top:72px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
    align-items:start;
    overflow:visible;
}

.brand-service-showcase .showcase-panel{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-bottom:24px;
}

.brand-service-showcase .showcase-panel>h2.showcase-section-title{
    display:block;
    margin:0 0 11px;
    color:#111111;
    font-family:"Montserrat",sans-serif;
    font-size:16px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.2px;
    text-transform:uppercase;
}

.brand-service-showcase .showcase-slider{
    position:relative;
    width:100%;
    height:250px;
    min-height:250px;
    overflow:visible;
    border:0;
    border-radius:18px;
    background:transparent;
    box-shadow:none;
}

.brand-service-showcase .showcase-slide{
    overflow:hidden;
    border-radius:18px;
    background:#11151a;
    box-shadow:0 7px 20px rgba(15,23,42,.09);
}

.brand-service-showcase .showcase-background{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1.01);
}

.brand-service-showcase [data-showcase-slider="brands"] .showcase-slide::after{
    background:linear-gradient(90deg,rgba(0,15,20,.78) 0%,rgba(0,15,20,.55) 42%,rgba(0,15,20,.28) 100%);
}

.brand-service-showcase [data-showcase-slider="services"] .showcase-slide::after{
    background:rgba(0,0,0,.38);
}

/* Section labels now sit above the banners. */
.brand-service-showcase .showcase-content .showcase-kicker{
    display:none;
}

/* Trusted Brands: large logo directly on the image, without a white box. */
.brand-service-showcase .showcase-brand-content{
    inset:0 auto 0 18%;
    width:min(310px,42%);
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    text-align:left;
}

.brand-service-showcase .showcase-brand-logo-frame{
    width:230px;
    max-width:100%;
    height:78px;
    max-height:78px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.brand-service-showcase .showcase-brand-logo,
.brand-service-showcase .showcase-brand-logo--acer{
    width:230px;
    max-width:100%;
    height:auto;
    max-height:78px;
    object-fit:contain;
    object-position:left center;
    filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.18));
}

.brand-service-showcase .showcase-brand-content>span:not(.showcase-kicker):not(.showcase-brand-logo-frame){
    max-width:300px;
    margin-top:7px;
    color:rgba(255,255,255,.92);
    font-size:14px;
    font-weight:500;
    line-height:1.4;
    display:block;
    overflow:visible;
}

/* The compact banner uses only the logo and supporting line. */
.brand-service-showcase .showcase-brand-content>strong{
    display:none;
}

/* Our Services: centred icon, title and description. */
.brand-service-showcase .showcase-service-content{
    inset:0;
    width:100%;
    padding:24px 86px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.brand-service-showcase .showcase-service-icon{
    width:58px;
    height:58px;
    margin:0 0 12px;
    border:0;
    border-radius:12px;
    background:#ffffff;
    color:#111111;
    box-shadow:0 5px 14px rgba(0,0,0,.10);
}

.brand-service-showcase .showcase-service-icon .icon{
    width:30px;
    height:30px;
    color:#111111;
    stroke-width:2;
}

.brand-service-showcase .showcase-service-content>strong{
    margin:0;
    color:#ffffff;
    font-size:26px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.5px;
    text-transform:uppercase;
}

.brand-service-showcase .showcase-service-content>span:not(.showcase-service-icon):not(.showcase-kicker){
    max-width:390px;
    margin-top:9px;
    color:rgba(255,255,255,.92);
    font-size:14px;
    font-weight:500;
    line-height:1.4;
    display:block;
    overflow:visible;
}

.brand-service-showcase .showcase-service-content>em{
    display:none;
}

/* Matching navigation buttons on both banners. */
.brand-service-showcase .showcase-arrow{
    top:50%;
    width:48px;
    height:48px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#ffffff;
    color:#111111;
    transform:translateY(-50%);
    box-shadow:0 4px 12px rgba(0,0,0,.10);
    transition:transform .18s ease,box-shadow .18s ease;
}

.brand-service-showcase .showcase-arrow:hover{
    background:#ffffff;
    transform:translateY(-50%) scale(1.035);
    box-shadow:0 6px 16px rgba(0,0,0,.13);
}

.brand-service-showcase .showcase-prev{left:20px}
.brand-service-showcase .showcase-next{right:20px}

.brand-service-showcase .showcase-arrow .icon{
    width:18px;
    height:18px;
    stroke-width:2.5;
}

.brand-service-showcase .showcase-arrow .icon *{
    stroke-width:2.5;
}

/* Dots sit 14px below the banner instead of covering the image. */
.brand-service-showcase .showcase-dots{
    left:50%;
    bottom:-24px;
    width:auto;
    height:10px;
    margin:0;
    gap:9px;
    transform:translateX(-50%);
}

.brand-service-showcase .showcase-dots button,
.brand-service-showcase .showcase-dots button.is-active{
    width:10px;
    height:10px;
    padding:0;
    border-radius:50%;
}

.brand-service-showcase .showcase-dots button{
    border:1.5px solid #b7b7b7;
    background:transparent;
}

.brand-service-showcase .showcase-dots button.is-active{
    border-color:#111111;
    background:#111111;
}

/* Standard laptop screens: retain two balanced, slightly lower banners. */
@media (max-width:1280px){
    .brand-service-showcase.site-container{gap:24px}

    .brand-service-showcase .showcase-slider{
        height:230px;
        min-height:230px;
    }

    .brand-service-showcase .showcase-brand-content{
        left:16%;
        width:min(280px,44%);
    }

    .brand-service-showcase .showcase-brand-logo-frame,
    .brand-service-showcase .showcase-brand-logo,
    .brand-service-showcase .showcase-brand-logo--acer{
        width:205px;
        max-height:70px;
    }

    .brand-service-showcase .showcase-service-content{
        padding-inline:76px;
    }

    .brand-service-showcase .showcase-service-content>strong{
        font-size:23px;
    }
}

/* Tablet and smaller: one full-width banner per row. */
@media (max-width:980px){
    .brand-service-showcase.site-container{
        grid-template-columns:minmax(0,1fr);
        gap:28px;
        margin-top:58px;
    }

    .brand-service-showcase .showcase-slider{
        height:250px;
        min-height:250px;
    }

    .brand-service-showcase .showcase-brand-content{
        left:18%;
        width:min(320px,45%);
    }
}

@media (max-width:600px){
    .brand-service-showcase.site-container{gap:24px}

    .brand-service-showcase .showcase-panel>h2.showcase-section-title{
        margin-bottom:10px;
        font-size:14px;
    }

    .brand-service-showcase .showcase-slider{
        height:220px;
        min-height:220px;
        border-radius:16px;
    }

    .brand-service-showcase .showcase-slide{
        border-radius:16px;
    }

    .brand-service-showcase .showcase-brand-content{
        left:62px;
        width:calc(100% - 124px);
    }

    .brand-service-showcase .showcase-brand-logo-frame,
    .brand-service-showcase .showcase-brand-logo,
    .brand-service-showcase .showcase-brand-logo--acer{
        width:180px;
        max-height:62px;
    }

    .brand-service-showcase .showcase-brand-content>span:not(.showcase-kicker):not(.showcase-brand-logo-frame){
        max-width:250px;
        font-size:12px;
    }

    .brand-service-showcase .showcase-service-content{
        padding:20px 60px;
    }

    .brand-service-showcase .showcase-service-icon{
        width:52px;
        height:52px;
        margin-bottom:10px;
    }

    .brand-service-showcase .showcase-service-icon .icon{
        width:27px;
        height:27px;
    }

    .brand-service-showcase .showcase-service-content>strong{
        font-size:20px;
    }

    .brand-service-showcase .showcase-service-content>span:not(.showcase-service-icon):not(.showcase-kicker){
        margin-top:7px;
        font-size:12px;
    }

    .brand-service-showcase .showcase-arrow{
        width:42px;
        height:42px;
    }

    .brand-service-showcase .showcase-prev{left:12px}
    .brand-service-showcase .showcase-next{right:12px}

    .brand-service-showcase .showcase-arrow .icon{
        width:16px;
        height:16px;
    }
}

/* Brand wordmark optical sizing: the supplied SVGs contain generous internal
   whitespace, so scale the logo artwork while keeping the content centred in
   the left portion of the banner. */
.brand-service-showcase .showcase-brand-content{
    inset:0 auto 0 0;
    width:44%;
    align-items:center;
    text-align:center;
}

.brand-service-showcase .showcase-brand-logo-frame{
    justify-content:center;
}

.brand-service-showcase .showcase-brand-logo,
.brand-service-showcase .showcase-brand-logo--acer{
    transform:scale(1.9);
    transform-origin:center;
}

.brand-service-showcase .showcase-brand-content>span:not(.showcase-kicker):not(.showcase-brand-logo-frame){
    text-align:center;
}

@media (max-width:1280px){
    .brand-service-showcase .showcase-brand-content{
        left:0;
        width:45%;
    }
}

@media (max-width:980px){
    .brand-service-showcase .showcase-brand-content{
        left:0;
        width:44%;
    }
}

@media (max-width:600px){
    .brand-service-showcase .showcase-brand-content{
        left:0;
        width:58%;
        padding-left:28px;
    }

    .brand-service-showcase .showcase-brand-logo,
    .brand-service-showcase .showcase-brand-logo--acer{
        transform:scale(1.6);
    }
}

/* =========================================================
   SPECIAL DEALS — FOLLOW LASTOWEB ORIGINAL SIZE & FONT
   ========================================================= */

.promotions.site-container {
    min-height: 238px;
    grid-template-columns: minmax(240px, 0.76fr) repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

/* Left introduction */
.promotions .promotion-intro {
    height: 238px;
    min-height: 238px;
    padding: 10px 26px 10px 16px;
    justify-content: center;
}

.promotions .promotion-intro .section-eyebrow {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.promotions .promotion-intro h2 {
    margin: 8px 0 13px;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: clamp(28px, 2.25vw, 38px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -1.1px;
    white-space: normal;
}

.promotions .promotion-intro > p:not(.section-eyebrow) {
    margin: 0;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

/* Promotion cards */
.promotions .promotion-card {
    width: 100%;
    height: 238px;
    min-height: 238px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
}

.promotions .promotion-card::before {
    background: linear-gradient(
        90deg,
        rgba(7, 10, 21, 0.72),
        rgba(7, 10, 21, 0.12) 72%
    );
}

/* Card text */
.promotions .promotion-copy {
    top: 24px;
    left: 22px;
}

.promotions .promotion-copy strong {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.5px;
    white-space: normal;
}

.promotions .promotion-copy small {
    margin-top: 13px;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
}

/* Arrow button */
.promotions .round-arrow {
    left: 22px;
    bottom: 20px;
    width: 42px;
    height: 42px;
    box-shadow: none;
}

.promotions .round-arrow .icon {
    width: 17px;
    height: 17px;
}

/* Original subtle hover */
.promotions .promotion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.15);
}

.promotions .promotion-card:hover .round-arrow {
    transform: translateX(4px);
}

/* Tablet */
@media (max-width: 980px) {
    .promotions.site-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .promotions .promotion-intro {
        grid-column: 1 / -1;
        height: auto;
        min-height: 210px;
        padding-left: 12px;
    }

    .promotions .promotion-card {
        height: 238px;
        min-height: 238px;
    }
}

/* Mobile */
@media (max-width: 680px) {
    .promotions.site-container {
        grid-template-columns: 1fr;
    }

    .promotions .promotion-intro {
        grid-column: auto;
        height: auto;
        min-height: 0;
        padding: 0 4px 8px;
    }

    .promotions .promotion-card {
        height: 230px;
        min-height: 230px;
    }

    .promotions .promotion-copy {
        top: 24px;
        left: 22px;
    }

    .promotions .promotion-copy strong {
        font-size: 22px;
    }

    .promotions .promotion-copy small {
        margin-top: 13px;
        font-size: 11px;
    }

    .promotions .round-arrow {
        left: 22px;
        bottom: 20px;
        width: 42px;
        height: 42px;
    }
}
/* =========================================================
   HOMEPAGE TRUSTED BRANDS + OUR SERVICES — final compact fit
   Smaller banners, softer curves and clearer footer spacing.
   ========================================================= */
.brand-service-showcase.site-container {
    margin-bottom: 92px;
}

.brand-service-showcase .showcase-slider {
    height: 225px;
    min-height: 225px;
    border-radius: 24px;
}

.brand-service-showcase .showcase-slide {
    border-radius: 24px;
}

@media (max-width: 1280px) {
    .brand-service-showcase .showcase-slider {
        height: 215px;
        min-height: 215px;
    }
}

@media (max-width: 980px) {
    .brand-service-showcase.site-container {
        margin-bottom: 82px;
    }

    .brand-service-showcase .showcase-slider {
        height: 225px;
        min-height: 225px;
    }
}

@media (max-width: 600px) {
    .brand-service-showcase.site-container {
        margin-bottom: 70px;
    }

    .brand-service-showcase .showcase-slider {
        height: 205px;
        min-height: 205px;
        border-radius: 20px;
    }

    .brand-service-showcase .showcase-slide {
        border-radius: 20px;
    }
}

/* =========================================================
   GLOBAL PAGE MARGINS — final authoritative override
   More white space on the left and right across every page.
   ========================================================= */
:root {
    --site-max-width: 1500px;
    --site-side-space: clamp(28px, 5vw, 96px);
}

.site-container,
.header-inner,
.nav-inner,
.page-container,
.page-shell,
.section-inner,
.footer-inner,
.home-hero,
.hero-carousel,
.hero {
    width: min(
        var(--site-max-width),
        calc(100% - (var(--site-side-space) * 2))
    );
    margin-left: auto;
    margin-right: auto;
}

/* Laptop: retain a clear white border without squeezing content. */
@media (max-width: 1200px) {
    :root {
        --site-side-space: clamp(34px, 4.5vw, 54px);
    }
}

/* Tablet: slightly wider page padding than before. */
@media (max-width: 768px) {
    :root {
        --site-side-space: 24px;
    }
}

/* Small mobile: prevent content becoming too narrow. */
@media (max-width: 480px) {
    :root {
        --site-side-space: 16px;
    }
}

/* =========================================================
   FINAL PAGE MARGINS + CENTRED TRUSTED BRAND CONTENT
   Authoritative homepage/page-width adjustment.
   ========================================================= */
:root {
    --site-max-width: 1320px;
    --site-side-space: clamp(32px, 5.75vw, 110px);
}

/* Keep the brand presentation centred, matching Our Services. */
.brand-service-showcase .showcase-brand-content {
    inset: 0;
    width: 100%;
    padding: 24px 86px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.brand-service-showcase .showcase-brand-logo-frame {
    width: min(250px, 72%);
    height: 82px;
    max-height: 82px;
    justify-content: center;
}

.brand-service-showcase .showcase-brand-logo,
.brand-service-showcase .showcase-brand-logo--acer,
.brand-service-showcase .showcase-brand-logo--asus,
.brand-service-showcase .showcase-brand-logo--dell,
.brand-service-showcase .showcase-brand-logo--lenovo {
    width: 100%;
    height: 100%;
    max-width: 250px;
    max-height: 82px;
    object-fit: contain;
    object-position: center;
    transform: none;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.22));
}

.brand-service-showcase .showcase-brand-logo--dell {
    max-width: 92px;
    max-height: 92px;
}

.brand-service-showcase .showcase-brand-logo--lenovo {
    max-width: 230px;
    max-height: 74px;
}

.brand-service-showcase .showcase-brand-content > span:not(.showcase-kicker):not(.showcase-brand-logo-frame) {
    max-width: 390px;
    margin-top: 9px;
    text-align: center;
}

@media (max-width: 1200px) {
    :root {
        --site-side-space: clamp(40px, 5vw, 64px);
    }
}

@media (max-width: 768px) {
    :root {
        --site-side-space: 28px;
    }

    .brand-service-showcase .showcase-brand-content {
        padding-inline: 70px;
    }
}

@media (max-width: 480px) {
    :root {
        --site-side-space: 18px;
    }

    .brand-service-showcase .showcase-brand-content {
        padding-inline: 58px;
    }

    .brand-service-showcase .showcase-brand-logo-frame {
        width: min(210px, 78%);
        height: 70px;
    }

    .brand-service-showcase .showcase-brand-logo,
    .brand-service-showcase .showcase-brand-logo--acer,
    .brand-service-showcase .showcase-brand-logo--asus,
    .brand-service-showcase .showcase-brand-logo--lenovo {
        max-width: 210px;
        max-height: 70px;
    }

    .brand-service-showcase .showcase-brand-logo--dell {
        max-width: 78px;
        max-height: 78px;
    }
}



/* =========================================================
   STANDARD LASTO FOOTER — FINAL AUTHORITATIVE OVERRIDE
   Shared across all primary website pages.
   ========================================================= */
.footer {
    margin-top: 0;
    background: linear-gradient(110deg, #070910 0%, #0a0d16 58%, #101522 100%);
    color: #ffffff;
}

.footer .footer-inner {
    position: relative;
    min-height: 0;
    padding-top: 46px;
    padding-bottom: 62px;
    display: grid;
    grid-template-columns: minmax(280px, 1.45fr) minmax(150px, 0.72fr) minmax(150px, 0.72fr) minmax(220px, 1fr);
    align-items: start;
    gap: clamp(34px, 4vw, 66px);
}

.footer-logo-link {
    display: inline-block;
    width: min(286px, 100%);
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

.footer .footer-brand img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 96px;
    object-fit: contain;
    object-position: left center;
}

.footer .footer-brand p {
    margin: 16px 0 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10.5px;
    line-height: 1.65;
}

.footer .social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer .social-links a {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 10px;
    color: #ffffff;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.footer .social-links a:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

.footer .social-links .icon {
    width: 19px;
    height: 19px;
}

.footer .footer-column h3,
.footer .footer-help h3 {
    margin: 4px 0 17px;
    color: #ffffff;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.footer .footer-column a {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}

.footer .footer-column a:hover {
    color: #b7a8ff;
    transform: translateX(2px);
}

.footer .footer-help p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.6;
}

.footer .footer-help > a {
    width: max-content;
    max-width: 100%;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 10px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.footer .footer-help > a:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
}

.footer .footer-help > a .icon {
    width: 18px;
    height: 18px;
}

.footer .copyright {
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 100%;
    margin: 0;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.62);
    font-size: 10.5px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}

@media (max-width: 980px) {
    .footer .footer-inner {
        grid-template-columns: minmax(0, 1.35fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr);
        gap: 36px 28px;
    }

    .footer .footer-help {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .footer .footer-inner {
        padding-top: 38px;
        padding-bottom: 64px;
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }

    .footer .footer-brand,
    .footer .footer-help {
        grid-column: 1 / -1;
    }

    .footer-logo-link {
        width: min(260px, 100%);
    }
}

@media (max-width: 440px) {
    .footer .footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer .footer-brand,
    .footer .footer-help {
        grid-column: auto;
    }
}

/* =========================================================
   FINAL NAVBAR COMPANY LOGO + REAL SOCIAL ICONS
   ========================================================= */
.logo-link {
    width: 190px;
    flex: 0 0 190px;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.logo-link img {
    display: block;
    width: 100%;
    height: 58px;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
}

.footer .social-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer .social-links .social-link {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.015);
    color: #ffffff;
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    line-height: 0;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.footer .social-links .social-link .icon {
    width: 20px;
    height: 20px;
    display: block;
}

.footer .social-links .social-link:hover {
    transform: translateY(-2px);
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.footer .social-links .social-link:focus-visible {
    outline: 3px solid rgba(169, 150, 255, 0.5);
    outline-offset: 3px;
}

@media (max-width: 1280px) {
    .logo-link {
        width: 174px;
        flex-basis: 174px;
    }

    .logo-link img {
        height: 54px;
        max-height: 54px;
    }
}

@media (max-width: 980px) {
    .logo-link {
        width: 150px;
        flex-basis: 150px;
    }

    .logo-link img {
        height: 48px;
        max-height: 48px;
    }
}

@media (max-width: 480px) {
    .logo-link {
        width: 126px;
        flex-basis: 126px;
    }

    .logo-link img {
        height: 42px;
        max-height: 42px;
    }

    .footer .social-links .social-link {
        width: 42px;
        height: 42px;
    }
}


/* ================================================================
   WHATSAPP BRANCH PICKER
   One consistent floating action and branch selector for every page.
   ================================================================ */
.global-floating-whatsapp {
    position: fixed;
    z-index: 115;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #20c960, #12a949);
    color: #ffffff;
    display: grid;
    place-items: center;
    text-decoration: none;
    box-shadow: 0 15px 34px rgba(18, 169, 73, 0.34);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.global-floating-whatsapp::before {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(32, 201, 96, 0.28);
    border-radius: inherit;
    pointer-events: none;
}

.global-floating-whatsapp:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 19px 40px rgba(18, 169, 73, 0.42);
    filter: brightness(1.03);
}

.global-floating-whatsapp:focus-visible {
    outline: 4px solid rgba(112, 78, 255, 0.28);
    outline-offset: 4px;
}

.global-floating-whatsapp .icon {
    width: 29px;
    height: 29px;
    stroke-width: 1.9;
}

body.whatsapp-picker-open {
    overflow: hidden;
}

.whatsapp-branch-picker[hidden] {
    display: none;
}

.whatsapp-branch-picker {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.whatsapp-picker-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(16, 14, 31, 0.58);
    backdrop-filter: blur(7px);
    cursor: default;
}

.whatsapp-picker-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden auto;
    padding: 0;
    border: 1px solid rgba(33, 132, 79, 0.18);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 28px 78px rgba(17, 12, 45, 0.28);
    animation: whatsappPickerIn 0.22s ease both;
}

@keyframes whatsappPickerIn {
    from {opacity:0;transform:translateY(14px) scale(.975)}
    to {opacity:1;transform:translateY(0) scale(1)}
}

.whatsapp-picker-close {
    position:absolute;
    top:12px;
    right:14px;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:background-color .18s ease,transform .18s ease;
}
.whatsapp-picker-close:hover{background:rgba(255,255,255,.12);transform:rotate(4deg)}
.whatsapp-picker-close .icon{width:19px;height:19px}

.whatsapp-picker-heading {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    padding-right:64px;
    background:linear-gradient(135deg,#17944c,#0f8e4d 58%,#0d7f47);
    color:#fff;
}
.whatsapp-picker-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.1);
    color:#fff;
    display:grid;
    place-items:center;
}
.whatsapp-picker-icon .icon{width:23px;height:23px}
.whatsapp-picker-heading h2 {
    margin:0;
    color:#fff;
    font-size:22px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.02em;
}

.whatsapp-picker-body{padding:18px 20px 16px}
.whatsapp-picker-description{
    margin:0;
    color:#5f6673;
    font-size:15px;
    line-height:1.5;
}
.whatsapp-branch-options{
    margin-top:14px;
    border:1px solid #dde2e8;
    border-radius:17px;
    background:#fff;
    overflow:hidden;
}
.whatsapp-branch-option{
    min-height:88px;
    padding:10px 12px;
    border-bottom:1px solid #e5e8ee;
    background:#fff;
    color:#1b1728;
    display:grid;
    grid-template-columns:56px minmax(0,1fr) 38px 12px;
    align-items:center;
    gap:11px;
    text-decoration:none;
    transition:background-color .18s ease;
}
.whatsapp-branch-option:last-child{border-bottom:0}
.whatsapp-branch-option:hover{background:#fbfdfb}
.whatsapp-branch-option:focus-visible{outline:3px solid rgba(22,149,72,.2);outline-offset:-3px}
.whatsapp-branch-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#2f267e,#1d1d6f 68%,#141252);
    display:grid;
    place-items:center;
    overflow:hidden;
}
.whatsapp-branch-avatar img{width:92%;height:92%;object-fit:contain;display:block}
.whatsapp-branch-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.whatsapp-branch-copy strong{color:#161923;font-size:16px;font-weight:700;line-height:1.3}
.whatsapp-branch-copy>span,
.whatsapp-branch-copy small{font-size:13px;line-height:1.35}
.whatsapp-branch-copy>span{color:#626a78}
.whatsapp-branch-copy small{color:#17944c;font-weight:700;letter-spacing:.01em}
.whatsapp-branch-action{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #d8e2d8;
    background:#fff;
    color:#16a34a;
    display:grid;
    place-items:center;
}
.whatsapp-branch-action .icon{width:18px;height:18px}
.whatsapp-branch-arrow{color:#818897;display:grid;place-items:center}
.whatsapp-branch-arrow .icon{width:15px;height:15px}
.whatsapp-picker-note{
    margin:14px 0 0;
    color:#7b7f89;
    font-size:10.5px;
    line-height:1.5;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}
.whatsapp-picker-note .icon{width:14px;height:14px;color:#7b7f89}

@media (max-width:600px){
    .global-floating-whatsapp{right:16px;bottom:16px;width:52px;height:52px}
    .global-floating-whatsapp .icon{width:27px;height:27px}
    .whatsapp-branch-picker{align-items:end;padding:12px}
    .whatsapp-picker-dialog{width:100%;max-height:calc(100vh - 24px);border-radius:20px}
    .whatsapp-picker-heading{padding:14px 16px;padding-right:54px}
    .whatsapp-picker-icon{width:36px;height:36px;border-radius:11px}
    .whatsapp-picker-icon .icon{width:21px;height:21px}
    .whatsapp-picker-heading h2{font-size:17px}
    .whatsapp-picker-close{top:10px;right:10px;width:32px;height:32px}
    .whatsapp-picker-body{padding:16px 14px 14px}
    .whatsapp-picker-description{font-size:12px}
    .whatsapp-branch-options{margin-top:12px;border-radius:15px}
    .whatsapp-branch-option{min-height:76px;grid-template-columns:50px minmax(0,1fr) 34px 11px;gap:9px;padding:9px 10px}
    .whatsapp-branch-avatar{width:43px;height:43px}
    .whatsapp-branch-copy strong{font-size:12.5px}
    .whatsapp-branch-copy>span,.whatsapp-branch-copy small{font-size:10.5px}
    .whatsapp-branch-action{width:31px;height:31px}
    .whatsapp-branch-action .icon{width:17px;height:17px}
    .whatsapp-picker-note{font-size:10px}
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-picker-dialog,
    .global-floating-whatsapp,
    .whatsapp-branch-option,
    .whatsapp-picker-close {
        animation: none;
        transition: none;
    }
}


/* =========================================================
   HOMEPAGE GOOGLE REVIEWS — compact corporate presentation
   ========================================================= */
.google-reviews{
    margin-top:72px;
}
.google-reviews-shell{
    position:relative;
    isolation:isolate;
    min-height:220px;
    padding:24px;
    border:1px solid #e4e1eb;
    border-radius:20px;
    background:
        radial-gradient(circle at 10% 0%,rgba(92,53,244,.10),transparent 34%),
        linear-gradient(135deg,#fbfbfd 0%,#f5f4f8 100%);
    display:grid;
    grid-template-columns:minmax(300px,.86fr) minmax(0,2.14fr);
    gap:24px;
    overflow:hidden;
    box-shadow:0 16px 42px rgba(15,23,42,.065);
}
.google-reviews-shell::after{
    content:"";
    position:absolute;
    z-index:-1;
    top:-82px;
    right:-54px;
    width:220px;
    height:220px;
    border:42px solid rgba(92,53,244,.045);
    border-radius:50%;
}
.google-reviews-summary{
    min-width:0;
    padding:4px 18px 4px 4px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.google-reviews-brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}
.google-wordmark{
    display:inline-flex;
    align-items:center;
    font-size:18px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.8px;
}
.google-wordmark span:nth-child(1),
.google-wordmark span:nth-child(4){color:#4285f4}
.google-wordmark span:nth-child(2),
.google-wordmark span:nth-child(6){color:#ea4335}
.google-wordmark span:nth-child(3){color:#fbbc05}
.google-wordmark span:nth-child(5){color:#34a853}
.google-reviews-label{
    min-height:26px;
    padding:0 10px;
    border:1px solid #e1dcef;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:#655e72;
    display:inline-flex;
    align-items:center;
    font-size:9.5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.google-reviews-summary h2{
    margin:0;
    color:#15131b;
    font-size:clamp(24px,1.75vw,30px);
    line-height:1.12;
    font-weight:800;
    letter-spacing:-.8px;
}
.google-reviews-summary>p{
    max-width:440px;
    margin:10px 0 0;
    color:#666170;
    font-size:12px;
    line-height:1.65;
}
.google-review-stars{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:13px;
}
.google-review-stars>span,
.google-review-card-stars{
    color:#f4b400;
    letter-spacing:1.5px;
}
.google-review-stars>span{font-size:16px;line-height:1}
.google-review-stars small{
    color:#827c8a;
    font-size:9.5px;
    line-height:1.2;
    font-weight:700;
}
.google-review-filter-notice{
    max-width:430px;
    margin:7px 0 0;
    color:#777181;
    font-size:8.5px;
    line-height:1.45;
    font-weight:600;
}
.google-review-branch-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}
.google-review-branch-links a{
    min-height:34px;
    padding:0 12px;
    border:1px solid #dcd7e8;
    border-radius:9px;
    background:#fff;
    color:#292532;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    font-size:9.5px;
    line-height:1;
    font-weight:800;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
.google-review-branch-links a:hover{
    color:#5c35f4;
    border-color:rgba(92,53,244,.42);
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(35,25,75,.08);
}
.google-review-branch-links .icon{
    width:13px;
    height:13px;
}
.google-review-highlights{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.google-review-highlights--count-1{
    grid-template-columns:minmax(280px,380px);
    justify-content:end;
}
.google-review-highlights--count-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.google-review-card{
    position:relative;
    min-width:0;
    min-height:268px;
    padding:16px;
    border:1px solid rgba(222,218,231,.92);
    border-radius:16px;
    background:rgba(255,255,255,.94);
    box-shadow:0 10px 26px rgba(38,31,67,.055);
    display:flex;
    flex-direction:column;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.google-review-card:hover{
    transform:translateY(-3px);
    border-color:rgba(92,53,244,.27);
    box-shadow:0 15px 32px rgba(38,31,67,.09);
}
.google-review-card-header{
    min-width:0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.google-review-profile{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
}
.google-review-avatar{
    position:relative;
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg,#5c35f4,#342078);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:16px;
    line-height:1;
    font-weight:500;
}
.google-review-avatar--image{
    display:block;
    object-fit:cover;
    background:#ece9f5;
}
.google-review-avatar--brown{background:#6b4b40}
.google-review-avatar--purple{background:#6541e7}
.google-review-avatar--green{background:#368a48}
.google-review-local-badge{
    position:absolute;
    right:-3px;
    bottom:-2px;
    width:14px;
    height:14px;
    border:2px solid #fff;
    border-radius:50%;
    background:#f2992e;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:7px;
    line-height:1;
}
.google-review-profile-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}
.google-review-profile-copy strong{
    overflow:hidden;
    color:#211d29;
    font-size:11.5px;
    line-height:1.2;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.google-review-profile-copy small{
    overflow:hidden;
    color:#7a7581;
    font-size:8px;
    line-height:1.25;
    font-weight:500;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.google-review-menu{
    flex:0 0 auto;
    width:24px;
    height:30px;
    border-radius:7px;
    color:#18151d;
    display:grid;
    place-items:center;
    text-decoration:none;
    font-size:19px;
    line-height:1;
    font-weight:700;
    transition:background .18s ease,color .18s ease;
}
.google-review-menu:hover{
    background:#f2effa;
    color:#5c35f4;
}
.google-review-rating-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    margin-top:14px;
}
.google-review-card-stars{
    margin:0;
    color:#f5a800;
    font-size:12px;
    line-height:1;
    letter-spacing:.6px;
}
.google-review-rating-row small{
    color:#6f6977;
    font-size:8.5px;
    line-height:1.2;
    font-weight:500;
}
.google-review-card-text{
    margin:10px 0 0;
    color:#292432;
    font-size:9.4px;
    line-height:1.58;
    font-weight:500;
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:7;
}
.google-review-photo-strip{
    min-height:64px;
    margin-top:auto;
    padding-top:12px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
}
.google-review-photo-strip--count-1{grid-template-columns:1fr}
.google-review-photo-strip--count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.google-review-photo-strip img{
    width:100%;
    height:64px;
    border-radius:8px;
    display:block;
    object-fit:cover;
}
.google-review-read-link{
    margin-top:auto;
    padding-top:16px;
    color:#5c35f4;
    display:inline-flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    text-decoration:none;
    font-size:8.5px;
    line-height:1.2;
    font-weight:800;
}
.google-review-read-link .icon{
    width:12px;
    height:12px;
}
.google-review-read-link:hover{text-decoration:underline}


@media (max-width:1120px){
    .google-reviews-shell{
        grid-template-columns:minmax(270px,.8fr) minmax(0,2.2fr);
        gap:18px;
        padding:20px;
    }
    .google-review-highlights{gap:10px}
    .google-review-card{min-height:258px;padding:14px}
    .google-review-avatar{flex-basis:34px;width:34px;height:34px}
}
@media (max-width:900px){
    .google-reviews-shell{grid-template-columns:1fr}
    .google-reviews-summary{padding-right:4px}
    .google-reviews-summary>p{max-width:680px}
}
@media (max-width:680px){
    .google-reviews{margin-top:44px}
    .google-reviews-shell{padding:18px;border-radius:18px}
    .google-review-highlights,
    .google-review-highlights--count-1,
    .google-review-highlights--count-2{grid-template-columns:1fr;justify-content:stretch}
    .google-review-card{min-height:250px}
    .google-review-branch-links{display:grid;grid-template-columns:1fr}
    .google-review-branch-links a{justify-content:space-between}
}

/* =========================================================
   NAVBAR INTERACTION + FULLY ROUNDED SEARCH — 17 JUL 2026
   ========================================================= */
.search-form input {
    border-radius: 999px;
    padding-right: 56px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.search-form button {
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: auto;
    width: 34px;
    height: auto;
    border-radius: 999px;
    background: #f1efff;
    color: var(--purple);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.search-form button:hover {
    background: var(--purple);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(92, 53, 244, 0.24);
}

.search-form button:active {
    transform: scale(0.96);
}

.search-form input:focus {
    background: #ffffff;
    border-color: #7658f6;
    box-shadow: 0 0 0 4px rgba(92, 53, 244, 0.14);
}

.nav-links.navbar-menu a {
    height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.nav-links.navbar-menu a:hover {
    color: var(--purple);
    background: var(--purple-soft);
    box-shadow: inset 0 0 0 1px rgba(92, 53, 244, 0.12);
    transform: translateY(-1px);
}

.nav-links.navbar-menu a.active,
.nav-links.navbar-menu a[aria-current="page"] {
    color: #ffffff;
    background: linear-gradient(135deg, var(--purple-dark), var(--purple));
    box-shadow: 0 8px 18px rgba(92, 53, 244, 0.22);
}

.nav-links.navbar-menu a.active:hover,
.nav-links.navbar-menu a[aria-current="page"]:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #321bb7, #6948fa);
    box-shadow: 0 10px 22px rgba(92, 53, 244, 0.29);
}

.nav-links.navbar-menu a.active::after,
.nav-links.navbar-menu a[aria-current="page"]::after {
    display: none;
}

.nav-links.navbar-menu a:focus-visible,
.search-form input:focus-visible,
.search-form button:focus-visible {
    outline: 3px solid rgba(92, 53, 244, 0.28);
    outline-offset: 3px;
}

@media (max-width: 980px) {
    .search-form input {
        border-radius: 999px;
    }

    .nav-links.navbar-menu a {
        min-height: 46px;
        height: auto;
        margin: 3px 0;
        padding: 0 16px;
        border: 0;
        border-radius: 12px;
    }

    .nav-links.navbar-menu a:hover {
        transform: none;
    }

    .nav-links.navbar-menu a.active,
    .nav-links.navbar-menu a[aria-current="page"] {
        background: linear-gradient(135deg, var(--purple-dark), var(--purple));
    }
}

/* Trusted Brands combined module */
.trusted-brands-module{
    margin-top:64px;
    display:block;
}
.trusted-brands-module .showcase-panel{
    width:100%;
}
.trusted-brands-heading{
    margin-bottom:20px;
}
.trusted-brands-heading .section-eyebrow{
    margin:0 0 10px;
}
.trusted-brands-heading h2{
    margin:0;
    color:#111216;
    font-size:30px;
    line-height:1.1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
}
.trusted-brands-module .showcase-slider{
    position:relative;
    height:284px;
    min-height:284px;
    border-radius:30px;
    overflow:hidden;
    background:#09111a;
    box-shadow:0 18px 42px rgba(15,23,42,.14);
}
.trusted-brands-module .showcase-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(4,10,18,.74) 0%,rgba(4,10,18,.44) 44%,rgba(4,10,18,.18) 70%,rgba(4,10,18,.55) 100%);
}
.trusted-brands-module .showcase-background{
    filter:brightness(.78) saturate(1.05);
}
.trusted-brands-module .showcase-content{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:36px 110px 62px;
    text-align:center;
}
.trusted-brands-module .showcase-brand-content>span:not(.showcase-brand-logo-frame):not(.showcase-brand-wordmark){
    max-width:520px;
    margin-top:18px;
    color:#f2f4f8;
    font-size:16px;
    line-height:1.5;
}
.trusted-brands-module .showcase-brand-content>strong{
    margin-top:18px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
    color:#fff;
    font-size:13px;
    line-height:1;
    font-weight:700;
}
.trusted-brands-module .showcase-brand-logo-frame{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:220px;
    min-height:86px;
    padding:10px 16px;
}
.trusted-brands-module .showcase-brand-logo{
    max-width:240px;
    max-height:76px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:brightness(0) invert(1);
}
.trusted-brands-module .showcase-brand-logo--acer{
    max-width:310px;
    max-height:94px;
}
.trusted-brands-module .showcase-brand-wordmark{
    color:#fff;
    font-size:76px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.03em;
    text-transform:none;
}
.trusted-brands-module .showcase-brand-logo--tp-link,
.trusted-brands-module .showcase-brand-logo--logitech{
    max-width:210px;
}
.trusted-brands-module .showcase-brand-wordmark + span,
.trusted-brands-module .showcase-brand-logo-frame + span{
    margin-top:10px;
}
.trusted-brands-module .showcase-arrow{
    z-index:4;
    top:50%;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#fff;
    color:#111216;
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.trusted-brands-module .showcase-arrow .icon{width:18px;height:18px}
.trusted-brands-module .showcase-prev{left:24px}
.trusted-brands-module .showcase-next{right:24px}
.trusted-brands-module .showcase-dots{
    margin-top:20px;
    min-height:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.trusted-brands-module .showcase-dots button{
    width:10px;
    height:10px;
    border-radius:50%;
    border:1px solid #cfd4de;
    background:#fff;
}
.trusted-brands-module .showcase-dots button.is-active{
    background:#111216;
    border-color:#111216;
}
.brand-quick-selection{
    margin-top:26px;
    display:grid;
    grid-template-columns:repeat(9,minmax(0,1fr));
    gap:16px;
}
.brand-quick-chip{
    min-height:80px;
    padding:14px 16px;
    border-radius:20px;
    border:1px solid #d8deea;
    background:#fff;
    box-shadow:0 6px 18px rgba(15,23,42,.04);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.brand-quick-chip:hover{
    border-color:#8f74ff;
    transform:translateY(-1px);
}
.brand-quick-chip.is-active{
    border-color:#6f46ff;
    background:#f6f1ff;
    box-shadow:0 10px 24px rgba(111,70,255,.12);
}
.brand-quick-chip img{
    max-width:100%;
    max-height:30px;
    width:auto;
    height:auto;
    object-fit:contain;
}
.brand-quick-chip span{
    color:#1a2130;
    font-size:15px;
    line-height:1.2;
    font-weight:700;
}
.google-reviews{
    margin-top:72px;
}
@media (max-width: 1260px){
    .brand-quick-selection{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width: 980px){
    .trusted-brands-module .showcase-slider{
        height:260px;
        min-height:260px;
        border-radius:24px;
    }
    .trusted-brands-module .showcase-content{
        padding:30px 78px 56px;
    }
    .trusted-brands-module .showcase-brand-wordmark{font-size:56px}
    .trusted-brands-module .showcase-brand-logo{max-width:190px;max-height:58px}
    .trusted-brands-module .showcase-brand-logo--acer{max-width:240px;max-height:74px}
    .trusted-brands-module .showcase-brand-content>span:not(.showcase-brand-logo-frame):not(.showcase-brand-wordmark){font-size:14px;max-width:460px}
    .trusted-brands-module .showcase-arrow{width:48px;height:48px}
    .brand-quick-selection{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}
@media (max-width: 640px){
    .trusted-brands-module{margin-top:56px}
    .trusted-brands-heading h2{font-size:24px}
    .trusted-brands-module .showcase-slider{
        height:236px;
        min-height:236px;
        border-radius:20px;
    }
    .trusted-brands-module .showcase-content{
        padding:26px 56px 52px;
    }
    .trusted-brands-module .showcase-brand-wordmark{font-size:42px}
    .trusted-brands-module .showcase-brand-logo-frame{min-width:160px;min-height:64px}
    .trusted-brands-module .showcase-brand-logo{max-width:150px;max-height:44px}
    .trusted-brands-module .showcase-brand-logo--acer{max-width:195px;max-height:58px}
    .trusted-brands-module .showcase-brand-content>span:not(.showcase-brand-logo-frame):not(.showcase-brand-wordmark){font-size:13px;line-height:1.45}
    .trusted-brands-module .showcase-brand-content>strong{padding:10px 16px;font-size:12px}
    .trusted-brands-module .showcase-arrow{width:42px;height:42px}
    .trusted-brands-module .showcase-prev{left:12px}
    .trusted-brands-module .showcase-next{right:12px}
    .brand-quick-selection{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:12px;
        padding-bottom:4px;
        scrollbar-width:none;
    }
    .brand-quick-selection::-webkit-scrollbar{display:none}
    .brand-quick-chip{
        flex:0 0 148px;
        min-height:72px;
    }
    .google-reviews{margin-top:64px}
}

/* Trusted Brands — final full-width authoritative layout */
.brand-service-showcase.trusted-brands-module.site-container{
    display:block !important;
    grid-template-columns:none !important;
    width:min(1500px,calc(100% - (var(--site-side-space) * 2))) !important;
    max-width:1500px !important;
    margin-top:64px;
    margin-bottom:0 !important;
}
.brand-service-showcase.trusted-brands-module .showcase-panel{
    width:100% !important;
    max-width:none !important;
    min-width:0;
}
.trusted-brands-heading{
    margin:0 0 20px;
}
.trusted-brands-heading h2{
    margin:0;
    font-size:30px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.01em;
    text-transform:uppercase;
}
.brand-service-showcase.trusted-brands-module .showcase-slider{
    width:100% !important;
    height:340px !important;
    min-height:340px !important;
    border-radius:30px;
}
.brand-service-showcase.trusted-brands-module .showcase-slide{
    width:100%;
    border-radius:30px;
}
.trusted-brands-module .showcase-content{
    padding:40px 120px;
}
.trusted-brands-module .showcase-brand-logo-frame{
    min-width:260px;
    min-height:96px;
    padding:0;
}
.trusted-brands-module .showcase-brand-logo{
    width:auto;
    height:auto;
    max-width:280px;
    max-height:90px;
    object-fit:contain;
}
.trusted-brands-module .showcase-brand-logo--acer{
    max-width:320px;
    max-height:96px;
}
.trusted-brands-module .showcase-brand-logo--tp-link{
    max-width:300px;
    max-height:90px;
    filter:none;
}
.trusted-brands-module .showcase-brand-logo--logitech{
    max-width:260px;
    max-height:82px;
}
.trusted-brands-module .showcase-brand-content>span:not(.showcase-brand-logo-frame):not(.showcase-brand-wordmark){
    max-width:680px;
    margin-top:14px;
    font-size:16px;
}
.trusted-brands-module .showcase-brand-content>strong{
    margin-top:20px;
}
.trusted-brands-module .showcase-dots{
    display:none !important;
}
.brand-quick-selection{
    width:100%;
    margin-top:28px;
    grid-template-columns:repeat(9,minmax(120px,1fr));
    gap:14px;
}
.brand-quick-chip{
    width:100%;
    min-width:120px;
    min-height:86px;
    padding:14px 12px;
    border-radius:18px;
}
.brand-quick-chip img{
    width:auto;
    height:auto;
    max-width:95px;
    max-height:35px;
    object-fit:contain;
}
.brand-quick-chip[data-brand-index="7"] img{
    max-width:105px;
    max-height:38px;
}
.google-reviews{
    margin-top:72px;
}
@media (max-width:1260px){
    .brand-quick-selection{
        grid-template-columns:repeat(5,minmax(120px,1fr));
    }
}
@media (max-width:980px){
    .brand-service-showcase.trusted-brands-module .showcase-slider{
        height:310px !important;
        min-height:310px !important;
        border-radius:24px;
    }
    .trusted-brands-module .showcase-content{padding:34px 82px}
    .brand-quick-selection{
        grid-template-columns:repeat(4,minmax(120px,1fr));
    }
}
@media (max-width:640px){
    .brand-service-showcase.trusted-brands-module.site-container{
        margin-top:56px;
    }
    .trusted-brands-heading h2{font-size:24px}
    .brand-service-showcase.trusted-brands-module .showcase-slider{
        height:250px !important;
        min-height:250px !important;
        border-radius:20px;
    }
    .trusted-brands-module .showcase-content{padding:28px 58px}
    .trusted-brands-module .showcase-brand-logo-frame{
        min-width:180px;
        min-height:70px;
    }
    .trusted-brands-module .showcase-brand-logo{
        max-width:180px;
        max-height:58px;
    }
    .trusted-brands-module .showcase-brand-logo--acer{max-width:220px;max-height:66px}
    .trusted-brands-module .showcase-brand-logo--tp-link{max-width:205px;max-height:62px}
    .trusted-brands-module .showcase-brand-content>span:not(.showcase-brand-logo-frame):not(.showcase-brand-wordmark){
        margin-top:8px;
        font-size:13px;
        line-height:1.45;
    }
    .trusted-brands-module .showcase-brand-content>strong{
        margin-top:12px;
        padding:10px 15px;
        font-size:11px;
    }
    .brand-quick-selection{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:12px;
        padding-bottom:5px;
    }
    .brand-quick-chip{
        flex:0 0 138px;
        width:138px;
        min-width:138px;
        min-height:82px;
    }
}

/* Trusted Brands visual refinement — 17 Jul */
.trusted-brands-heading h2{
    font-size:clamp(24px,1.9vw,28px) !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
}
.brand-service-showcase.trusted-brands-module .showcase-slider{
    height:350px !important;
    min-height:350px !important;
    border-radius:24px !important;
    background:#101720;
}
.brand-service-showcase.trusted-brands-module .showcase-slide::after,
.brand-service-showcase.trusted-brands-module [data-showcase-slider="brands"] .showcase-slide::after{
    background:rgba(5,10,17,.60) !important;
}
.brand-service-showcase.trusted-brands-module .showcase-background{
    filter:brightness(.96) saturate(1.08) !important;
    object-position:center !important;
}
.trusted-brands-module .showcase-content{
    padding:38px 118px !important;
}
.trusted-brands-module .showcase-brand-logo-frame{
    min-width:220px !important;
    min-height:86px !important;
}
.trusted-brands-module .showcase-brand-logo{
    max-width:250px !important;
    max-height:86px !important;
    object-fit:contain !important;
}
.trusted-brands-module .showcase-brand-logo--acer,
.trusted-brands-module .showcase-brand-logo--tp-link{
    max-width:260px !important;
    max-height:90px !important;
}
.trusted-brands-module .showcase-brand-logo--hp{max-width:220px !important}
.trusted-brands-module .showcase-brand-logo--hikvision{max-width:250px !important}
.trusted-brands-module .showcase-brand-logo-frame + span,
.trusted-brands-module .showcase-brand-wordmark + span,
.trusted-brands-module .showcase-brand-content>span:not(.showcase-brand-logo-frame):not(.showcase-brand-wordmark){
    max-width:720px !important;
    margin-top:22px !important;
    font-size:19px !important;
    line-height:1.5 !important;
}
.trusted-brands-module .showcase-brand-content>strong{
    min-height:50px !important;
    margin-top:24px !important;
    padding:0 24px !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1 !important;
}
.brand-quick-selection{
    margin-top:26px !important;
    grid-template-columns:repeat(9,minmax(120px,165px)) !important;
    justify-content:space-between !important;
    gap:15px !important;
}
.brand-quick-chip{
    width:100% !important;
    min-width:120px !important;
    max-width:165px !important;
    height:86px !important;
    min-height:86px !important;
    padding:14px 16px !important;
    border-radius:19px !important;
}
.brand-quick-chip img{
    width:105px !important;
    height:34px !important;
    max-width:105px !important;
    max-height:34px !important;
    object-fit:contain !important;
    transform-origin:center;
}
.brand-quick-chip[data-brand-index="0"] img{transform:scale(1.14)}
.brand-quick-chip[data-brand-index="1"] img{transform:scale(.98)}
.brand-quick-chip[data-brand-index="2"] img{transform:scale(1.02)}
.brand-quick-chip[data-brand-index="3"] img{transform:scale(1.09)}
.brand-quick-chip[data-brand-index="4"] img{transform:scale(1.04)}
.brand-quick-chip[data-brand-index="5"] img{transform:scale(1)}
.brand-quick-chip[data-brand-index="6"] img{transform:scale(.90)}
.brand-quick-chip[data-brand-index="7"] img{transform:scale(.96)}
.brand-quick-chip[data-brand-index="8"] img{transform:scale(.96)}
@media (max-width:1260px){
    .brand-quick-selection{
        grid-template-columns:repeat(5,minmax(120px,165px)) !important;
        justify-content:center !important;
    }
}
@media (max-width:980px){
    .brand-service-showcase.trusted-brands-module .showcase-slider{
        height:310px !important;
        min-height:310px !important;
    }
    .trusted-brands-module .showcase-content{padding:32px 78px !important}
    .trusted-brands-module .showcase-brand-logo{max-width:220px !important;max-height:74px !important}
    .trusted-brands-module .showcase-brand-logo-frame + span,
    .trusted-brands-module .showcase-brand-content>span:not(.showcase-brand-logo-frame):not(.showcase-brand-wordmark){
        margin-top:18px !important;
        font-size:17px !important;
    }
    .trusted-brands-module .showcase-brand-content>strong{
        min-height:48px !important;
        margin-top:20px !important;
    }
    .brand-quick-selection{
        grid-template-columns:repeat(4,minmax(120px,165px)) !important;
    }
}
@media (max-width:640px){
    .brand-service-showcase.trusted-brands-module .showcase-slider{
        height:250px !important;
        min-height:250px !important;
    }
    .trusted-brands-module .showcase-content{padding:24px 54px !important}
    .trusted-brands-module .showcase-brand-logo-frame{min-width:150px !important;min-height:58px !important}
    .trusted-brands-module .showcase-brand-logo,
    .trusted-brands-module .showcase-brand-logo--acer,
    .trusted-brands-module .showcase-brand-logo--tp-link{
        max-width:170px !important;
        max-height:56px !important;
    }
    .trusted-brands-module .showcase-brand-logo-frame + span,
    .trusted-brands-module .showcase-brand-content>span:not(.showcase-brand-logo-frame):not(.showcase-brand-wordmark){
        margin-top:12px !important;
        font-size:13px !important;
        line-height:1.4 !important;
    }
    .trusted-brands-module .showcase-brand-content>strong{
        min-height:42px !important;
        margin-top:14px !important;
        padding:0 16px !important;
        font-size:11px !important;
    }
    .brand-quick-selection{
        display:flex !important;
        justify-content:flex-start !important;
        gap:12px !important;
    }
    .brand-quick-chip{
        flex:0 0 140px !important;
        width:140px !important;
        min-width:140px !important;
        max-width:140px !important;
        height:84px !important;
        min-height:84px !important;
    }
}

/* ==================================================
   TRUSTED BRANDS — FINAL SIZE ADJUSTMENT
   Final override: class names match index.php
================================================== */

/* Keseluruhan section */
.trusted-brands-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 38px 0 50px !important;
}

/* Hadkan lebar content supaya tidak nampak terlalu full */
.trusted-brands-container {
    width: min(88%, 1380px) !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
}

/* Tajuk */
.trusted-brands-title {
    margin: 0 0 22px !important;
    color: #111216 !important;
    font-size: clamp(28px, 2.2vw, 38px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ==================================================
   BANNER BESAR
================================================== */
.trusted-brand-banner {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    overflow: hidden !important;
    border-radius: 62px !important;
    background: #101720 !important;
    box-shadow: 0 16px 40px rgba(21, 25, 38, 0.10) !important;
}

.trusted-brand-slide {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    overflow: hidden !important;
    color: #ffffff !important;
    text-decoration: none !important;
    isolation: isolate !important;
}

/* Matikan overlay lama dan gunakan overlay terkawal */
.trusted-brand-slide::after {
    display: none !important;
}

.trusted-brand-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(8, 12, 18, 0.76) 0%,
        rgba(8, 12, 18, 0.62) 45%,
        rgba(8, 12, 18, 0.32) 100%
    );
    pointer-events: none;
}

.trusted-brand-background {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 78% center !important;
    filter: none !important;
}

/* Kandungan dalam banner */
.trusted-brand-content {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: min(620px, 70%) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 42px 28px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #ffffff !important;
}

.trusted-brand-content .showcase-brand-logo-frame {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
}

/* Logo brand dalam banner */
.trusted-brand-content img,
.trusted-brand-main-logo {
    width: auto !important;
    max-width: 210px !important;
    max-height: 62px !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    filter: brightness(0) invert(1) !important;
}

/* Logo SVG yang memang berwarna/putih kekal bersih */
.trusted-brand-main-logo.showcase-brand-logo--tp-link,
.trusted-brand-main-logo.showcase-brand-logo--logitech,
.trusted-brand-main-logo.showcase-brand-logo--hikvision {
    max-width: 210px !important;
    max-height: 62px !important;
}

.trusted-brand-content .showcase-brand-wordmark {
    margin: 0 0 20px !important;
    color: #ffffff !important;
    font-size: 52px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Description */
.trusted-brand-description,
.trusted-brand-content > .trusted-brand-description {
    max-width: 650px !important;
    margin: 0 0 22px !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
}

/* Button */
.trusted-brand-button,
.trusted-brand-content > .trusted-brand-button {
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    backdrop-filter: blur(8px);
    transition: 0.25s ease !important;
}

.trusted-brand-button .icon {
    width: 15px !important;
    height: 15px !important;
}

.trusted-brand-slide:hover .trusted-brand-button,
.trusted-brand-button:hover {
    background: #ffffff !important;
    color: #4f2ee8 !important;
    transform: translateY(-2px) !important;
}

/* Arrow kiri dan kanan */
.trusted-brand-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 3 !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #111827 !important;
    cursor: pointer !important;
    transform: translateY(-50%) !important;
    transition: 0.25s ease !important;
}

.trusted-brand-arrow:hover {
    transform: translateY(-50%) scale(1.06) !important;
}

.trusted-brand-arrow.prev {
    left: 24px !important;
}

.trusted-brand-arrow.next {
    right: 24px !important;
}

.trusted-brand-arrow .icon {
    width: 18px !important;
    height: 18px !important;
}

/* ==================================================
   BRAND CARDS KECIL
================================================== */
.trusted-brand-list {
    width: 100% !important;
    margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    justify-content: normal !important;
    gap: 10px !important;
}

.trusted-brand-card {
    width: 100% !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    box-shadow: 0 5px 14px rgba(24, 32, 54, 0.035) !important;
    transition: 0.22s ease !important;
}

.trusted-brand-card:hover {
    border-color: #8268ff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(79, 46, 232, 0.09) !important;
}

.trusted-brand-card img {
    width: 84px !important;
    max-width: 84px !important;
    height: 28px !important;
    max-height: 28px !important;
    display: block !important;
    object-fit: contain !important;
    transform: none !important;
}

.trusted-brand-card span {
    color: #1a2130 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.trusted-brand-card.active,
.trusted-brand-card.is-active {
    border-color: #6847ff !important;
    background: #f8f6ff !important;
    box-shadow: 0 6px 16px rgba(104, 71, 255, 0.10) !important;
}

/* Elak jarak berganda sebelum Google Reviews */
.trusted-brands-section + .google-reviews {
    margin-top: 0 !important;
}

/* ==================================================
   RESPONSIVE
================================================== */
@media (max-width: 1200px) {
    .trusted-brands-container {
        width: min(92%, 1180px) !important;
    }

    .trusted-brand-list {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .trusted-brands-section {
        padding: 28px 0 38px !important;
    }

    .trusted-brands-container {
        width: calc(100% - 32px) !important;
    }

    .trusted-brands-title {
        margin-bottom: 18px !important;
        font-size: 26px !important;
    }

    .trusted-brand-banner {
        height: 280px !important;
        min-height: 280px !important;
        border-radius: 42px !important;
    }

    .trusted-brand-content {
        width: 82% !important;
        padding: 34px 48px !important;
    }

    .trusted-brand-description,
    .trusted-brand-content > .trusted-brand-description {
        font-size: 15px !important;
    }

    .trusted-brand-arrow {
        width: 42px !important;
        height: 42px !important;
    }

    .trusted-brand-arrow.prev {
        left: 12px !important;
    }

    .trusted-brand-arrow.next {
        right: 12px !important;
    }

    .trusted-brand-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        scrollbar-width: none;
    }

    .trusted-brand-list::-webkit-scrollbar {
        display: none;
    }

    .trusted-brand-card {
        flex: 0 0 112px !important;
        width: 112px !important;
        max-width: 112px !important;
        height: 60px !important;
        min-height: 60px !important;
    }
}

@media (max-width: 480px) {
    .trusted-brand-banner {
        height: 260px !important;
        min-height: 260px !important;
    }

    .trusted-brand-content {
        width: 88% !important;
        padding: 30px 44px !important;
    }

    .trusted-brand-content img,
    .trusted-brand-main-logo {
        max-width: 160px !important;
        max-height: 48px !important;
    }

    .trusted-brand-description,
    .trusted-brand-content > .trusted-brand-description {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .trusted-brand-button,
    .trusted-brand-content > .trusted-brand-button {
        min-height: 42px !important;
        padding: 9px 17px !important;
        font-size: 13px !important;
    }
}


/* =========================================================
   DESKTOP NAVBAR — SLIGHTLY REDUCED VERTICAL SPACE
   ========================================================= */
@media (min-width:981px){
    :root{
        --desktop-header-height:76px;
        --desktop-nav-height:54px;
    }
    .top-header,
    .header-inner{
        min-height:var(--desktop-header-height);
    }
    .main-nav{
        top:var(--desktop-header-height);
        height:var(--desktop-nav-height);
    }
    .logo-link img{
        height:52px;
        max-height:52px;
    }
}