/* COMPS motion and component refresh */
:root{--magic-ink:#112441;--magic-blue:#2563eb;--magic-mint:#09a69b}html{scroll-behavior:smooth}body{overflow-x:clip}img{max-width:100%}.magic-wrap{width:min(1180px,calc(100% - 40px));margin:auto}.magic-section{padding:84px 0;background:#fff;color:var(--magic-ink)}.magic-section.magic-soft{background:linear-gradient(145deg,#f1f6ff,#f8fffe)}.magic-kicker{font-size:.78rem;letter-spacing:.17em;font-weight:800;color:var(--magic-blue);text-transform:uppercase}.magic-head{text-align:center;max-width:760px;margin:0 auto 38px}.magic-head h2{font-size:clamp(2rem,3.7vw,3.1rem);line-height:1.12;letter-spacing:-.04em;margin:10px 0 15px;color:var(--magic-ink)}.magic-head p{color:#60728a;line-height:1.7}.magic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px}.magic-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid #dce7f5;background:#fff;border-radius:24px;padding:20px;box-shadow:0 10px 30px #17335a0a;transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s,border-color .38s}.magic-card:before{content:'';position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#2563eb,#09b8a9);transform:scaleX(0);transform-origin:left;transition:transform .35s}.magic-card:hover{transform:translateY(-9px);box-shadow:0 24px 55px #17335a20;border-color:#9fc5fa}.magic-card:hover:before{transform:scaleX(1)}.magic-image{display:grid;place-items:center;height:185px;border-radius:17px;background:radial-gradient(circle at 60% 38%,#fff,#e8f1ff 80%);margin-bottom:22px}.magic-image img{width:100%;height:160px;object-fit:contain;transition:transform .5s}.magic-card:hover .magic-image img{transform:scale(1.06) rotate(-1deg)}.magic-card h3{font-size:1.14rem;color:#132a48;margin:0 0 10px}.magic-card p{font-size:.94rem;color:#65748a;line-height:1.65;min-height:77px}.magic-button{display:inline-flex;align-items:center;justify-content:center;background:#155ee7;color:#fff!important;text-decoration:none!important;padding:12px 17px;border-radius:12px;font-size:.89rem;font-weight:800;transition:background .25s,transform .25s}.magic-button:hover{background:#0a409e;transform:translateY(-2px)}.magic-button:focus-visible{outline:3px solid #ffbc3e;outline-offset:3px}.magic-brands{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin:25px auto}.magic-brands a{border:1px solid #d9e5f7;background:#fff;color:#17385f;padding:10px 17px;border-radius:50px;font-weight:750;text-decoration:none;transition:transform .25s,background .25s}.magic-brands a:hover{background:#eaf3ff;transform:translateY(-3px)}.magic-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;max-width:850px;margin:auto}.magic-choice div{padding:19px 21px;border-radius:16px;background:#fff;border:1px solid #dce7f5;box-shadow:0 8px 25px #102b5108;font-weight:650}.magic-choice div:before{content:'✓';font-weight:900;color:#08a38b;margin-right:10px}.magic-cta{text-align:center;background:linear-gradient(125deg,#102644,#1c5b9c);color:white;padding:51px 24px;border-radius:27px;box-shadow:0 20px 46px #102b5120}.magic-cta h2{color:white;font-size:clamp(1.8rem,3vw,2.7rem);margin:0 0 12px}.magic-cta p{color:#d1e3f6}.magic-brandlead{padding:28px 0 55px;background:linear-gradient(135deg,#eff6ff,#f2fffc);text-align:center}.magic-brandlead p{max-width:780px;margin:0 auto;color:#5e718c}.magic-note{font-size:.87rem;color:#708097;text-align:center;margin-top:23px}.magic-review{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:24px}.magic-review b{font-size:1.65rem;color:#182a45}.magic-review .magic-stars{color:#e9a900;letter-spacing:2px}.magic-float{animation:magicFloat 5s ease-in-out infinite}@keyframes magicFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.magic-float{animation:none}.magic-card,.magic-card:before,.magic-image img,.magic-button,.magic-brands a{transition:none!important}}@media(max-width:950px){.magic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.magic-section{padding:54px 0}.magic-grid,.magic-choice{grid-template-columns:1fr}.magic-card p{min-height:0}.magic-image{height:165px}.magic-image img{height:145px}.magic-wrap{width:calc(100% - 30px)}}

/* ===== COMPS Magic Box Refresh ===== */
:root{
  --box-line:#dbe7f7;
  --box-shadow:0 16px 42px rgba(17,36,65,.10);
  --box-shadow-hover:0 24px 56px rgba(17,36,65,.16);
  --box-grad:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  --box-accent:linear-gradient(90deg,#2563eb 0%,#09a69b 100%);
}
.single-counter,
.single_tp,
.single_course,
.item-card,
.info-tile,
.blog-card,
.contact-card,
.cat_list_two{
  position:relative;
  overflow:hidden;
  border:1px solid var(--box-line)!important;
  border-radius:28px!important;
  background:var(--box-grad)!important;
  box-shadow:var(--box-shadow)!important;
  transition:transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s, border-color .38s, background .38s;
}
.single-counter::before,
.single_tp::before,
.single_course::before,
.item-card::before,
.info-tile::before,
.blog-card::before,
.contact-card::before,
.cat_list_two::before{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:var(--box-accent);
  transform:scaleX(.22);
  transform-origin:left center;
  transition:transform .35s ease;
}
.single-counter::after,
.single_tp::after,
.single_course::after,
.item-card::after,
.info-tile::after,
.blog-card::after,
.contact-card::after,
.cat_list_two::after{
  content:'';
  position:absolute;
  width:180px;
  height:180px;
  right:-70px;
  top:-70px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.14) 0%,rgba(37,99,235,0) 68%);
  pointer-events:none;
}
.single-counter:hover,
.single_tp:hover,
.single_course:hover,
.item-card:hover,
.info-tile:hover,
.blog-card:hover,
.contact-card:hover,
.cat_list_two:hover{
  transform:translateY(-10px);
  box-shadow:var(--box-shadow-hover)!important;
  border-color:#9ec2f7!important;
}
.single-counter:hover::before,
.single_tp:hover::before,
.single_course:hover::before,
.item-card:hover::before,
.info-tile:hover::before,
.blog-card:hover::before,
.contact-card:hover::before,
.cat_list_two:hover::before{transform:scaleX(1)}

