/*--------------------------------------------------------------
# Front Page — Homepage-Specific Styles
#
# Conditionally loaded only on the front page.
# Covers: hero, silo cards, USP cards, city tiles, testimonials, blog.
--------------------------------------------------------------*/

/* ==========================================================================
   Front Page Hero — Base
   ========================================================================== */

.front-hero {
	background-color: var(--color-primary);
	background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #020228 100%);
	color: var(--color-text-inverse);
	padding: var(--space-12) 0 var(--space-10);
	position: relative;
	overflow: hidden;
}

/* --- Decorative Background Shapes --- */
.front-hero__bg-shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.front-hero__shape {
	position: absolute;
	border-radius: var(--radius-full);
	opacity: 0.04;
	background: var(--color-accent);
}

.front-hero__shape--1 {
	width: 600px;
	height: 600px;
	top: -200px;
	right: -100px;
}

.front-hero__shape--2 {
	width: 400px;
	height: 400px;
	bottom: -150px;
	left: -100px;
}

.front-hero__shape--3 {
	width: 200px;
	height: 200px;
	top: 50%;
	left: 55%;
	opacity: 0.03;
}

/* --- Trust Bar --- */
.front-hero__trust-bar {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	margin-bottom: var(--space-5);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.front-hero__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.front-hero__stars-wrap {
	color: var(--color-star);
	display: inline-flex;
	gap: 2px;
}

.front-hero__review-count {
	opacity: 0.7;
	font-size: var(--text-xs);
}

.front-hero__divider {
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, 0.3);
}

.front-hero__available {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: var(--weight-semibold);
}

.front-hero__pulse {
	width: 8px;
	height: 8px;
	background-color: #22c55e;
	border-radius: var(--radius-full);
	display: inline-block;
	position: relative;
}

.front-hero__pulse::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: var(--radius-full);
	border: 2px solid #22c55e;
	animation: front-hero-pulse 2s ease-in-out infinite;
}

@keyframes front-hero-pulse {
	0%, 100% { opacity: 0; transform: scale(0.8); }
	50% { opacity: 0.6; transform: scale(1.3); }
}

/* --- Title --- */
.front-hero__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-4);
	color: var(--color-text-inverse);
}

.front-hero__title-accent {
	color: var(--color-accent);
	position: relative;
}

/* --- Subtitle --- */
.front-hero__subtitle {
	font-size: var(--text-lg);
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: var(--space-6);
	max-width: 540px;
	line-height: var(--leading-relaxed);
}

/* --- USP Checks (front-hero specific) --- */
.front-hero__checks {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

.front-hero__checks li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
}

.front-hero__checks li i {
	color: var(--color-accent);
	font-size: var(--text-lg);
	flex-shrink: 0;
}

/* --- CTA Buttons --- */
.front-hero__ctas {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	align-items: center;
}

.btn-phone--hero {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
	font-size: var(--text-lg);
}

.btn-phone__ring {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-full);
	font-size: var(--text-lg);
	animation: phone-ring 3s ease-in-out infinite;
}

@keyframes phone-ring {
	0%, 100% { transform: rotate(0deg); }
	5% { transform: rotate(15deg); }
	10% { transform: rotate(-15deg); }
	15% { transform: rotate(10deg); }
	20% { transform: rotate(-10deg); }
	25% { transform: rotate(0deg); }
}

.btn-phone__label {
	display: flex;
	flex-direction: column;
	text-align: left;
	line-height: 1.2;
}

.btn-phone__small {
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	opacity: 0.9;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.btn-quote--outline {
	background: rgba(255, 255, 255, 0.08);
	border: none;
	color: var(--color-text-inverse);
	text-decoration: none;
}

.btn-quote--outline:hover {
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-text-inverse);
	text-decoration: none;
}

/* --- Insurance Badge --- */
.front-hero .front-hero__insurance {
	margin-top: var(--space-5);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(213, 173, 54, 0.12);
	border: 1px solid rgba(213, 173, 54, 0.25);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-accent);
}

.front-hero__insurance i {
	color: var(--color-accent);
}

/* ==========================================================================
   Front Page Hero — Feature Panel (right column)
   ========================================================================== */

.front-hero__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Stat Cards */
.front-hero__stat-card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-5);
	transition: transform var(--transition-base), background var(--transition-base);
}

.front-hero__stat-card:hover {
	transform: translateX(-4px);
	background: rgba(255, 255, 255, 0.1);
}

