@charset "utf-8";
/* Support + Installation Guide sections — modern design (shared) */
.support-card, .install-step { --line:#e6edf5; --head:#14263d; --muted:#74879f; }

/* ---- support cards ---- */
.whatSupport .section-headline > .row.support-row {
  background:none; border-radius:0; padding:0; box-shadow:none; margin-top:2rem;
  display:flex; flex-wrap:wrap;
}
.support-card{--sc:#55bf39;position:relative;overflow:hidden;background:#fff!important;
  border:1px solid var(--line)!important;border-radius:18px!important;
  box-shadow:0 14px 30px -20px rgba(16,35,51,.25)!important;
  padding:2.2rem 1.2rem 2rem!important;text-align:center;height:100%;
  transition:transform .3s ease,box-shadow .3s ease;}
.sp-2{--sc:#2b6ef0}.sp-3{--sc:#f2960b}.sp-4{--sc:#8b5cf6}
.support-card:hover{transform:translateY(-5px);box-shadow:0 26px 44px -22px rgba(16,35,51,.35)!important}
.support-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--sc),color-mix(in srgb,var(--sc) 55%,#fff))}
.support-card .sp-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;background:color-mix(in srgb,var(--sc) 10%,#fff);margin-bottom:1.2rem}
.support-card .sp-icon::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1.6px dashed color-mix(in srgb,var(--sc) 45%,transparent)}
.support-card .sp-icon::after{content:"";position:absolute;inset:-19px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 28% 12%,#fff 0 2.1px,var(--sc) 2.2px 3.6px,transparent 3.9px),
             radial-gradient(circle at 92% 61%,#fff 0 2.1px,var(--sc) 2.2px 3.6px,transparent 3.9px)}
.support-card .sp-glyph{font-size:34px!important;line-height:1!important;height:auto!important;color:var(--sc)!important}
.support-card h4{font-size:1.12rem;font-weight:700;color:var(--head);margin:0;padding-bottom:14px;position:relative}
.support-card h4 .sp-accent{color:var(--sc)}
.support-card h4::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:34px;height:3px;border-radius:3px;background:var(--sc)}
.support-card .sp-desc{margin:12px 0 0;font-size:.93rem;line-height:1.6;color:var(--muted)}
@media only screen and (max-width:600px){
  .support-card .sp-icon{width:72px;height:72px}
  .support-card .sp-glyph{font-size:30px!important}
  .support-card h4{font-size:1rem}
}

/* ---- install guide steps ---- */
.installnguide .container{background:none!important}
.install-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:2.25rem;position:relative}
.install-step{--ic:#55bf39;--arc:90deg;position:relative;overflow:visible;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 30px -20px rgba(16,35,51,.25);
  padding:2.1rem 1.4rem 2rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.is-2{--ic:#2b6ef0;--arc:180deg}.is-3{--ic:#f2960b;--arc:270deg}.is-4{--ic:#55bf39;--arc:360deg}
.install-step:hover{transform:translateY(-5px);box-shadow:0 26px 44px -22px rgba(16,35,51,.35)}
.install-step::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--ic),color-mix(in srgb,var(--ic) 55%,#fff));
  border-bottom-left-radius:18px;border-bottom-right-radius:18px}
.install-step:not(:last-child)::after{content:"\e5cc";font-family:"Material Icons";
  position:absolute;top:50%;right:-31px;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;z-index:2;background:#fff;
  box-shadow:0 8px 18px -8px rgba(16,35,51,.35);color:var(--ic);
  font-size:20px;font-weight:400;line-height:34px;text-align:center;
  -webkit-font-feature-settings:"liga";font-feature-settings:"liga"}
.step-num{position:relative;width:64px;height:64px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.step-num::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;
  background:conic-gradient(var(--ic) 0 var(--arc),#e8eef5 var(--arc) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.step-num span{font-weight:800;font-size:1.35rem;color:var(--ic)}
.step-icon{width:96px;height:96px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ic) 11%,#fff)}
.step-icon .material-icons{font-size:42px!important;line-height:1!important;height:auto!important;color:var(--ic)!important}
.step-icon .step-svg{width:42px;height:42px;color:var(--ic)}
.install-step h5{position:relative;font-size:1.12rem;font-weight:700;color:var(--head);margin:0 0 .8rem;padding-top:16px}
.install-step h5::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:40px;height:3px;border-radius:3px;background:var(--ic)}
.install-step p{font-size:.92rem;line-height:1.65;color:var(--muted);margin:0}
@media only screen and (max-width:1100px){
  .install-steps{grid-template-columns:1fr 1fr}
  .install-step:nth-child(2)::after{display:none}
}
@media only screen and (max-width:640px){
  .install-steps{grid-template-columns:1fr;gap:26px}
  .install-step::after{display:none!important}
}