/* ======================================
   SECTION BACKGROUND — DARK INDUSTRIAL
====================================== */

.dr1052contactform {
	padding: 90px 20px;
	background:
		radial-gradient(circle at top, rgba(15,118,110,.18), transparent 60%),
		linear-gradient(180deg, #020617, #01030a);
	overflow: hidden;
	font-family: 'Montserrat', sans-serif;
}

/* ======================================
   CONTACT CARD (STEEL PANEL)
====================================== */

.contact-card {
	position: relative;
	max-width: 480px;
	margin: auto;
	background: linear-gradient(145deg, #0b1220, #050b15);
	padding: 46px 38px;
	border-radius: 22px;

	/* BASE STATE — ALWAYS VISIBLE (MOBILE SAFE) */
	opacity: 1;
	transform: translateY(0);

	transform-style: preserve-3d;
	will-change: transform;

	box-shadow:
		0 45px 120px rgba(0,0,0,.85),
		inset 0 1px 0 rgba(255,255,255,.05);
}

/* Industrial glow seam */
.contact-card::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 24px;
	background: linear-gradient(
		120deg,
		transparent,
		#0f766e,
		#a16207,
		transparent
	);
	background-size: 300% 300%;
	filter: blur(16px);
	z-index: -1;
	animation: glowMove 7s linear infinite;
}

/* ======================================
   TITLES
====================================== */

.contact-title {
	font-size: 26px;
	font-weight: 800;
	color: #e5e7eb;
	margin-bottom: 6px;
	transform: translateZ(35px);
	text-shadow: 0 8px 22px rgba(0,0,0,.8);
}

.contact-subtitle {
	font-size: 15px;
	color: #9ca3af;
	line-height: 1.7;
	margin-bottom: 30px;
	transform: translateZ(22px);
}

/* ======================================
   FORM FIELDS
====================================== */

.field {
	position: relative;
	margin-bottom: 22px;
	transform: translateZ(15px);
}

input,
textarea,
select {
	width: 100%;
	padding: 14px;
	font-size: 14px;
	border-radius: 12px;
	border: 1.5px solid #1e293b;
	background: #020617;
	color: #e5e7eb;
	outline: none;
	transition: .25s;
}

textarea {
	min-height: 120px;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: transparent;
}

/* Focus — precision light */
input:focus,
textarea:focus,
select:focus {
	border-color: #0f766e;
	box-shadow:
		0 0 0 3px rgba(15,118,110,.25),
		0 10px 30px rgba(0,0,0,.8);
}

/* Floating labels */

label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	background: #020617;
	padding: 0 6px;
	font-size: 13px;
	color: #6b7280;
	pointer-events: none;
	transition: .25s;
}

textarea + label {
	top: 16px;
	transform: none;
}

input:focus + label,
input:not(:placeholder-shown) + label,
textarea:focus + label,
textarea:not(:placeholder-shown) + label,
select:focus + label,
select:not([value=""]) + label {
	top: -8px;
	font-size: 11px;
	color: #0f766e;
}

/* Select arrow */

select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, #0f766e 50%),
		linear-gradient(135deg, #0f766e 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 18px,
		calc(100% - 12px) 18px;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* ======================================
   BUTTON — MACHINE PRESS
====================================== */

.submit-btn {
	width: 100%;
	padding: 15px;
	border-radius: 14px;
	border: none;
	background: linear-gradient(135deg, #0f766e, #064e3b);
	color: #ecfeff;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;

	transform-style: preserve-3d;
	transform: translateZ(18px);
	transition: .25s;

	box-shadow:
		0 20px 40px rgba(0,0,0,.85),
		inset 0 -3px 0 rgba(0,0,0,.6);
}

.submit-btn:hover {
	transform: translateZ(28px) translateY(-2px);
	box-shadow:
		0 30px 60px rgba(0,0,0,.95);
}

/* ======================================
   STATUS MESSAGE
====================================== */

.form-status {
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid #1e293b;
	background: #020617;
	color: #e5e7eb;
	transform: translateZ(10px);
}

/* Error */
.form-status[style*="dc2626"] {
	border-color: #7f1d1d;
	color: #fca5a5;
	animation: shake .35s;
}

/* Success */
.form-status[style*="16a34a"] {
	border-color: #14532d;
	color: #86efac;
}

/* ======================================
   FOOT NOTE
====================================== */

.contact-note {
	margin-top: 18px;
	font-size: 13px;
	text-align: center;
	color: #9ca3af;
	transform: translateZ(10px);
}

.hp { display: none; }

/* ======================================
   DESKTOP-ONLY 3D & ANIMATION
====================================== */

@media (min-width: 769px) {

	.dr1052contactform {
		perspective: 1400px;
	}

	.contact-card {
		opacity: 0;
		transform: translateY(70px) rotateX(18deg);
		animation: cardEnter3D 1.1s cubic-bezier(.22,1,.36,1) forwards;
	}

	.contact-card:hover {
		transform:
			translateY(-10px)
			rotateX(7deg)
			rotateY(-6deg);
		box-shadow:
			0 65px 160px rgba(0,0,0,.95);
	}
}

/* ======================================
   MOBILE — SAME DESIGN, SAFE RENDER
====================================== */

@media (max-width: 768px) {
	.dr1052contactform {
		padding: 70px 16px;
	}
}

/* ======================================
   ANIMATIONS
====================================== */

@keyframes cardEnter3D {
	from {
		opacity: 0;
		transform: translateY(70px) rotateX(18deg);
	}
	to {
		opacity: 1;
		transform: translateY(0) rotateX(0deg);
	}
}

@keyframes glowMove {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes shake {
	0%,100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}