/**
 * Sam4Tech — homepage styles.
 *
 * Loaded only on the front page. Uses the design tokens from style.css and the
 * shared marketing section primitives defined there (.s4t-home-section,
 * .s4t-section-head, .s4t-hl, .s4t-stats, .s4t-value, .s4t-post), so only
 * homepage-specific blocks live here.
 *
 * CONTENTS
 *   1. Hero
 *   2. Hero visual (CSS/SVG collage)
 *   3. Industry marquee
 *   4. Services grid
 *   5. Values ("why us")
 *   6. Industries
 *   7. Testimonials
 *   8. Latest posts
 *   9. Responsive
 *  10. Motion preferences
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.s4t-hero {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, var(--s4t-space-9));
}

.s4t-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(2rem, 5vw, var(--s4t-space-8));
}

.s4t-hero__content .s4t-eyebrow {
	margin-block-end: var(--s4t-space-5);
}

.s4t-hero__title {
	font-size: clamp(2.5rem, 4.4vw + 1rem, 4.25rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	margin-block-end: var(--s4t-space-5);
}

.s4t-hero__text {
	max-width: 46ch;
	margin-block-end: var(--s4t-space-6);
}

.s4t-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4t-space-3);
	margin-block-end: var(--s4t-space-6);
}

.s4t-hero__actions .s4t-btn {
	padding: 0.9rem 1.75rem;
	font-size: var(--s4t-text-base);
}

/* Reassurance row under the buttons. */
.s4t-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4t-space-2) var(--s4t-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.s4t-hero__points li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--s4t-text-sm);
	color: var(--s4t-body);
}

.s4t-hero__points .s4t-icon {
	color: var(--s4t-brand);
	flex: none;
}

/* ==========================================================================
   2. Hero visual (CSS/SVG collage)
   Percentage positioning inside a fixed-ratio box, so it scales as one piece.
   ========================================================================== */

.s4t-hero__visual {
	position: relative;
}

.s4t-scene {
	position: relative;
	aspect-ratio: 5 / 4;
	width: 100%;
}

/* Soft wash behind the collage. */
.s4t-scene__glow {
	position: absolute;
	inset: 6% 2% 8%;
	border-radius: 50%;
	background: radial-gradient(circle at 55% 45%, rgba(var(--s4t-brand-rgb), 0.18), transparent 62%);
	filter: blur(8px);
}

/* --- Assistant panel ------------------------------------------------------ */

.s4t-scene__panel {
	position: absolute;
	left: 4%;
	top: 14%;
	width: 60%;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: 18px;
	box-shadow: var(--s4t-shadow-lg);
	overflow: hidden;
	transition: transform var(--s4t-duration-slow) var(--s4t-ease);
}

.s4t-hero__visual:hover .s4t-scene__panel {
	transform: translateY(-6px);
}

.s4t-scene__bar {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--s4t-border);
}

.s4t-scene__avatar {
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--s4t-brand-light), var(--s4t-brand));
}

.s4t-scene__bar-line {
	width: 42%;
	height: 6px;
	border-radius: 3px;
	background: #e9edf4;
}

.s4t-scene__thread {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px;
}

/* Incoming message. */
.s4t-scene__bubble {
	width: var(--w, 70%);
	height: 13px;
	border-radius: 7px;
	background: #eef1f6;
}

/* Outgoing message, aligned right in the brand colour. */
.s4t-scene__bubble--me {
	align-self: flex-end;
	background: linear-gradient(120deg, var(--s4t-brand), var(--s4t-brand-light));
}

.s4t-scene__input {
	height: 22px;
	margin-top: 4px;
	border-radius: 11px;
	background: var(--s4t-cream);
	border: 1px solid var(--s4t-border);
}

/* --- Metrics tile --------------------------------------------------------- */

.s4t-scene__metrics {
	position: absolute;
	right: 0;
	top: 0;
	width: 33%;
	display: grid;
	gap: 10px;
	padding: 14px;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: 16px;
	box-shadow: var(--s4t-shadow-md);
}

/* Progress ring drawn with a conic gradient — no library, no image. */
.s4t-scene__ring {
	display: block;
	width: 62%;
	justify-self: center;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--s4t-white) 58%, transparent 59%),
		conic-gradient(var(--s4t-brand) 0 68%, var(--s4t-brand-pale) 68% 100%);
}

.s4t-scene__spark {
	background: var(--s4t-brand-tint);
	border-radius: 10px;
	padding: 8px;
}

.s4t-scene__spark svg {
	width: 100%;
	height: 100%;
	min-height: 30px;
}

/* --- Agent graph ---------------------------------------------------------- */

