/* Home Tech Solutions — premium finish layer.
   Loaded after style.css. Header (#siteHeader, #mobileMenu) and the mobile
   call dock (.mcta, .call-fab) are intentionally untouched. */

::selection { background: #0A6EEB; color: #FFFFFF; }
body { text-rendering: optimizeLegibility; }

/* Reveal: softer, longer settle */
[data-reveal].is-pending { transform: translateY(30px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }

/* ---------- Type ---------- */
main h2 { font-weight: 800 !important; letter-spacing: -0.035em !important; }
main h3 { letter-spacing: -0.015em !important; }
main .hl, main .hl-light {
  background: linear-gradient(100deg, #0857C2 0%, #0A6EEB 35%, #4FA8FF 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent; color: #0A6EEB;
  padding-bottom: .06em;
}
main .hl-light { background: linear-gradient(100deg, #4FA8FF 0%, #9DD0FF 60%, #FFFFFF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }

/* Eyebrow labels get a hairline lead-in */
main div[style*="letter-spacing:2.5px"] { display: inline-flex !important; align-items: center; gap: 12px; letter-spacing: 3px !important; font-size: 12.5px !important; white-space: nowrap; }
main div[style*="letter-spacing:2.5px"]::before { content: ""; width: 28px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, currentColor); }
main div[style*="text-align:center"] > div[style*="letter-spacing:2.5px"]::after { content: ""; width: 28px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, currentColor, transparent); }

/* ---------- Buttons (main + footer only) ---------- */
main .btn-cta, main .btn-outline, main .btn-ghost { white-space: nowrap; justify-content: center; }
main .btn-cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #3B9BFF 0%, #0A6EEB 50%, #0848A8 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 0 rgba(7,18,38,.18) inset, 0 12px 28px rgba(10,110,235,.32), 0 2px 6px rgba(10,110,235,.25) !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, filter .2s ease;
}
main .btn-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
main .btn-cta:hover { transform: translateY(-2px); filter: none; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 18px 38px rgba(10,110,235,.40), 0 4px 10px rgba(10,110,235,.25) !important; }
main .btn-cta:hover::after { transform: translateX(120%); }
main .btn-outline { box-shadow: 0 1px 2px rgba(11,27,51,.05), 0 6px 16px rgba(11,27,51,.05); transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s ease, box-shadow .35s ease; }
main .btn-outline:hover { box-shadow: 0 12px 26px rgba(10,110,235,.14); }

/* ---------- Hero ---------- */
#home { overflow: hidden; background: radial-gradient(900px 520px at 88% 8%, rgba(79,168,255,.18), transparent 62%), radial-gradient(700px 420px at -5% 100%, rgba(10,110,235,.08), transparent 60%), #FFFFFF !important; }
#home::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(10,110,235,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(10,110,235,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 75%);
}
#heroGrid { position: relative; z-index: 1; }
#heroCopy h1 { font-weight: 800 !important; letter-spacing: -0.035em !important; }
#heroCopy .hl { -webkit-box-decoration-break: slice; box-decoration-break: slice; background: linear-gradient(100deg, #0857C2 0%, #0A6EEB 40%, #4FA8FF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; }
.hero-badge { background: rgba(255,255,255,.8) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(10,110,235,.18) !important; box-shadow: 0 1px 0 #FFFFFF inset, 0 10px 30px rgba(11,27,51,.08) !important; }
.hero-tag { background: transparent !important; border: 1px solid rgba(10,110,235,.22); border-radius: 999px !important; }
.rr-img .zw { border-radius: 28px; box-shadow: 0 0 0 1px rgba(11,27,51,.06), 0 2px 4px rgba(11,27,51,.04), 0 30px 70px -10px rgba(11,27,51,.30) !important; }
#heroMedia::before { content: ""; position: absolute; inset: 8% -6% -8% 10%; background: radial-gradient(closest-side, rgba(10,110,235,.30), transparent); filter: blur(40px); z-index: 0; pointer-events: none; }
#heroMedia > .zw { z-index: 1; }
@media (min-width: 701px) {
  .hero-deco { inset: auto !important; top: -18px !important; right: -18px !important; width: 140px; height: 140px; bottom: auto !important; left: auto !important; border-radius: 28px !important; background: none !important; background-image: radial-gradient(rgba(10,110,235,.35) 1.6px, transparent 1.8px) !important; background-size: 14px 14px !important; }
}
.float-card { border: 1px solid rgba(11,27,51,.06); box-shadow: 0 2px 6px rgba(11,27,51,.06), 0 24px 50px -8px rgba(11,27,51,.24) !important; }
.float-card figcaption > span:last-child > span { white-space: nowrap; }

/* ---------- Trust band ---------- */
section[aria-label^="Why"] {
  position: relative;
  background: radial-gradient(800px 240px at 50% 0%, rgba(79,168,255,.22), transparent 70%), linear-gradient(180deg, #0B1B33 0%, #071226 100%) !important;
}
section[aria-label^="Why"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(79,168,255,.7), transparent); }
section[aria-label^="Why"] .trust-item.has-divider { border-color: rgba(255,255,255,.10) !important; }
section[aria-label^="Why"] .trust-item > svg { background: linear-gradient(160deg, rgba(79,168,255,.28), rgba(10,110,235,.10)); border-color: rgba(79,168,255,.35); }
section[aria-label^="Why"] .trust-num { text-shadow: none; letter-spacing: -0.02em; }
section[aria-label^="Why"] .trust-label { color: #A9C2E4 !important; }
@media (min-width: 721px) and (max-width: 1079px) {
  #trustBar { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 12px 24px !important; }
  #trustBar .trust-item { padding: 26px 16px !important; border: 0 !important; }
  #trustBar .trust-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.10) !important; }
  #trustBar .trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.10) !important; }
}

/* ---------- Services ---------- */
#services { background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFE 100%) !important; }
.svc-mini {
  border-radius: 22px !important; border-color: #E2EBF7 !important; overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,27,51,.04), 0 1px 0 #FFFFFF inset, 0 14px 34px -12px rgba(11,27,51,.12) !important;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .3s ease !important;
}
.svc-mini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #0A6EEB, #4FA8FF); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.svc-mini.svc-green::before { background: linear-gradient(90deg, #15803D, #4ADE80); }
.svc-mini:hover { transform: translateY(-6px) !important; box-shadow: 0 30px 60px -18px rgba(10,110,235,.30), 0 0 0 1px rgba(10,110,235,.25) !important; }
.svc-mini.svc-green:hover { box-shadow: 0 30px 60px -18px rgba(21,128,61,.28), 0 0 0 1px rgba(21,128,61,.25) !important; }
.svc-mini:hover::before { transform: scaleX(1); }
.svc-mini > span:first-child > span:first-child { background: linear-gradient(150deg, #FFFFFF, #E3EEFD) !important; box-shadow: 0 1px 0 #FFFFFF inset, 0 6px 14px rgba(10,110,235,.12); }
.svc-mini.svc-green > span:first-child > span:first-child { background: linear-gradient(150deg, #FFFFFF, #DDF3E5) !important; box-shadow: 0 1px 0 #FFFFFF inset, 0 6px 14px rgba(21,128,61,.12); }
.svc-mini[style*="border:1px solid #0A6EEB"] { border-color: rgba(10,110,235,.45) !important; }

/* ---------- Our Work ---------- */

/* ---------- About / photos ---------- */
#about img, #about .img-lift { border-radius: 26px; }
#about .img-lift { box-shadow: 0 0 0 1px rgba(11,27,51,.06), 0 30px 70px -14px rgba(11,27,51,.28); }

/* ---------- How it works ---------- */
#how div[style*="border-radius:50%"][style*="background:#0A6EEB"],
#how span[style*="border-radius:50%"][style*="background:#0A6EEB"] {
  background: linear-gradient(150deg, #3B9BFF, #0848A8) !important;
  box-shadow: 0 0 0 8px rgba(10,110,235,.08), 0 14px 28px rgba(10,110,235,.32) !important;
}

/* ---------- Reviews ---------- */
#reviews { background: radial-gradient(800px 300px at 50% 0%, rgba(79,168,255,.14), transparent 70%), linear-gradient(180deg, #F4F8FE 0%, #EAF1FB 100%) !important; }
.rev-summary { border-color: rgba(10,110,235,.14) !important; box-shadow: 0 1px 0 #FFFFFF inset, 0 18px 40px -12px rgba(11,27,51,.14) !important; }
.review-card, .rev-track > * { border-color: #E2EBF7 !important; box-shadow: 0 1px 2px rgba(11,27,51,.04), 0 16px 36px -14px rgba(11,27,51,.14) !important; }

/* ---------- Service areas ---------- */
#areas > div > div[data-reveal] { position: relative; overflow: hidden; background: radial-gradient(600px 260px at 50% 0%, rgba(79,168,255,.18), transparent 70%), linear-gradient(180deg, #F4F8FE, #EAF1FB) !important; border-color: rgba(10,110,235,.14) !important; }
#areas span[style*="background:#0A6EEB"] {
  white-space: nowrap; background: #0B1B33 !important; border-color: #0B1B33 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 24px -8px rgba(11,27,51,.45) !important;
  display: inline-flex; align-items: center; gap: 10px;
}
#areas span[style*="background:#0A6EEB"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4FA8FF; box-shadow: 0 0 0 4px rgba(79,168,255,.22); }

/* ---------- Referral / contact / FAQ ---------- */
#referral > div > div { box-shadow: 0 30px 70px -24px rgba(10,110,235,.28) !important; }
#contact { background: radial-gradient(700px 300px at 85% 10%, rgba(79,168,255,.14), transparent 70%), #F3F7FD !important; }
#quoteFormCard { border-color: rgba(10,110,235,.14) !important; box-shadow: 0 1px 0 #FFFFFF inset, 0 2px 6px rgba(11,27,51,.04), 0 40px 80px -24px rgba(11,27,51,.22) !important; }
.contact-card { border-color: #E2EBF7 !important; box-shadow: 0 10px 26px -14px rgba(11,27,51,.16); }
.faq-item { border-color: #E2EBF7 !important; transition: box-shadow .3s ease, border-color .3s ease; }
.faq-item.is-open { border-color: rgba(10,110,235,.3) !important; box-shadow: 0 18px 40px -18px rgba(10,110,235,.25); }

/* ---------- Footer ---------- */
footer { position: relative; background: radial-gradient(700px 240px at 15% 0%, rgba(10,110,235,.16), transparent 70%), #050D1C !important; }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(79,168,255,.55), transparent); }

@media (prefers-reduced-motion: reduce) {
  main .btn-cta::after { display: none; }
}