/* ==========================================================================
   Smart Shield — grids and cards (services, minis, benefits, steps, contact)
   ========================================================================== */

/* ---------- Responsive grids: desktop / tablet 2-col / mobile 1-col ---------- */
.ss-grid { display: grid !important; gap: 24px; margin-top: 48px !important; }
.ss-grid > * { margin: 0 !important; min-width: 0; }
.ss-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-minis.ss-grid { margin-top: 28px !important; }

@media (max-width: 1100px) {
	.ss-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.ss-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-minis.ss-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.ss-grid-4, .ss-grid-3 { grid-template-columns: 1fr; }
	.ss-grid { gap: 18px; }
}

/* Shared icon badge: gradient circle (::before) + white glyph (::after) */
.ss-card, .ss-benefit, .ss-contact-card, .ss-mini { position: relative; }

/* ---------- Service cards ---------- */
.ss-card {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	overflow: hidden;
	transition: transform .35s var(--ss-ease), box-shadow .35s var(--ss-ease), border-color .35s;
}
.ss-card:hover { transform: translateY(-6px); box-shadow: var(--ss-shadow-lg); border-color: transparent; }
.ss-card figure { margin: 0 !important; overflow: hidden; }
.ss-card img {
	width: 100%; height: 190px;
	object-fit: cover; display: block;
	transition: transform .7s var(--ss-ease);
}
.ss-card:hover img { transform: scale(1.06); }
.ss-card::before {
	content: "";
	position: absolute; z-index: 1; left: 20px; top: 164px;
	width: 52px; height: 52px; border-radius: 16px;
	background: var(--ss-grad);
	box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(47, 91, 255, .3);
}
.ss-card::after {
	content: "";
	position: absolute; z-index: 2; left: 33px; top: 177px;
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}
.ss-card h3 { margin: 44px 22px .4em !important; font-size: 1.15rem !important; }
.ss-card p { margin: 0 22px 1em !important; color: var(--ss-slate); font-size: .96rem; line-height: 1.6; }
.ss-card .ss-card-link { margin-top: auto !important; padding-bottom: 22px; }
.ss-card-link a {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 700;
	color: var(--ss-blue);
	text-decoration: none;
	min-height: 44px;
}
.ss-card-link a::after { content: "→"; transition: transform .25s var(--ss-ease); }
.ss-card-link a:hover::after { transform: translateX(4px); }

/* ---------- Mini feature cards (dark section and light variant) ---------- */
.ss-mini {
	padding: 22px 20px 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
}
.ss-mini::before {
	content: "";
	display: block;
	width: 26px; height: 26px;
	margin-bottom: 12px;
	background: var(--ss-cyan);
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}
.ss-mini h3 { font-size: 1.05rem !important; margin: 0 0 .3em !important; }
.ss-mini p { margin: 0 !important; font-size: .92rem; line-height: 1.55; }

.ss-stack { display: grid; gap: 12px; margin-block: 24px 30px !important; }
.ss-stack > * { margin: 0 !important; }
.ss-mini-light {
	background: #fff;
	border: 1px solid var(--ss-line);
	padding: 18px 20px 18px 78px;
	transition: box-shadow .3s, transform .3s var(--ss-ease);
}
.ss-mini-light:hover { box-shadow: var(--ss-shadow); transform: translateX(4px); }
.ss-mini-light::before {
	position: absolute; left: 20px; top: 18px;
	width: 42px; height: 42px; margin: 0;
	border-radius: 12px;
	background: var(--ss-sky);
	-webkit-mask: none; mask: none;
}
.ss-mini-light::after {
	content: "";
	position: absolute; left: 30px; top: 28px;
	width: 22px; height: 22px;
	background: var(--ss-blue);
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}
.ss-mini-light p { color: var(--ss-slate); }

/* ---------- Benefit cards ---------- */
.ss-benefit {
	background: #fff;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	padding: 108px 28px 28px;
	transition: transform .35s var(--ss-ease), box-shadow .35s var(--ss-ease);
}
.ss-benefit:hover { transform: translateY(-6px); box-shadow: var(--ss-shadow-lg); }
.ss-benefit::before {
	content: "";
	position: absolute; left: 28px; top: 28px;
	width: 58px; height: 58px; border-radius: 18px;
	background: var(--ss-grad);
	box-shadow: 0 12px 26px rgba(47, 91, 255, .28);
}
.ss-benefit::after {
	content: "";
	position: absolute; left: 44px; top: 44px;
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}
.ss-benefit h3 { margin: 0 0 .4em !important; }
.ss-benefit p { margin: 0 !important; color: var(--ss-slate); line-height: 1.6; font-size: 1rem; }

/* ---------- How it works steps ---------- */
.ss-steps { counter-reset: ss-step; }
.ss-step {
	counter-increment: ss-step;
	padding: 28px;
	border-radius: var(--ss-radius);
	background: var(--ss-mist);
	border: 1px solid var(--ss-line);
	position: relative;
}
.ss-step::before {
	content: "0" counter(ss-step);
	display: block;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	margin-bottom: 18px;
	background: var(--ss-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ss-step h3 { margin: 0 0 .35em !important; }
.ss-step p { margin: 0 !important; color: var(--ss-slate); line-height: 1.6; font-size: 1rem; }

/* ---------- Contact cards ---------- */
.ss-contact-card {
	text-align: center;
	padding: 104px 24px 30px;
	border-radius: var(--ss-radius);
	background: #fff;
	border: 1px solid var(--ss-line);
	box-shadow: var(--ss-shadow);
}
.ss-contact-card::before {
	content: "";
	position: absolute; left: 50%; top: 28px; translate: -50% 0;
	width: 58px; height: 58px; border-radius: 50%;
	background: var(--ss-grad);
}
.ss-contact-card::after {
	content: "";
	position: absolute; left: 50%; top: 44px; translate: -50% 0;
	width: 26px; height: 26px;
	background: #fff;
	-webkit-mask: var(--ss-ico) center / contain no-repeat;
	mask: var(--ss-ico) center / contain no-repeat;
}
.ss-contact-card h3 { margin: 0 0 .4em !important; }
.ss-contact-card p { margin: 0 !important; line-height: 1.8; font-size: 1rem; }
.ss-contact-card a { font-weight: 700; text-decoration: none; }