.s4t-scene__nodes {
	position: absolute;
	left: 16%;
	bottom: 2%;
	width: 52%;
	padding: 16px 14px;
	background: var(--s4t-ink);
	border-radius: 16px;
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-scene__nodes svg {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Accents -------------------------------------------------------------- */

.s4t-scene__blob {
	position: absolute;
	right: 4%;
	bottom: 22%;
	width: 19%;
	aspect-ratio: 1;
	/* Squircle rather than a plain rounded square. */
	border-radius: 42% 58% 52% 48% / 48% 44% 56% 52%;
	background: linear-gradient(150deg, var(--s4t-brand-light), var(--s4t-brand-strong));
	box-shadow: var(--s4t-shadow-brand);
	transform: rotate(8deg);
}

.s4t-scene__dot {
	position: absolute;
	border-radius: 50%;
}

.s4t-scene__dot--a {
	right: 27%;
	bottom: 14%;
	width: 22px;
	height: 22px;
	background: var(--s4t-accent);
}

.s4t-scene__dot--b {
	left: 2%;
	bottom: 26%;
	width: 12px;
	height: 12px;
	background: var(--s4t-brand);
}

/* --- Floating stat badges -------------------------------------------------- */

.s4t-scene__badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-sm);
	padding: 0.5rem 0.75rem;
	box-shadow: var(--s4t-shadow-md);
	white-space: nowrap;
}

.s4t-scene__badge--top {
	left: 0;
	top: 2%;
}

.s4t-scene__badge--bottom {
	right: 1%;
	bottom: 4%;
}

.s4t-scene__badge-icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 7px;
	background: var(--s4t-brand-soft);
	color: var(--s4t-brand);
}

.s4t-scene__badge strong {
	display: block;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-xs);
	font-weight: 700;
	color: var(--s4t-ink);
	line-height: 1.25;
}

.s4t-scene__badge em {
	display: block;
	font-style: normal;
	font-size: 0.6875rem;
	color: var(--s4t-muted);
	line-height: 1.25;
}

/* ==========================================================================
   3. Industry marquee
   ========================================================================== */

.s4t-marquee {
	position: relative;
	padding-block: var(--s4t-space-6);
	border-block: 1px solid var(--s4t-border);
	background: linear-gradient(180deg, #fffdfa, #fdfaf5);
	overflow: hidden;
}

.s4t-marquee__title {
	text-align: center;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--s4t-ink);
	opacity: 0.65;
	margin-block-end: var(--s4t-space-4);
}

.s4t-marquee__viewport {
	display: flex;
	width: max-content;
	/* Fades the strip out at both edges. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.s4t-marquee__track {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	list-style: none;
	margin: 0;
	padding-inline: clamp(1rem, 2.5vw, 2rem);
	animation: s4t-marquee 34s linear infinite;
}

.s4t-marquee:hover .s4t-marquee__track {
	animation-play-state: paused;
}

.s4t-marquee__track li {
	font-family: var(--s4t-font-display);
	font-size: clamp(1.125rem, 1.4vw + 0.6rem, 1.5rem);
	font-weight: 600;
	color: var(--s4t-border-strong);
	white-space: nowrap;
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.s4t-marquee__track li:hover {
	color: var(--s4t-brand);
}

@keyframes s4t-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* ==========================================================================
   4. Services grid
   ========================================================================== */

.s4t-services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s4t-space-5);
}

.s4t-service {
	display: flex;
	flex-direction: column;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-service:hover {
	transform: translateY(-5px);
	border-color: var(--s4t-border-strong);
	box-shadow: var(--s4t-shadow-lg);
}

/* Tinted media panel with the icon centred. */
.s4t-service__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border-radius: var(--s4t-radius-md);
	background: linear-gradient(150deg, var(--s4t-brand-tint) 0%, var(--s4t-brand-pale) 100%);
	margin-block-end: var(--s4t-space-5);
	overflow: hidden;
}

.s4t-service__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: linear-gradient(150deg, var(--s4t-brand-light), var(--s4t-brand-strong));
	color: var(--s4t-white);
	box-shadow: 0 10px 22px -10px rgba(var(--s4t-brand-strong-rgb), 0.75);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-service:hover .s4t-service__icon {
	transform: translateY(-3px) rotate(-4deg) scale(1.04);
}

.s4t-service__title {
	font-size: var(--s4t-text-xl);
	margin-block-end: var(--s4t-space-2);
}

/* Optional one-line strapline between the title and the body copy. */
.s4t-service__kicker {
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	color: var(--s4t-brand);
	margin-block-end: var(--s4t-space-3);
}

.s4t-service__text {
	font-size: var(--s4t-text-sm);
	line-height: 1.75;
	margin-block-end: var(--s4t-space-4);
}

/* Optional closing statement, set apart from the body copy. */
.s4t-service__note {
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	color: var(--s4t-ink);
	margin-block-end: var(--s4t-space-4);
}

.s4t-service__link {
	margin-block-start: auto;
}

/* ==========================================================================
   5. Values ("why us")
   The stats bar and the value cards themselves are shared primitives and
   live in style.css; only the homepage arrangement is here.
   ========================================================================== */