.count_area{padding-top:8px}
.single-counter{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:24px 22px!important;
  min-height:170px;
}
.single-counter span{
  float:none!important;
  width:56px!important;
  min-width:56px;
  height:56px!important;
  line-height:56px!important;
  border-radius:18px!important;
  margin-right:0!important;
  font-size:24px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px rgba(82,95,225,.15);
}
.single-counter h3{
  margin:0!important;
  font-size:clamp(1.15rem,2.2vw,1.45rem);
  line-height:1.2;
  color:#112441;
}
.single-counter strong{font-weight:800}

.single_tp{
  display:grid;
  grid-template-columns:72px 1fr;
  align-items:start;
  gap:18px;
  padding:28px 22px!important;
  border-radius:30px!important;
  min-height:100%;
}
.single_tp span{
  float:none!important;
  width:72px!important;
  height:72px!important;
  line-height:72px!important;
  margin:0!important;
  border-radius:24px!important;
  font-size:2rem!important;
  font-weight:800!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 26px rgba(17,36,65,.10);
}
.single_tp h3{
  margin:6px 0 0!important;
  font-size:1.65rem!important;
  line-height:1.1!important;
  color:#112441;
}
.single_tp p{
  grid-column:1 / -1;
  margin:6px 0 0!important;
  color:#566a83;
  line-height:1.85;
  font-size:1rem;
}

