
/* RemoteITSupport Precision Visual Fix
   Final correction for homepage 40/60 layout, compact trust, rich services/quick-fix cards, and footer alignment. */

/* HOME HERO: text reduced, image gets more horizontal space */
.home-page .hero,
body:not(.services-page):not(.quick-page):not(.packages-page):not(.about-page):not(.contact-page) .hero{
  min-height:72vh!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.78fr) minmax(620px,1.32fr)!important;
  gap:40px!important;
  align-items:center!important;
  padding-top:38px!important;
  padding-bottom:42px!important;
}

.hero-content,
.hero-copy{
  max-width:650px!important;
}

.hero-content .kicker,
.hero-copy .kicker{
  font-size:.85rem!important;
  padding:9px 15px!important;
  margin-bottom:16px!important;
}

.hero-content h1,
.hero-copy h1{
  font-size:clamp(2.25rem,3.35vw,3.85rem)!important;
  line-height:1.08!important;
  letter-spacing:-1px!important;
  max-width:650px!important;
  margin-bottom:16px!important;
}

.hero-content .lead,
.hero-copy .lead,
.hero-content p,
.hero-copy p{
  font-size:1rem!important;
  line-height:1.65!important;
  max-width:640px!important;
  margin-bottom:18px!important;
}

.hero-actions,
.cta-row{
  gap:12px!important;
  margin-top:18px!important;
}

.hero-actions .btn,
.cta-row .btn{
  padding:13px 20px!important;
  font-size:.94rem!important;
}

.hero-visual{
  position:relative!important;
  height:58vh!important;
  min-height:520px!important;
  max-height:650px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px!important;
}

.hero-card{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  border-radius:36px!important;
}

.hero-screen{
  display:none!important;
}

.hero-slider{
  position:relative;
  width:100%;
  height:100%;
  min-height:520px;
  border-radius:36px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04) inset;
  background:#07101d;
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.05s ease,transform 5.5s ease;
}

.hero-slide.active{
  opacity:1;
  transform:scale(1);
  z-index:2;
}

.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.75) saturate(1.1) contrast(1.05);
}

.hero-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,7,19,.16),rgba(5,7,19,.02),rgba(5,7,19,.48)),
    linear-gradient(to top,rgba(3,8,20,.62),rgba(3,8,20,.04)),
    radial-gradient(circle at top left,rgba(0,229,255,.14),transparent 36%),
    radial-gradient(circle at bottom right,rgba(255,61,184,.14),transparent 42%);
  z-index:3;
  pointer-events:none;
}

.hero-badge-floating{
  position:absolute;
  z-index:4;
  backdrop-filter:blur(16px);
  background:rgba(8,13,32,.72);
  border:1px solid rgba(255,255,255,.12);
  padding:11px 17px;
  border-radius:16px;
  color:#fff;
  font-weight:800;
  font-size:.92rem;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  animation:floatY 5s ease-in-out infinite;
}
.badge-top{top:24px;left:24px}
.badge-bottom{bottom:24px;right:24px;animation-delay:1s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ABOUT PAGE: modern background behind logo/details area, readable */
.logo-showcase,
.about-page .logo-showcase,
.about-page .card.logo-showcase{
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(135deg,rgba(5,7,19,.82),rgba(5,7,19,.58)),
    url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?auto=format&fit=crop&w=1600&q=88') center/cover!important;
  border:1px solid rgba(255,255,255,.16)!important;
}
.logo-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 25%,rgba(0,229,255,.20),transparent 38%),
    radial-gradient(circle at 82% 80%,rgba(255,61,184,.18),transparent 42%),
    linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.32));
  pointer-events:none;
  z-index:0;
}
.logo-showcase>*{
  position:relative!important;
  z-index:1!important;
}

/* SERVICES: colorful icons and background images, text always readable */
.service-card,
.category-card,
.seo-category-card{
  position:relative!important;
  overflow:hidden!important;
  min-height:282px!important;
  border:1px solid rgba(255,255,255,.14)!important;
}

