/* Solutions hub: hero (About standard) -> choose your project -> how every solution works (once, for all pages) -> consultation */
:root{--sh-shell:1240px;--sh-gutter:36px}
@media(max-width:1180px){:root{--sh-shell:1120px}}
@media(max-width:680px){:root{--sh-gutter:18px}}
.sh-page{color:#0b223f}
.sh-shell{width:min(calc(100% - (2 * var(--sh-gutter))),var(--sh-shell));margin-inline:auto}

/* Hero — picture masked into an ambient background on the left, copy on the right */
.sh-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:stretch;min-height:min(43.8303vw,631.16px);background:linear-gradient(90deg,#eef5fd 0%,#f3f8fe 55%,#f8fbfe 100%)}
.sh-hero__media{position:absolute;z-index:-1;top:0;bottom:0;left:2%;width:min(54%,900px);margin:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%);mask-composite:intersect}
.sh-hero__media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.sh-hero__inner{position:relative;display:grid;grid-template-rows:auto 1fr;padding:30px 0 48px;direction:rtl}
.sh-breadcrumb{display:flex;gap:8px;align-items:center;color:#5f7183;font-size:13px;font-weight:600}
.sh-breadcrumb a{color:inherit;text-decoration:none}.sh-breadcrumb a:hover{color:var(--brand)}
.sh-hero__copy{align-self:center;max-width:540px;text-align:right}
.sh-hero__badge{display:inline-flex;margin-bottom:11px;color:var(--brand);font-size:14px;font-weight:750}
.sh-hero h1{margin:0;font-size:min(2.9vw,42px);font-weight:850;line-height:1.3;letter-spacing:-.018em}
.sh-hero__intro{margin:min(1.4vw,20px) 0 0;max-width:34em;color:#45536b;font-size:min(1.32vw,19px);line-height:1.6;font-weight:700}
.sh-hero__actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* Section heads */
.sh-head{max-width:760px;margin:0 auto 36px;text-align:center}
.sh-head h2{margin:0;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.sh-head p{margin:12px 0 0;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}

/* Choose your project — five cards, three families (residential / business / central monitoring) */
.sh-choose{padding:88px 0 80px;background:#fff}
.sh-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.sh-card{grid-column:span 2;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#e3e9f0;color:inherit;text-decoration:none;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.sh-card--org{grid-column:span 3}
.sh-card:hover{background:#eaf5ff;box-shadow:0 14px 30px rgba(8,58,119,.13);transform:translateY(-2px)}
.sh-card:focus-visible{outline:3px solid #8fb8ff;outline-offset:3px}
.sh-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:#cfd9e6}
.sh-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.sh-card:hover .sh-card__media img{transform:scale(1.06)}
.sh-card__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;text-align:right}
.sh-card__group{align-self:flex-start;padding:3px 10px;border-radius:999px;background:#fff;color:#3d4f69;font-size:12px;font-weight:750}
.sh-card--res .sh-card__group{color:#0b7fe0}.sh-card--biz .sh-card__group{color:#b86b05}.sh-card--org .sh-card__group{color:#5b45c9}
.sh-card h3{margin:12px 0 6px;font-size:21px;font-weight:850;line-height:1.45}
.sh-card p{margin:0;color:#45536b;font-size:14.5px;line-height:1.85;font-weight:600}
.sh-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.sh-card__tags i{font-style:normal;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.75);color:#0e377b;font-size:12.5px;font-weight:750}
.sh-card__cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-size:14.5px;font-weight:800}
.sh-card__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.sh-card:hover .sh-card__cta svg{transform:translateX(-3px)}

/* How every solution works — said once here, so the solution pages don't repeat it */
.sh-how{padding:80px 0 88px;background:radial-gradient(circle at 50% 0%,rgba(32,107,238,.22),transparent 45%),linear-gradient(180deg,#0b1d38 0%,#081529 100%);color:#fff}
.sh-how .sh-head h2{color:#fff}
.sh-how .sh-head p{color:rgba(225,235,248,.82)}
.sh-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sh-steps::before{content:"";position:absolute;top:27px;right:12.5%;left:12.5%;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(143,184,255,.45) 0 8px,transparent 8px 16px)}
.sh-step{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 14px;text-align:center}
.sh-step__dot{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;box-shadow:0 0 0 6px #0a1a33,0 10px 26px rgba(32,107,238,.45)}
.sh-step__dot svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sh-step h3{margin:18px 0 8px;color:#fff;font-size:19px;font-weight:850}
.sh-step p{margin:0;color:rgba(225,235,248,.82);font-size:14px;line-height:1.85;font-weight:600}
.sh-step__links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.sh-step__links a{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;box-shadow:0 2px 8px rgba(16,38,74,.06);transition:background-color .2s ease,color .2s ease}
.sh-step__links a:hover{background:rgba(255,255,255,.2);color:#fff}

/* Load animation (cards and steps rise in once) */
@keyframes sh-rise{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:no-preference){
  .sh-choose.is-revealed .sh-card,.sh-how.is-revealed .sh-step{animation:sh-rise .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.1s + var(--k) * .08s)}
}

@media(max-width:1040px){
  .sh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-card,.sh-card--org{grid-column:span 1}
  .sh-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .sh-steps::before{display:none}
}
@media(max-width:860px){
  .sh-hero{min-height:0;flex-direction:column}
  .sh-hero__media{position:static;order:2;width:100%;height:260px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%)}
  .sh-hero__media img{object-position:center}
  .sh-hero__inner{padding:20px 0 12px}
  .sh-hero__copy{margin:18px auto 0;text-align:center}
  .sh-hero h1{font-size:30px}
  .sh-hero h1 br{display:none}
  .sh-hero__intro{margin-inline:auto;font-size:16.5px}
  .sh-hero__actions{justify-content:center}
  .sh-choose{padding:56px 0}.sh-how{padding:56px 0}
}
@media(max-width:620px){
  .sh-cards{grid-template-columns:1fr}
  .sh-steps{grid-template-columns:1fr}
  .sh-hero h1{font-size:26px;line-height:1.35}.sh-hero__intro{font-size:15px}
}

/* breathing room between the dark band and the closing consultation banner */
.sh-page .sh-final-cta{margin-top:clamp(40px,5.2vw,88px)}