.front-hero__stat-icon {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(213, 173, 54, 0.15);
	color: var(--color-accent);
	border-radius: var(--radius-md);
	font-size: var(--text-xl);
	flex-shrink: 0;
}

.front-hero__stat-card--primary .front-hero__stat-icon {
	background: rgba(255, 90, 9, 0.15);
	color: var(--color-emergency);
}

.front-hero__stat-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.front-hero__stat-number {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	line-height: 1.2;
}

.front-hero__stat-label {
	font-size: var(--text-sm);
	opacity: 0.7;
	line-height: 1.3;
}

/* Trust Seal */
.front-hero__trust-seal {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: linear-gradient(135deg, rgba(213, 173, 54, 0.12), rgba(213, 173, 54, 0.06));
	border: 1px solid rgba(213, 173, 54, 0.2);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-5);
	margin-top: var(--space-1);
}

.front-hero__trust-seal > i {
	font-size: var(--text-2xl);
	color: var(--color-accent);
	flex-shrink: 0;
}

.front-hero__trust-seal div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.front-hero__trust-seal strong {
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
}

.front-hero__trust-seal span {
	font-size: var(--text-sm);
	opacity: 0.7;
}

/* ==========================================================================
   Services Section (4 Silos)
   ========================================================================== */

.front-services {
	padding: var(--space-10) 0;
	background-color: var(--color-bg-alt);
}

/* Section Header */
.front-services__header {
	text-align: center;
	margin-bottom: var(--space-8);
}

.front-services__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--color-primary);
	color: var(--color-accent);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	margin-bottom: var(--space-4);
}

.front-services__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-3xl);
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}

.front-services__subtitle {
	font-size: var(--text-md);
	color: var(--color-text-light);
	line-height: var(--leading-relaxed);
	max-width: 620px;
	margin: 0 auto;
}

/* Service Grid */
.front-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

/* Silo Card */
.silo-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-5);
	text-decoration: none;
	color: var(--color-text);
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
}

.silo-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
}

.silo-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	transform: scaleX(0);
	transition: transform var(--transition-base);
}

.silo-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
	color: var(--color-text);
}

.silo-card:hover::after {
	transform: scaleX(1);
}

/* Tag */
.silo-card__tag {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-accent-dark);
	background: rgba(213, 173, 54, 0.1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
}

/* Icon */
.silo-card__icon {
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
	color: var(--color-accent);
	border-radius: var(--radius-lg);
	font-size: var(--text-2xl);
	margin-bottom: var(--space-4);
	transition: all var(--transition-fast);
}

.silo-card:hover .silo-card__icon {
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	border-radius: var(--radius-full);
}

.silo-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

.silo-card__desc {
	font-size: var(--text-sm);
	color: var(--color-text-light);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-4);
}

.silo-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
}

.silo-card__link i {
	font-size: var(--text-xs);
	transition: transform var(--transition-fast);
}

.silo-card:hover .silo-card__link {
	color: var(--color-accent-dark);
}

.silo-card:hover .silo-card__link i {
	transform: translateX(4px);
}

/* ==========================================================================
   USP Section (Why Choose Us)
   ========================================================================== */

.front-usp {
	padding: var(--space-10) 0;
	background-color: var(--color-bg);
}

/* Section Header */
.front-usp__header {
	text-align: center;
	margin-bottom: var(--space-8);
}

.front-usp__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(213, 173, 54, 0.12);
	border: 1px solid rgba(213, 173, 54, 0.25);
	color: var(--color-accent-dark);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	margin-bottom: var(--space-4);
}

.front-usp__badge i {
	color: var(--color-accent);
}

.front-usp__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-3xl);
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}

.front-usp__title-accent {
	color: var(--color-accent-dark);
}

.front-usp__subtitle {
	font-size: var(--text-md);
	color: var(--color-text-light);
	line-height: var(--leading-relaxed);
	max-width: 580px;
	margin: 0 auto;
}

/* USP Grid */
.front-usp__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}

/* USP Card */
.usp-card {
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-5);
	text-align: center;
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
}

.usp-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-base);
}

.usp-card:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.usp-card:hover::before {
	transform: scaleX(1);
}

.usp-card__icon-wrap {
	margin-bottom: var(--space-4);
}

.usp-card__icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
	color: var(--color-accent);
	border-radius: var(--radius-lg);
	font-size: var(--text-xl);
	margin: 0 auto;
	transition: all var(--transition-fast);
}

.usp-card:hover .usp-card__icon {
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	border-radius: var(--radius-full);
}