.cat_list ul{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
}
.cat_list li{
  margin:0!important;
  border:1px solid var(--box-line)!important;
  box-shadow:0 12px 32px rgba(17,36,65,.08);
  border-radius:999px!important;
  overflow:hidden;
  background:rgba(255,255,255,.92)!important;
}
.cat_list ul li a{
  padding:12px 22px 12px 12px!important;
  color:#28405f!important;
  font-weight:700;
  letter-spacing:.01em;
}
.cat_list ul li a img{
  width:56px!important;
  height:56px!important;
  margin-right:14px!important;
  border:5px solid #edf3ff!important;
  box-shadow:0 8px 20px rgba(17,36,65,.10);
}
.cat_list ul li:hover{
  background:linear-gradient(135deg,#155ee7,#0a8f86)!important;
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(17,36,65,.16);
}
.cat_list ul li:hover a{color:#fff!important}

.home_course{background:linear-gradient(180deg,#f7faff 0%,#f3f7fc 100%)!important}
.single_course{
  padding:18px 18px 0!important;
  text-align:left!important;
}
.single_c_img{
  margin:0 0 18px!important;
  position:relative;
}
.single_c_img img{
  width:100%!important;
  height:235px;
  object-fit:contain;
  background:radial-gradient(circle at 50% 32%,#ffffff 0%,#edf4ff 84%);
  border-radius:22px;
  padding:18px;
}
.single_c_img span{
  position:absolute!important;
  left:14px!important;
  top:14px!important;
  bottom:auto!important;
  transform:none!important;
  border-radius:999px!important;
  padding:8px 14px!important;
  font-size:.78rem!important;
  letter-spacing:.03em;
  box-shadow:0 10px 22px rgba(17,36,65,.12);
}
.single_course i{
  margin-top:2px;
  font-size:.92rem;
}
.single_course h4{padding:0!important; margin:14px 0 12px!important}
.single_course h4 a{
  font-size:1.28rem!important;
  line-height:1.35!important;
  color:#112441;
}
.single_course p{
  display:inline-flex!important;
  align-items:center;
  gap:4px;
  margin:0 10px 6px 0!important;
  color:#5a6f88;
  font-size:.96rem;
}
.single_course .price{
  margin:16px -18px 0!important;
  padding:16px 20px 18px!important;
  font-size:1rem!important;
  border-top:1px solid #e7eef9!important;
  background:linear-gradient(180deg,#fbfdff 0%,#f1f6ff 100%)!important;
  color:#1759c8!important;
  border-radius:0 0 28px 28px!important;
}
.single_course:hover .price{color:#0a8f86!important}

.item-card .item-photo,
.blog-card img{
  background:radial-gradient(circle at 50% 30%,#ffffff 0%,#edf4ff 80%)!important;
}
.item-card .item-photo img,
.blog-card img,
.single_c_img img{transition:transform .45s ease}
.item-card:hover .item-photo img,
.blog-card:hover img,
.single_course:hover .single_c_img img{transform:scale(1.05) translateY(-2px)}
.item-card .item-body,
.blog-card>div{padding:26px!important}
.item-card .pill{
  background:#edf4ff!important;
  color:#1759c8!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.info-tile,
.contact-card{padding:26px!important}

@media (max-width:991px){
  .single-counter{min-height:auto}
  .single_tp h3{font-size:1.38rem!important}
}
@media (max-width:767px){
  .single-counter{padding:20px!important}
  .single_tp{grid-template-columns:64px 1fr;padding:22px 18px!important}
  .single_tp span{width:64px!important;height:64px!important;line-height:64px!important;border-radius:20px!important;font-size:1.7rem!important}
  .single_tp h3{font-size:1.25rem!important}
  .cat_list ul{gap:12px}
  .cat_list li{width:100%;border-radius:24px!important}
  .cat_list ul li a{width:100%;justify-content:flex-start;padding-right:14px!important}
  .single_c_img img{height:220px}
}
@media(prefers-reduced-motion:reduce){
  .single-counter,.single_tp,.single_course,.item-card,.info-tile,.blog-card,.contact-card,.cat_list li,.cat_list_two{transition:none!important}
  .item-card .item-photo img,.blog-card img,.single_c_img img{transition:none!important}
}


/* COMPS homepage: enlarged logo showcase. */
.comps-brand-showcase .magic-wrap{width:min(1200px,calc(100% - 36px))}
.comps-brand-showcase .magic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.comps-brand-showcase .magic-card{display:flex;flex-direction:column;padding:23px;border-radius:27px;min-width:0}
.comps-brand-showcase .magic-image{height:220px;margin-bottom:20px;border-radius:21px;background:linear-gradient(145deg,#f5f9ff,#eaf3ff);overflow:hidden}
.comps-brand-showcase .magic-image img{display:block;width:94%;height:90%;max-width:100%;object-fit:contain}
.comps-brand-showcase .magic-card h3{font-size:1.4rem;line-height:1.2;margin:0 0 9px}
.comps-brand-showcase .magic-card p{font-size:1rem;line-height:1.6;min-height:0;margin:0 0 18px;flex:1}
.comps-brand-showcase .magic-button{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.comps-brand-showcase .magic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.comps-brand-showcase .magic-grid{grid-template-columns:1fr;gap:17px}.comps-brand-showcase .magic-image{height:195px}.comps-brand-showcase .magic-card{padding:19px}}
@media(prefers-reduced-motion:reduce){.comps-brand-showcase .magic-card:hover .magic-image img{transform:none}}


/* Index brand logo refinement */
.comps-brand-showcase .magic-image .brand-logo{display:block;max-width:100%;max-height:100%;object-fit:contain;margin:auto}
.comps-brand-showcase .magic-image .brand-logo-epson{width:90%;height:82%}
.comps-brand-showcase .magic-image .brand-logo-hp{width:72%;height:72%}
.comps-brand-showcase .magic-image .brand-logo-canon{width:86%;height:72%}
.comps-brand-showcase .magic-image .brand-logo-brother{width:88%;height:76%}
.comps-brand-showcase .magic-image .brand-logo-tvs{width:80%;height:76%}
.comps-brand-showcase .magic-image .brand-logo-rapoo{width:90%;height:68%}
@media(max-width:580px){
  .comps-brand-showcase .magic-image .brand-logo-hp{width:68%;height:68%}
}


/* Modern category section for index */
.comps-category-modern{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,212,120,.22), transparent 35%),
    radial-gradient(circle at 82% 18%, rgba(37,99,235,.10), transparent 30%),
    linear-gradient(135deg,#fffdf8 0%,#f5f8ff 100%);
}
.comps-category-modern .section-title{max-width:980px;margin:0 auto 36px}
.comps-category-modern .section-title h2{margin-bottom:16px}
.comps-category-modern .modern-cat-lead{
  font-size:1.08rem;
  line-height:1.85;
  color:#526681;
  max-width:920px;
  margin:0 auto;
}
.brand-solution-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.brand-solution-card{
  position:relative;
  overflow:hidden;
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:22px;
  border-radius:28px;
  border:1px solid #dbe6f5;
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 38px rgba(17,36,65,.08);
  backdrop-filter: blur(6px);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.brand-solution-card::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#08a38b);
  transform:scaleX(.25);
  transform-origin:left center;
  transition:transform .35s ease;
}
.brand-solution-card:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(17,36,65,.14);border-color:#9dbff3}
.brand-solution-card:hover::before{transform:scaleX(1)}
.brand-solution-logo{
  width:86px;
  min-width:86px;
  height:86px;
  border-radius:22px;
  background:linear-gradient(145deg,#f6faff,#edf4ff);
  border:1px solid #e1eaf7;
  display:grid;
  place-items:center;
  padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.brand-solution-logo img{max-width:100%;max-height:58px;object-fit:contain}
.brand-solution-content{flex:1;min-width:0}
.brand-solution-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:#edf4ff;
  color:#1759c8;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.brand-solution-content h3{
  margin:0 0 10px;
  font-size:1.34rem;
  line-height:1.2;
  color:#112441;
}
.brand-solution-content p{
  margin:0 0 16px;
  color:#5c6f87;
  line-height:1.75;
  font-size:.97rem;
}
.brand-solution-actions{display:flex;gap:10px;flex-wrap:wrap}
.brand-link-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 15px;
  border-radius:12px;
  border:1px solid #dbe6f5;
  background:#fff;
  color:#18385f;
  font-weight:700;
  text-decoration:none!important;
  transition:transform .25s ease, border-color .25s ease, color .25s ease;
}
.brand-link-secondary:hover{transform:translateY(-2px);border-color:#86adeb;color:#0f58d8}
@media(max-width:991px){
  .brand-solution-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .brand-solution-grid{grid-template-columns:1fr}
  .brand-solution-card{padding:18px;gap:14px;border-radius:24px}
  .brand-solution-logo{width:74px;min-width:74px;height:74px;border-radius:18px}
  .brand-solution-logo img{max-height:48px}
  .comps-category-modern .modern-cat-lead{font-size:1rem}
}