/* =========================================
   DR1060 SERVICES - FINAL CLEAN VERSION
   (NO overflow, NO global hacks)
========================================= */
.dr1060services {
	padding: 100px 16px;
	width: 100%;
	background: radial-gradient(circle at 20% 20%, rgba(77, 163, 255, 0.08),
		transparent 40%),
		radial-gradient(circle at 80% 80%, rgba(124, 77, 255, 0.08),
		transparent 40%), linear-gradient(135deg, #04050a, #070b14, #04050a);
	color: #fff;
}

/* INNER CONTAINER */
.dr1060services-inner {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

/* =========================================
   HEADER
========================================= */
.dr1060services-header {
	text-align: center;
	margin-bottom: 50px;
	padding: 0 6px;
}

.dr1060services-tag {
	display: inline-block;
	padding: 8px 16px;
	font-size: 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #8ab4ff;
}

.dr1060services-header h2 {
	font-size: 40px;
	margin: 18px 0;
	font-weight: 900;
	line-height: 1.2;
	word-break: break-word;
}

.dr1060services-header h2 span {
	background: linear-gradient(90deg, #4da3ff, #7c4dff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dr1060services-header p {
	max-width: 720px;
	margin: 0 auto;
	font-size: 15px;
	color: #cbd5f5;
	line-height: 1.6;
}

/* =========================================
   HERO
========================================= */
.dr1060services-hero {
	margin: 40px 0 60px;
	border-radius: 20px;
	width: 100%;
}

.dr1060services-hero img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

/* =========================================
   GRID (CRITICAL FIX)
========================================= */
.dr1060services-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* ⭐ FIX */
	gap: 20px;
	width: 100%;
}

/* =========================================
   CARD
========================================= */
.dr1060service-card {
	position: relative;
	min-width: 0; /* ⭐ CRITICAL */
	width: 100%;
	padding: 24px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(14px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
	transition: 0.35s ease;
	opacity: 0;
	transform: translateY(30px);
}

/* SHOW */
.dr1060service-card.show {
	opacity: 1;
	transform: translateY(0);
}

/* HOVER */
.dr1060service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 60px rgba(77, 163, 255, 0.2);
}

/* =========================================
   GLOW (SAFE - NO ESCAPE)
========================================= */
.service-glow {
	position: absolute;
	width: 100px;
	height: 100px;
	background: radial-gradient(circle, rgba(77, 163, 255, 0.25),
		transparent);
	top: 0;
	right: 0;
	pointer-events: none;
}

/* =========================================
   TEXT SAFETY
========================================= */
.dr1060service-card, .dr1060service-card * {
	word-break: break-word;
	overflow-wrap: anywhere;
}

.dr1060service-card h3 {
	font-size: 20px;
	margin-bottom: 6px;
}

.service-tag {
	font-size: 12px;
	color: #8ab4ff;
	margin-bottom: 10px;
}

.dr1060service-card p {
	font-size: 14px;
	color: #cbd5f5;
	line-height: 1.6;
}

/* LIST */
.dr1060service-card ul {
	margin: 12px 0;
	padding-left: 16px;
	font-size: 13px;
}

.dr1060service-card ul li {
	margin-bottom: 4px;
}

/* BUTTON */
.dr1060service-card a {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	color: #4da3ff;
	text-decoration: none;
}

/* =========================================
   FUTURE TAGS
========================================= */
.future-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.future-list span {
	padding: 5px 10px;
	font-size: 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
}

/* =========================================
   RESPONSIVE
========================================= */
@media ( max-width : 1024px) {
	.dr1060services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media ( max-width : 768px) {
	.dr1060services {
		padding: 70px 14px;
	}
	.dr1060services-header h2 {
		font-size: 26px;
	}
	.dr1060services-hero img {
		height: 220px;
	}
	.dr1060services-grid {
		grid-template-columns: 1fr;
	}
	.dr1060service-card {
		padding: 20px;
	}
}