.s4t-home-section .s4t-stats {
	margin-block-end: clamp(3rem, 7vw, var(--s4t-space-9));
}

.s4t-values {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: start;
	gap: clamp(2rem, 5vw, var(--s4t-space-8));
}

.s4t-values__intro .s4t-eyebrow {
	margin-block-end: var(--s4t-space-4);
}

.s4t-values__title {
	margin-block-end: var(--s4t-space-4);
}

.s4t-values__intro p {
	margin-block-end: var(--s4t-space-4);
}

/* Short statements of intent, ticked rather than bulleted. */
.s4t-values__list {
	list-style: none;
	margin: 0 0 var(--s4t-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s4t-space-2);
}

.s4t-values__list li {
	position: relative;
	padding-left: 1.6rem;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 500;
	color: var(--s4t-ink);
}

.s4t-values__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--s4t-brand);
	border-bottom: 2px solid var(--s4t-brand);
	transform: rotate(-45deg);
}

.s4t-values__closing {
	font-family: var(--s4t-font-display);
	font-weight: 600;
	color: var(--s4t-ink);
	margin-block-end: var(--s4t-space-5);
}

.s4t-values__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4t-space-4);
}

/* ==========================================================================
   6. Industries
   ========================================================================== */

.s4t-industries {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--s4t-space-4);
}

.s4t-industry {
	text-align: center;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5) var(--s4t-space-3);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-industry:hover {
	transform: translateY(-4px);
	border-color: var(--s4t-border-strong);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-industry__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 auto var(--s4t-space-3);
	border-radius: 12px;
	background: var(--s4t-brand-soft);
	color: var(--s4t-brand);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-industry:hover .s4t-industry__icon {
	transform: translateY(-2px) scale(1.06);
}

.s4t-industry__title {
	font-size: var(--s4t-text-sm);
	font-weight: 700;
	margin-block-end: 0.35rem;
}

.s4t-industry__text {
	font-size: var(--s4t-text-xs);
	line-height: 1.6;
	color: var(--s4t-muted);
	margin: 0;
}

/* ==========================================================================
   7. Testimonials
   ========================================================================== */

/* auto-fit so the row stays even whether there are three quotes or four. */
.s4t-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--s4t-space-4);
}

.s4t-quote {
	display: flex;
	flex-direction: column;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	margin: 0;
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-quote:hover {
	transform: translateY(-4px);
	border-color: var(--s4t-border-strong);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-quote__rating {
	display: flex;
	gap: 0.15rem;
	color: var(--s4t-brand);
	margin-block-end: var(--s4t-space-4);
}

.s4t-quote__text {
	border: 0;
	padding: 0;
	font-size: var(--s4t-text-sm);
	font-family: var(--s4t-font-body);
	line-height: 1.75;
	color: var(--s4t-body);
	margin-block-end: var(--s4t-space-5);
}

.s4t-quote__author {
	display: flex;
	align-items: center;
	gap: var(--s4t-space-3);
	margin-block-start: auto;
}

.s4t-quote__avatar {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: var(--s4t-brand);
	color: var(--s4t-white);
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 700;
}

.s4t-quote__author strong {
	display: block;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	color: var(--s4t-ink);
	line-height: 1.35;
}

.s4t-quote__author em {
	display: block;
	font-style: normal;
	font-size: var(--s4t-text-xs);
	color: var(--s4t-muted);
	line-height: 1.35;
}

/* ==========================================================================
   8. Latest posts
   The post card itself is a shared primitive defined in style.css; only the
   homepage grid lives here.
   ========================================================================== */

.s4t-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s4t-space-4);
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* Laptop */
@media (max-width: 1100px) {
	.s4t-industries {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.s4t-quotes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tablet — hero stacks, visual moves below the copy. */
@media (max-width: 960px) {
	.s4t-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s4t-space-7);
	}

	.s4t-hero__visual {
		order: 2;
		max-width: 560px;
		width: 100%;
		margin-inline: auto;
	}

	.s4t-services,
	.s4t-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.s4t-values {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mobile */
@media (max-width: 640px) {
	.s4t-hero__title {
		font-size: clamp(2rem, 8vw, 2.75rem);
	}

	.s4t-hero__actions .s4t-btn {
		flex: 1 1 auto;
	}

	.s4t-services,
	.s4t-posts,
	.s4t-quotes,
	.s4t-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.s4t-industries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Badges crowd the collage at this size. */
	.s4t-scene__badge--top {
		top: 0;
	}

	.s4t-scene__badge--bottom {
		bottom: 0;
	}

	.s4t-scene__badge em {
		display: none;
	}
}

/* ==========================================================================
   10. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.s4t-marquee__track {
		animation: none;
	}

	/* Without the scroll, show the strip centred instead of clipped. */
	.s4t-marquee__viewport {
		width: 100%;
		justify-content: center;
		overflow-x: auto;
	}

	.s4t-marquee__viewport .s4t-marquee__track[aria-hidden="true"] {
		display: none;
	}
}