/*!
 * Meet Digital Marketing — Homepage Stylesheet
 * Premium agency layout: hero, trust bar, problem/solution, services,
 * why-us, process, case studies, dashboard, testimonials, industries,
 * about preview. Shared components (eyebrow, section-header, CTA
 * sections, FAQ accordion, scroll-reveal) now live in main.css so the
 * blog and contact pages can use them too.
 */

/* ---------- Hero ---------- */

.hero-section {
	position: relative;
	padding: 4.5rem 0 5rem;
	overflow: hidden;
	background:
		radial-gradient(60% 55% at 82% 8%, rgba(47, 94, 255, 0.10) 0%, rgba(47, 94, 255, 0) 70%),
		radial-gradient(45% 40% at 8% 90%, rgba(34, 211, 238, 0.10) 0%, rgba(34, 211, 238, 0) 70%),
		var(--color-bg);
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}

.hero-content h1 {
	margin-bottom: var(--spacing-md);
}

/* .hero-subtitle now lives in main.css as a shared component — used
   by the homepage hero and service page (.svc-hero) intros alike. */

.hero-cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: var(--spacing-lg) 0 var(--spacing-md);
}

.hero-trustline {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--color-text-secondary);
}

.hero-trustline span {
	color: var(--color-border);
	margin: 0 0.5em;
}

/* Dashboard visual — the page's signature element. The reusable
   .dashboard-card family now lives in main.css as a shared component
   (used here and on the PPC page); .float-chip stays here since it's
   positioned specifically for this hero's layout. */
.hero-visual {
	position: relative;
}

.float-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: white;
	border-radius: 0.875rem;
	padding: 0.75rem 1rem;
	box-shadow: var(--shadow-md);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-ink);
	z-index: 2;
}

.float-chip .chip-icon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(34, 211, 238, 0.14);
	color: var(--color-blue);
	flex-shrink: 0;
}

.float-chip--traffic {
	top: -1.25rem;
	right: -1rem;
}

.float-chip--leads {
	bottom: 2.75rem;
	left: -1.5rem;
}

.float-chip--rank {
	bottom: -1.25rem;
	right: 2rem;
}

/* ---------- Trust bar ---------- */

.trust-bar {
	padding: var(--spacing-xl) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	background: var(--color-card);
}

.trust-bar__heading {
	text-align: center;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: var(--spacing-lg);
}

.trust-bar__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-lg);
	text-align: center;
}

.trust-bar__stat .stat-value {
	font-family: var(--font-mono);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	color: var(--color-ink);
}

.trust-bar__stat .stat-caption {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin-top: 0.25rem;
}

.logos-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-xl);
	opacity: 0.6;
}

/* .problem-grid / .problem-card now live in main.css as shared
   components (used here and on the SEO page's problem section), next
   to the service cards, dark panel and process list. */

/* ---------- Case studies ---------- */

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.portfolio-card {
	background: var(--color-card);
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
}

.portfolio-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.portfolio-thumbnail {
	height: 190px;
	background: linear-gradient(135deg, var(--color-ink), var(--color-ink-2));
}

.portfolio-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolio-content {
	padding: 1.5rem;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.portfolio-kicker {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin-bottom: 0.5rem;
}

.portfolio-content h3 {
	font-size: 1.0625rem;
}

.portfolio-content p {
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	flex-grow: 1;
}

.portfolio-metrics {
	display: flex;
	gap: 1rem;
	margin: 0.25rem 0 1rem;
	flex-wrap: wrap;
}

.portfolio-metric {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-blue);
	background: rgba(47, 94, 255, 0.08);
	border-radius: 0.5rem;
	padding: 0.25rem 0.625rem;
}

.portfolio-link {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-ink);
	margin-top: auto;
}

.portfolio-link:hover {
	color: var(--color-blue);
}

.section-footer-link {
	text-align: center;
	margin-top: var(--spacing-xl);
}

/* .metrics-panel / .metrics-grid / .metric-tile now live in main.css
   as a shared component (used here and on the SEO page's results
   section). */

/* ---------- Testimonials ---------- */

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.testimonial-card {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 1rem;
	padding: 1.75rem;
}

.testimonial-rating {
	color: var(--color-cyan);
	letter-spacing: 0.15em;
	margin-bottom: 1rem;
	font-size: 0.9375rem;
}

.testimonial-text {
	font-size: 1rem;
	color: var(--color-text);
	margin-bottom: 1.25rem;
}

.testimonial-content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.testimonial-avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial-avatar-fallback {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-blue), var(--color-violet));
	color: white;
	font-family: var(--font-primary);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.testimonial-author {
	font-size: 0.9375rem;
	margin-bottom: 0.125rem;
}

.testimonial-title {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	margin-bottom: 0;
}

/* ---------- Industries ---------- */

.industries-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
}

.industry-card {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 0.875rem;
	padding: 1.25rem 1rem;
	text-align: center;
	transition: var(--transition);
}

.industry-card:hover {
	border-color: var(--color-blue);
	transform: translateY(-2px);
}

.industry-card__icon {
	width: 36px;
	height: 36px;
	margin: 0 auto 0.75rem;
	color: var(--color-blue);
}

.industry-card span {
	font-size: 0.875rem;
	font-weight: 500;
}

/* ---------- About preview ---------- */

.about-preview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.about-preview__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
}

.about-preview__stats .stat-value {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 1.625rem;
	color: var(--color-ink);
}

.about-preview__stats .stat-caption {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

.about-preview__visual {
	background: linear-gradient(150deg, rgba(47, 94, 255, 0.08), rgba(34, 211, 238, 0.08));
	border: 1px solid var(--color-border);
	border-radius: 1.25rem;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.about-preview__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* CTA sections and the FAQ accordion now live in main.css as shared
   components — see the "Shared premium components" block there. */

/* ---------- Blog ---------- */

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.blog-card {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 1rem;
	overflow: hidden;
	transition: var(--transition);
}

.blog-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.blog-thumbnail {
	height: 170px;
	background: var(--color-bg);
}

.blog-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-content {
	padding: 1.5rem;
}

.blog-meta {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	margin-bottom: 0.5rem;
}

.blog-content h3 {
	font-size: 1.0625rem;
}

.blog-content h3 a {
	color: var(--color-ink);
}

.blog-excerpt {
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
}

.blog-link {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.blog-link:hover {
	color: var(--color-blue);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.hero-visual { max-width: 460px; }
	.problem-grid { grid-template-columns: repeat(2, 1fr); }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.why-grid { grid-template-columns: repeat(2, 1fr); }
	.process-list { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
	.process-list::before { display: none; }
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
	.metrics-grid { grid-template-columns: repeat(2, 1fr); }
	.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
	.industries-grid { grid-template-columns: repeat(3, 1fr); }
	.about-preview { grid-template-columns: 1fr; }
	.about-preview__visual { order: -1; }
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
	.trust-bar__row { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
}

@media (max-width: 640px) {
	.problem-grid,
	.services-grid,
	.why-grid,
	.process-list,
	.portfolio-grid,
	.metrics-grid,
	.testimonials-grid,
	.blog-grid { grid-template-columns: 1fr; }
	.industries-grid { grid-template-columns: repeat(2, 1fr); }
	.cta-section { padding: 2.5rem 1.5rem; }
	.metrics-panel { padding: 1.75rem; }
	.float-chip { display: none; }
}