.service-card::after,
.category-card::after,
.seo-category-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,7,19,.72),rgba(5,7,19,.92)),
    var(--service-bg,url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1000&q=82')) center/cover;
  z-index:0;
  pointer-events:none;
}

.service-card::before,
.category-card::before,
.seo-category-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 25% 20%,rgba(0,229,255,.16),transparent 34%),radial-gradient(circle at 90% 90%,rgba(255,61,184,.14),transparent 38%);
  z-index:1!important;
  pointer-events:none!important;
}

.service-card>*,
.category-card>*,
.seo-category-card>*{
  position:relative!important;
  z-index:2!important;
}

.service-card .icon,
.category-card .icon,
.seo-category-card .icon,
.service-card .category-icon,
.category-card .category-icon{
  width:70px!important;
  height:70px!important;
  border-radius:24px!important;
  background:conic-gradient(from 160deg,#00e5ff,#38f5a3,#5b7cfa,#ff3db8,#00e5ff)!important;
  color:#06101f!important;
  box-shadow:0 18px 45px rgba(0,229,255,.25)!important;
  border:1px solid rgba(255,255,255,.18)!important;
}

.service-card h3,
.category-card h3,
.seo-category-card h3{
  color:#fff!important;
  text-shadow:0 2px 18px rgba(0,0,0,.55)!important;
}

.service-card p,
.category-card p,
.seo-category-card p{
  color:#dceaff!important;
  text-shadow:0 1px 14px rgba(0,0,0,.40)!important;
}

.service-card:nth-child(8n+1),.category-card:nth-child(8n+1),.seo-category-card:nth-child(8n+1){--service-bg:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1000&q=82')}
.service-card:nth-child(8n+2),.category-card:nth-child(8n+2),.seo-category-card:nth-child(8n+2){--service-bg:url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1000&q=82')}
.service-card:nth-child(8n+3),.category-card:nth-child(8n+3),.seo-category-card:nth-child(8n+3){--service-bg:url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1000&q=82')}
.service-card:nth-child(8n+4),.category-card:nth-child(8n+4),.seo-category-card:nth-child(8n+4){--service-bg:url('https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=1000&q=82')}
.service-card:nth-child(8n+5),.category-card:nth-child(8n+5),.seo-category-card:nth-child(8n+5){--service-bg:url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1000&q=82')}
.service-card:nth-child(8n+6),.category-card:nth-child(8n+6),.seo-category-card:nth-child(8n+6){--service-bg:url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=1000&q=82')}
.service-card:nth-child(8n+7),.category-card:nth-child(8n+7),.seo-category-card:nth-child(8n+7){--service-bg:url('https://images.unsplash.com/photo-1551808525-51a94da548ce?auto=format&fit=crop&w=1000&q=82')}
.service-card:nth-child(8n+8),.category-card:nth-child(8n+8),.seo-category-card:nth-child(8n+8){--service-bg:url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1000&q=82')}

/* QUICK FIXES: photo area, readable content, centered button */
.quick-card{
  position:relative!important;
  overflow:hidden!important;
  padding:172px 22px 24px!important;
  min-height:430px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  border:1px solid rgba(255,255,255,.14)!important;
}

.quick-card::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:16px;
  height:136px;
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(5,7,19,.02),rgba(5,7,19,.24)),
    var(--quick-bg,url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1000&q=82')) center/cover;
  z-index:0;
  box-shadow:0 16px 42px rgba(0,0,0,.28);
}

.quick-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,7,19,.06),rgba(5,7,19,.88) 42%,rgba(5,7,19,.96));
  z-index:1!important;
  pointer-events:none!important;
}

.quick-card>*{
  position:relative!important;
  z-index:2!important;
}

.quick-card .icon{
  position:absolute!important;
  top:105px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:68px!important;
  height:68px!important;
  border-radius:23px!important;
  background:conic-gradient(from 160deg,#00e5ff,#38f5a3,#5b7cfa,#ff3db8,#00e5ff)!important;
  color:#06101f!important;
  box-shadow:0 16px 38px rgba(0,229,255,.24)!important;
}

.quick-card h3{
  color:#fff!important;
  text-align:center!important;
}

.quick-card p{
  color:#dceaff!important;
  text-align:center!important;
}

.quick-card .price,
.quick-card .badge{
  align-self:center!important;
}

.quick-card .btn{
  align-self:center!important;
  margin-top:auto!important;
  text-align:center!important;
}

/* Quick card backgrounds. Printer card uses real copier/office equipment style imagery. */
.quick-card:nth-child(18n+1){--quick-bg:url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+2){--quick-bg:url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+3){--quick-bg:url('https://images.unsplash.com/photo-1612815154858-60aa4c59eaa6?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+4){--quick-bg:url('https://images.unsplash.com/photo-1596526131083-e8c633c948d2?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+5){--quick-bg:url('https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+6){--quick-bg:url('https://images.unsplash.com/photo-1633419461186-7d40a38105ec?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+7){--quick-bg:url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+8){--quick-bg:url('https://images.unsplash.com/photo-1581090700227-1e37b190418e?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+9){--quick-bg:url('https://images.unsplash.com/photo-1555949963-aa79dcee981c?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+10){--quick-bg:url('https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+11){--quick-bg:url('https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+12){--quick-bg:url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+13){--quick-bg:url('https://images.unsplash.com/photo-1512428559087-560fa5ceab42?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+14){--quick-bg:url('https://images.unsplash.com/photo-1526378722484-bd91ca387e72?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+15){--quick-bg:url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+16){--quick-bg:url('https://images.unsplash.com/photo-1587829741301-dc798b83add3?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+17){--quick-bg:url('https://images.unsplash.com/photo-1589903308904-1010c2294adc?auto=format&fit=crop&w=1000&q=82')}
.quick-card:nth-child(18n+18){--quick-bg:url('https://images.unsplash.com/photo-1603791440384-56cd371ee9a7?auto=format&fit=crop&w=1000&q=82')}

/* TRUST SECTION: compact, not stretched across full width awkwardly */
.trust-security-section{
  padding-top:70px!important;
  padding-bottom:70px!important;
}

.trust-grid,
.grid-5.trust-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(160px,1fr))!important;
  gap:16px!important;
  max-width:1180px!important;
  margin:0 auto!important;
}

.trust-card{
  min-height:205px!important;
  padding:20px!important;
  text-align:center!important;
  border-radius:22px!important;
}

.trust-icon{
  width:52px!important;
  height:52px!important;
  margin:0 auto 12px!important;
  border-radius:18px!important;
  font-size:1.45rem!important;
}

.trust-card h3{
  font-size:1rem!important;
  line-height:1.25!important;
}

.trust-card p{
  font-size:.88rem!important;
  line-height:1.55!important;
}

/* FOOTER: legal and payments aligned */
.footer{
  display:grid!important;
  grid-template-columns:1.55fr 1fr .9fr 1.25fr!important;
  align-items:start!important;
  gap:28px!important;
}

.footer-legal{
  align-self:start!important;
}

.payments{
  grid-column:auto!important;
  margin-top:0!important;
  padding-top:0!important;
  border-top:0!important;
  align-self:start!important;
}

.payment-logo-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(64px,1fr))!important;
  gap:8px!important;
  max-width:290px!important;
}

.copyright{
  color:#b8c7e7!important;
  font-size:.88rem!important;
  margin-top:12px!important;
}

@media(max-width:1180px){
  .home-page .hero,
  body:not(.services-page):not(.quick-page):not(.packages-page):not(.about-page):not(.contact-page) .hero{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  .hero-visual{
    min-height:430px!important;
    height:430px!important;
  }
  .hero-slider{
    min-height:430px!important;
  }
  .trust-grid,
  .grid-5.trust-grid{
    grid-template-columns:repeat(3,1fr)!important;
  }
  .footer{
    grid-template-columns:1.4fr 1fr 1fr!important;
  }
  .payments{
    grid-column:1/-1!important;
  }
}

@media(max-width:720px){
  .hero-content h1,
  .hero-copy h1{
    font-size:clamp(2.1rem,9vw,3.2rem)!important;
  }
  .hero-visual{
    height:340px!important;
    min-height:340px!important;
  }
  .hero-slider{
    min-height:340px!important;
  }
  .hero-badge-floating{
    font-size:.78rem!important;
    padding:9px 12px!important;
  }
  .trust-grid,
  .grid-5.trust-grid{
    grid-template-columns:1fr!important;
    max-width:420px!important;
  }
  .footer{
    grid-template-columns:1fr!important;
  }
  .payments{
    grid-column:auto!important;
  }
}


/* Security & Trust section refined back to premium card layout */
.trust-security-section{
  padding:78px 28px!important;
  background:
    radial-gradient(circle at 15% 20%,rgba(0,229,255,.10),transparent 32%),
    radial-gradient(circle at 85% 80%,rgba(255,61,184,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006))!important;
  border-top:1px solid var(--border)!important;
  border-bottom:1px solid var(--border)!important;
}

.trust-security-section .section-title{
  max-width:900px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

.trust-security-section .section-title h2{
  font-size:clamp(2.15rem,3.7vw,3.4rem)!important;
  line-height:1.16!important;
  max-width:900px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.trust-security-section .section-title p{
  max-width:820px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.trust-grid,
.grid-5.trust-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(170px,1fr))!important;
  gap:18px!important;
  max-width:1240px!important;
  margin:36px auto 0!important;
}

.trust-card{
  min-height:245px!important;
  padding:24px 22px!important;
  text-align:left!important;
  border-radius:24px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)),
    radial-gradient(circle at top left,rgba(0,229,255,.10),transparent 38%)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.24)!important;
}

.trust-card:hover{
  transform:translateY(-8px)!important;
  border-color:rgba(0,229,255,.35)!important;
}

.trust-icon{
  width:54px!important;
  height:54px!important;
  margin:0 0 18px 0!important;
  border-radius:18px!important;
  font-size:1.55rem!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,rgba(0,229,255,.20),rgba(56,245,163,.14))!important;
  border:1px solid rgba(0,229,255,.24)!important;
}