.usp-card__highlight {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--color-accent-dark);
	margin-bottom: var(--space-2);
}

.usp-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

.usp-card__desc {
	font-size: var(--text-sm);
	color: var(--color-text-light);
	line-height: var(--leading-relaxed);
	margin: 0;
}

/* ==========================================================================
   Front Cities Section
   ========================================================================== */

.front-cities {
	padding: var(--space-10) 0;
	background-color: var(--color-bg-alt);
}

/* Section Header */
.front-cities__header {
	text-align: center;
	margin-bottom: var(--space-8);
}

.front-cities__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--color-primary);
	color: var(--color-accent);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	margin-bottom: var(--space-4);
}

.front-cities__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-3xl);
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}

.front-cities__subtitle {
	font-size: var(--text-md);
	color: var(--color-text-light);
	line-height: var(--leading-relaxed);
	max-width: 600px;
	margin: 0 auto;
}

/* City Grid */
.front-cities__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
}

/* City Tile */
.front-cities__tile {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-5);
	text-decoration: none;
	color: var(--color-text);
	transition: all var(--transition-base);
	position: relative;
}

.front-cities__tile:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	color: var(--color-text);
}

.front-cities__tile-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
	color: var(--color-accent);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	flex-shrink: 0;
	transition: background-color var(--transition-fast);
}

.front-cities__tile:hover .front-cities__tile-icon {
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.front-cities__tile-name {
	font-weight: var(--weight-semibold);
	font-size: var(--text-base);
	flex-grow: 1;
}

.front-cities__tile-arrow {
	font-size: var(--text-xs);
	color: var(--color-text-light);
	opacity: 0;
	transform: translateX(-4px);
	transition: all var(--transition-fast);
}

.front-cities__tile:hover .front-cities__tile-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--color-primary);
}

/* View All Footer */
.front-cities__footer {
	text-align: center;
	margin-top: var(--space-6);
}

.front-cities__all-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-weight: var(--weight-bold);
	font-size: var(--text-md);
	text-decoration: none;
	padding: var(--space-3) var(--space-5);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.front-cities__all-link:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.front-cities__all-link i {
	transition: transform var(--transition-fast);
}

.front-cities__all-link:hover i {
	transform: translateX(4px);
}

/* Testimonial cards → moved to components/testimonials.css */

/* ==========================================================================
   Blog Preview Cards
   ========================================================================== */

.blog-preview-card {
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 100%;
}

.blog-preview-card__image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.blog-preview-card__content {
	padding: var(--space-5);
}

.blog-preview-card__date {
	font-size: var(--text-xs);
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.blog-preview-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	margin: var(--space-2) 0;
}

.blog-preview-card__title a {
	color: var(--color-primary);
	text-decoration: none;
}

.blog-preview-card__title a:hover {
	color: var(--color-accent-dark);
}

.blog-preview-card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-light);
	line-height: var(--leading-relaxed);
	margin: 0;
}

/* ==========================================================================
   CTA Section (shared with city-landing)
   ========================================================================== */

.cta-city-section {
	background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #020228 100%);
	color: var(--color-text-inverse);
	padding: var(--space-12) 0;
	position: relative;
	overflow: hidden;
}

.cta-city-section__shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cta-city-section__shape {
	position: absolute;
	border-radius: var(--radius-full);
	opacity: 0.04;
	background: var(--color-accent);
}

.cta-city-section__shape--1 {
	width: 500px;
	height: 500px;
	top: -200px;
	left: -150px;
}

.cta-city-section__shape--2 {
	width: 300px;
	height: 300px;
	bottom: -100px;
	right: -80px;
}

.cta-city-section__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(213, 173, 54, 0.15);
	border: 1px solid rgba(213, 173, 54, 0.25);
	color: var(--color-accent);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	margin-bottom: var(--space-4);
}

.cta-city-section__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-6);
	color: var(--color-text-inverse);
}

.cta-city-section__features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cta-city-section__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
}

.cta-city-section__features li:last-child {
	margin-bottom: 0;
}

.cta-city-section__feature-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(213, 173, 54, 0.15);
	color: var(--color-accent);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	flex-shrink: 0;
	margin-top: 2px;
}

.cta-city-section__features li strong {
	color: var(--color-text-inverse);
}

.cta-city-section__card {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
}

.cta-city-section__card-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	opacity: 0.7;
	margin-bottom: var(--space-4);
}

.btn-phone--cta {
	width: 100%;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-xl);
}

.cta-city-section__card-divider {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-4) 0;
}

