/*
  UX Refresh (lightweight)
  - No SEO changes: CSS only.
  - Keep it small and low-risk: override basics (background, cards, buttons, mobile CTA).
*/

:root{
  --sg-bg-0: #0f172a;
  --sg-bg-1: #101317;
  --sg-bg-2: #151b23;
  --sg-surface: rgba(255,255,255,0.04);
  --sg-border: rgba(255,255,255,0.12);
  --sg-shadow: 0 14px 34px rgba(0,0,0,0.30);
  --sg-radius: 14px;
}

/* Slightly richer background without heavy images/animations. */
body{
  background:
    radial-gradient(1200px 800px at 18% -10%, rgba(249,115,22,0.12), transparent 56%),
    radial-gradient(900px 650px at 92% 18%, rgba(59,130,246,0.10), transparent 52%),
    linear-gradient(160deg, var(--sg-bg-1) 0%, var(--sg-bg-0) 58%, var(--sg-bg-2) 100%);
}

/* Global readable rhythm */
main{
  scroll-margin-top: 80px;
}

/* Cards: less bulky, more consistent, still clickable. */
.card,
.service-card,
.popular-card,
.frame,
.global-contact-block{
  border-radius: var(--sg-radius);
  border-color: var(--sg-border);
  box-shadow: var(--sg-shadow);
}

.card{
  padding: 12px 13px;
}

/* Card hover: subtle, avoid layout shifts */
.service-card,
.popular-card,
.card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.service-card:hover,
.popular-card:hover,
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(249,115,22,0.30);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}

/* Buttons: clearer hierarchy, better tap targets */
.btn{
  min-height: 40px;
  border-radius: 999px;
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
.btn.primary{
  box-shadow: 0 12px 26px rgba(249,115,22,0.18);
}
.btn:focus-visible{
  outline: 2px solid rgba(251,146,60,0.75);
  outline-offset: 2px;
}

/* Make CTA blocks feel less oversized on desktop */
.service-actions .btn{
  min-width: 0;
  width: auto;
}

/* Service/page link cards feel too bulky: reduce spacing a bit */
.service-cards-grid,
.popular-services-grid,
.grid,
.portfolio-grid,
.related-cards-grid,
.footer-quick-links{
  gap: 10px;
}

.service-card h3,
.popular-card h3{
  line-height: 1.35;
}

.service-card p,
.popular-card p{
  font-size: 14px;
  line-height: 1.85;
}

.footer-quick-links a{
  padding: 8px 10px;
  font-size: 14px;
}

.site-top-nav-wrap .top-nav-btn:not(.top-nav-btn-primary),
.btn:not(.primary):not(.quick-link--primary){
  color: rgba(255,255,255,0.90);
}

.popular-services-grid .card,
#quick-access-pages .card,
#latest-guides .card{
  min-height: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(15,23,42,0.26));
}

#quick-access-pages .card{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
}

#quick-access-pages .card h3,
#quick-access-pages .card p,
#quick-access-pages .card a{
  grid-column: 2;
}

#quick-access-pages .card .svc-ico{
  grid-row: 1 / span 3;
  margin-bottom: 0;
}

/* Make tag chips look intentional (used in some pages) */
.tag{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  letter-spacing: 0;
}

/* Mobile: keep CTAs compact and non-obstructive */
@media (max-width: 860px){
  body{ padding-bottom: 100px; }
  .mobile-float-cta{
    right: 10px;
    left: 10px;
    bottom: 10px;
  }
  .mobile-float-cta a{
    min-height: 46px;
    padding: 12px 10px;
    border-radius: 14px;
  }
}

@media (max-width: 640px){
  .site-nav-brand-copy small,
  .visual-breadcrumb{
    display: none;
  }
  .site-top-nav-wrap{
    background: rgba(15,23,42,0.96);
  }
  .site-nav-links .top-nav-btn{
    box-shadow: none;
  }
  .cta-row .btn,
  .service-actions .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}