.trust-card h3{
  font-size:1.05rem!important;
  line-height:1.35!important;
  color:#fff!important;
  margin-bottom:12px!important;
}

.trust-card p{
  font-size:.93rem!important;
  line-height:1.65!important;
  color:#d5e4ff!important;
}

@media(max-width:1180px){
  .trust-grid,
  .grid-5.trust-grid{
    grid-template-columns:repeat(3,1fr)!important;
    max-width:980px!important;
  }
}

@media(max-width:760px){
  .trust-grid,
  .grid-5.trust-grid{
    grid-template-columns:1fr!important;
    max-width:440px!important;
  }
  .trust-card{
    min-height:auto!important;
  }
}


/* Final footer correction: remove empty fast-support gap and keep legal/copyright aligned */
.footer{
  display:grid!important;
  grid-template-columns:1.55fr 1fr 1fr 1.15fr!important;
  align-items:start!important;
  gap:34px!important;
}

.footer > div:empty{
  display:none!important;
}

.footer-legal{
  min-width:260px!important;
}

.footer-legal .copyright,
.copyright{
  white-space:nowrap!important;
  display:block!important;
  font-size:.9rem!important;
  color:#b8c7e7!important;
  margin-top:22px!important;
}

.payments{
  grid-column:auto!important;
  align-self:start!important;
  margin-top:0!important;
  padding-top:0!important;
  border-top:0!important;
}

.payment-logo-row{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(68px, 1fr))!important;
  gap:8px!important;
  max-width:300px!important;
}

@media(max-width:1180px){
  .footer{
    grid-template-columns:1.4fr 1fr 1fr!important;
  }
  .payments{
    grid-column:1/-1!important;
  }
}

@media(max-width:720px){
  .footer{
    grid-template-columns:1fr!important;
  }
  .footer-legal .copyright,
  .copyright{
    white-space:normal!important;
  }
  .payments{
    grid-column:auto!important;
  }
}
