:root {
	--bg: #050505;
	--panel: #101010;
	--gold: #d7a94b;
	--gold2: #ffcf62;
	--muted: #c9c9c9;
	--line: rgba(255, 255, 255, .13);
	--variable: #D4A843;
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: Oswald, sans-serif;
	background: radial-gradient(circle at top, #1a1203, #050505 42%);
	color: #fff;
	overflow-x: hidden
}

a {
	color: inherit;
	text-decoration: none
}
p{
	color: white;
}


.hero {
	min-height: 92vh;
	padding: 95px 6% 60px;
	background: url('/mnt/data/1000004331.png') center/cover no-repeat;
	position: relative;
	display: grid;
	align-items: end
}

.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .78) 55%, #050505)
}

.hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(215, 169, 75, .12), transparent, rgba(57, 182, 255, .08));
	animation: pulse 4s infinite alternate
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 1050px
}

.tag {
	display: inline-flex;
	border: 1px solid rgba(215, 169, 75, .55);
	background: rgba(215, 169, 75, .13);
	color: #ffe6a7;
	border-radius: 999px;
	padding: 10px 16px;
	font-weight: 900;
	margin-bottom: 16px
}

.hero h1 {
	font-size: clamp(2.6rem, 7vw, 6.8rem);
	line-height: .9;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: -3px
}

.hero h1 span {
	color: var(--gold2);
	text-shadow: 0 0 28px rgba(215, 169, 75, .55)
}

.hero p {
	font-size: 1.25rem;
	color: #e8e8e8;
	max-width: 760px
}

.actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 25px
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 24px;
	border-radius: 14px;
	border: 1px solid var(--line);
	font-weight: 900;
	cursor: pointer;
	transition: .25s
}

.primary {
	background: linear-gradient(135deg, var(--gold), #ffe08a);
	color: #070707;
	box-shadow: 0 18px 55px rgba(215, 169, 75, .25)
}

.secondary {
	background: rgba(255, 255, 255, .08);
	color: #fff
}

.btn:hover {
	transform: translateY(-4px)
}

.gold-line {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	margin: 34px 0
}

.section {
	padding: 78px 6%
}

.title {
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1;
	margin: 0 0 14px
}

.sub {
	color: var(--muted);
	max-width: 760px;
	font-size: 1.08rem
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 32px
}

.card {
	background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
	border: 1px solid var(--line);
	padding: 30px;
	border-radius: 26px;
	box-shadow: 0 22px 70px rgba(0, 0, 0, .35);
	position: relative;
	overflow: hidden
}

.card:before {
	content: "";
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: rgba(215, 169, 75, .12);
	right: -40px;
	top: -40px;
	filter: blur(6px)
}

.card h2,
.card h3 {
	color: var(--gold2);
	margin-top: 0
}

.contact-item {
    margin: 18px 0;
    padding: 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .09);
    color: #fff;
}

.contact-item strong {
	color: #fff
}

.contact-item a {
	color: #ffe08a;
	font-weight: 900
}

.team-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 26px;
}

.mini {
	padding: 18px;
	border-radius: 18px;
	background: rgba(215, 169, 75, .09);
	border: 1px solid rgba(215, 169, 75, .25);
	font-weight: 900;
	text-align: center;
	color: #fff;
}

.quote {
	font-size: 1.8rem;
	line-height: 1.25;
	color: #fff;
	margin: 20px 0
}

.map-card {
	margin-top: 28px;
	border-radius: 26px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: #111
}

.map-placeholder {
	padding: 34px;
	text-align: center;
	background: linear-gradient(135deg, rgba(215, 169, 75, .13), rgba(255, 255, 255, .04))
}

.footer {
  padding: 34px 6%;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

@keyframes pulse {
	from {
		opacity: .65
	}

	to {
		opacity: 1
	}
}

@media(max-width:850px) {

	.grid,
	.team-strip {
		grid-template-columns: 1fr
	}

	.hero {
		min-height: 82vh
	}

	.hero h1 {
		letter-spacing: -1px
	}
}