/* ==========================================================================
   Signature package — the Social Media Security Package page and the
   spotlight banner that points to it. Builds on main.css tokens only.
   ========================================================================== */

/* ---------- Hero ---------- */
.sig-hero .breadcrumbs { margin-bottom: 18px; }
.sig-hero h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); }
.sig-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px 7px 10px; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--c6) 45%, transparent);
	background: linear-gradient(100deg, color-mix(in srgb, var(--c6) 18%, transparent), color-mix(in srgb, var(--c4) 12%, transparent));
	color: var(--text); font: 500 13px/1.2 var(--font-body);
	box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--c6) 80%, transparent);
}
.sig-badge svg { width: 16px; height: 16px; color: var(--c6); }

/* ---------- Threat strip ---------- */
.sig-threats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sig-threat {
	display: grid; grid-template-columns: 44px auto auto; gap: 14px; align-items: center;
	padding: 14px 16px 14px 14px; white-space: nowrap; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--surface); color: var(--text); font-weight: 500; font-size: 15px;
	transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.sig-threat:nth-child(6n+1) { --tile: var(--c1); } .sig-threat:nth-child(6n+2) { --tile: var(--c2); }
.sig-threat:nth-child(6n+3) { --tile: var(--c3); } .sig-threat:nth-child(6n+4) { --tile: var(--c4); }
.sig-threat:nth-child(6n+5) { --tile: var(--c5); } .sig-threat:nth-child(6n+6) { --tile: var(--c6); }
.sig-threat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tile) 55%, transparent); box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--tile) 80%, transparent); }
.sig-threat__icon {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
	color: var(--tile); background: color-mix(in srgb, var(--tile) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--tile) 40%, transparent);
}
.sig-threat__icon svg { width: 22px; height: 22px; }
.sig-threat__state {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 9px; border-radius: 999px; background: rgba(34, 197, 94, .12);
	color: var(--ok); font: 500 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
}
.sig-threat__state svg { width: 12px; height: 12px; }

/* ---------- Bento of modules ---------- */
.sig-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sig-module { grid-column: span 2; }
.sig-module--wide { grid-column: span 4; }
.sig-module--wide:last-child { grid-column: 1 / -1; }
.sig-module--wide:last-child .pkg-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sig-module--wide .pkg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.sig-bento > :first-child {
	background:
		radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--tile-2) 16%, transparent), transparent 60%),
		var(--surface);
}
@media (max-width: 960px) {
	.sig-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sig-module, .sig-module--wide { grid-column: auto; }
	.sig-module--wide { grid-column: 1 / -1; }
}
@media (max-width: 960px) { .sig-module--wide:last-child .pkg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.sig-bento { grid-template-columns: 1fr; }
	.sig-module--wide .pkg-list, .sig-module--wide:last-child .pkg-list { grid-template-columns: 1fr; }
	.sig-threat { white-space: normal; width: 100%; grid-template-columns: 44px 1fr auto; }
}

/* ---------- Sample report ---------- */
.sig-report .ring__bar { stroke: url(#ringGrad); }
.sig-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: center; }
.sig-metrics div { padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.sig-metrics strong { display: block; color: var(--text); font: 600 24px/1.1 var(--font-display); }
.sig-metrics strong.is-ok { color: var(--ok); }
.sig-metrics span { color: var(--muted); font-size: 12px; }
.sig-patterns { display: grid; gap: 12px; padding: 0 22px 24px; }
.sig-patterns p { margin: 0; color: var(--muted); font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sig-bar { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 13px; overflow: hidden; isolation: isolate; }
.sig-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), color-mix(in srgb, var(--c) 12%, transparent)); border-radius: inherit; }
.sig-bar em { font-style: normal; color: var(--text); font: 500 12px/1.4 var(--font-mono); }

/* ---------- Scope + terms ---------- */
.sig-scope .pkg-list li { font-size: 15px; }
.sig-terms { margin-top: 28px; }
.sig-terms .prose { padding-top: 8px; }

/* ---------- Spotlight banner (home, services) ---------- */
.sig-spot {
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 4vw, 56px); align-items: center;
	padding: clamp(28px, 4.5vw, 56px); border-radius: var(--radius-xl);
	border: 1px solid color-mix(in srgb, var(--c6) 35%, var(--border));
	background:
		radial-gradient(55% 110% at 100% 0%, color-mix(in srgb, var(--c6) 20%, transparent), transparent 60%),
		radial-gradient(50% 110% at 0% 100%, color-mix(in srgb, var(--c2) 22%, transparent), transparent 60%),
		var(--surface);
	box-shadow: var(--shadow);
}
.sig-spot h2 { margin: 18px 0 12px; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.sig-spot > div > p { margin: 0; color: var(--text-2); max-width: 620px; }
.sig-spot__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; padding: 0; list-style: none; }
.sig-spot__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--text-2); font-size: 13px; }
.sig-spot__chips svg { width: 14px; height: 14px; color: var(--c5); }
.sig-spot__shield { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 280px; width: 100%; margin-inline: auto; }
.sig-spot__shield::before, .sig-spot__shield::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 1px dashed color-mix(in srgb, var(--c3) 40%, transparent);
	animation: sig-spin 40s linear infinite;
}
.sig-spot__shield::after { inset: 16%; border-style: solid; border-color: color-mix(in srgb, var(--c2) 35%, transparent); animation-duration: 26s; animation-direction: reverse; }
.sig-spot__core {
	display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 28px;
	background: linear-gradient(135deg, var(--c1), var(--c2) 55%, var(--c4));
	color: #fff; box-shadow: 0 24px 60px -18px rgba(139, 92, 246, .8);
}
.sig-spot__core svg { width: 52%; height: 52%; }
.sig-spot__orb {
	position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
	border: 1px solid var(--border-strong); background: var(--surface); color: var(--tile, var(--c3));
	box-shadow: var(--shadow);
}
.sig-spot__orb svg { width: 20px; height: 20px; }
.sig-spot__orb:nth-child(2) { top: 2%; left: 50%; translate: -50% 0; --tile: var(--c1); }
.sig-spot__orb:nth-child(3) { top: 50%; right: 0; translate: 0 -50%; --tile: var(--c4); }
.sig-spot__orb:nth-child(4) { bottom: 2%; left: 50%; translate: -50% 0; --tile: var(--c5); }
.sig-spot__orb:nth-child(5) { top: 50%; left: 0; translate: 0 -50%; --tile: var(--c6); }
@keyframes sig-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
	.sig-spot { grid-template-columns: 1fr; }
	.sig-spot__shield { max-width: 200px; grid-row: 1; }
}