.cta-city-section__card-divider::before,
.cta-city-section__card-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
}

.cta-city-section__card-divider span {
	font-size: var(--text-sm);
	opacity: 0.5;
	text-transform: lowercase;
}

.cta-city-section__card-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

.btn-whatsapp--full,
.btn-quote--full {
	width: 100%;
	justify-content: center;
	font-size: var(--text-base);
	padding: var(--space-3) var(--space-4);
}

.cta-city-section__card-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	margin-bottom: 0;
	font-size: var(--text-sm);
	opacity: 0.6;
}

.cta-city-section__card-note i {
	color: var(--color-accent);
	opacity: 1;
}

.btn-quote--full {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
	border: none;
}

.btn-quote--full:hover {
	background-color: var(--color-accent-dark);
	color: var(--color-primary-dark);
	transform: translateY(-2px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
	.front-hero__panel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-top: var(--space-6);
	}

	.front-hero__trust-seal {
		grid-column: 1 / -1;
	}

	.front-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.front-usp__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.front-cities__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.cta-city-section__card {
		margin-top: var(--space-5);
	}
}

@media (max-width: 767.98px) {
	.front-hero {
		padding: var(--space-8) 0 var(--space-6);
	}

	.front-hero__title {
		font-size: var(--text-2xl);
	}

	.front-hero__subtitle {
		font-size: var(--text-base);
	}

	.front-hero__trust-bar {
		flex-wrap: wrap;
		gap: var(--space-2);
		justify-content: center;
	}

	.front-hero__divider {
		display: none;
	}

	.front-hero__checks {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}

	.front-hero__checks li {
		font-size: var(--text-sm);
	}

	.front-hero__ctas {
		flex-direction: column;
	}

	.front-hero__ctas .btn-phone--hero,
	.front-hero__ctas .btn-whatsapp,
	.front-hero__ctas .btn-quote--outline {
		width: 100%;
		justify-content: center;
	}

	.front-hero__panel {
		grid-template-columns: 1fr;
	}

	.front-hero__shape--1 {
		width: 300px;
		height: 300px;
		top: -100px;
		right: -80px;
	}

	.front-hero__shape--2,
	.front-hero__shape--3 {
		display: none;
	}

	/* Services Section */
	.front-services__title {
		font-size: var(--text-xl);
	}

	.front-services__grid {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	.silo-card {
		flex-direction: row;
		text-align: left;
		align-items: flex-start;
		padding: var(--space-4);
		gap: var(--space-4);
	}

	.silo-card__body {
		align-items: flex-start;
		min-width: 0;
	}

	.silo-card__tag {
		margin-bottom: var(--space-2);
	}

	.silo-card__icon {
		width: 52px;
		height: 52px;
		font-size: var(--text-lg);
		margin-bottom: 0;
		flex-shrink: 0;
	}

	.silo-card__desc {
		margin-bottom: var(--space-2);
	}

	/* USP Section */
	.front-usp__title {
		font-size: var(--text-xl);
	}

	.front-usp__grid {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	.usp-card {
		display: flex;
		text-align: left;
		padding: var(--space-4);
		gap: var(--space-4);
		flex-direction: row;
		align-items: flex-start;
	}

	.usp-card__icon-wrap {
		margin-bottom: 0;
	}

	.usp-card__icon {
		width: 48px;
		height: 48px;
		font-size: var(--text-base);
		margin: 0;
	}

	/* Cities Section */
	.front-cities__title {
		font-size: var(--text-xl);
	}

	.front-cities__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
	}

	.front-cities__tile {
		padding: var(--space-3) var(--space-4);
	}

	.front-cities__tile-icon {
		width: 34px;
		height: 34px;
		font-size: var(--text-xs);
	}

	.front-cities__tile-name {
		font-size: var(--text-sm);
	}

	.front-cities__tile-arrow {
		display: none;
	}

	/* CTA Section */
	.cta-city-section {
		padding: var(--space-8) 0;
	}

	.cta-city-section__heading {
		font-size: var(--text-xl);
	}

	.cta-city-section__card {
		padding: var(--space-4);
	}

	.cta-city-section__card-buttons {
		grid-template-columns: 1fr;
	}

	.btn-phone--cta {
		font-size: var(--text-lg);
		padding: var(--space-3) var(--space-4);
	}

	.cta-city-section__feature-icon {
		width: 30px;
		height: 30px;
		font-size: var(--text-xs);
	}

	.cta-city-section__features li {
		font-size: var(--text-base);
	}
}