:root {
  --navy: #10182f;
  --deep: #050814;
  --orange: #f97316;
  --orange-light: #ffb26b;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  color: white;
  background:
    radial-gradient(circle at 18% 18%, rgba(249, 115, 22, 0.38), transparent 34%),
    radial-gradient(circle at 82% 80%, rgba(255, 178, 107, 0.18), transparent 36%),
    radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.16), transparent 40%),
    linear-gradient(135deg, #050814, #10182f 55%, #050814);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black, transparent 75%);
  pointer-events: none;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.card {
  position: relative;
  width: min(100%, 720px);
  padding: 52px;
  border-radius: 44px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0.055)),
    rgba(16, 24, 47, 0.42);
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 50px 140px rgba(0,0,0,0.55),
    0 0 110px rgba(249,115,22,0.20);
  backdrop-filter: blur(38px) saturate(165%);
  -webkit-backdrop-filter: blur(38px) saturate(165%);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 0%, rgba(255,255,255,0.30), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(249,115,22,0.18), transparent 34%);
  pointer-events: none;
}

.logo-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  height: 135px;
  margin: 0 auto 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo {
  display: block;
  width: 260px;
  max-width: 75%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  transform: translateX(0);
  filter:
    drop-shadow(0 14px 24px rgba(0,0,0,0.30))
    drop-shadow(0 0 20px rgba(249,115,22,0.18));
}

h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
  font-weight: 850;
}

p {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 22px auto 38px;
  color: rgba(255,255,255,0.74);
  font-size: 1.04rem;
  line-height: 1.65;
}

.contact-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  text-align: left;
}

input,
textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 17px;
  padding: 16px 18px;
  color: white;
  font: inherit;
  outline: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 28px rgba(0,0,0,0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

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

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.68);
}

input:focus,
textarea:focus {
  border-color: rgba(249,115,22,0.95);
  box-shadow:
    0 0 0 4px rgba(249,115,22,0.16),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

button {
  margin-top: 8px;
  border: 0;
  border-radius: 18px;
  padding: 17px 22px;
  color: #10182f;
  font-size: 1rem;
  font-weight: 850;
  cursor: pointer;
  background:
    linear-gradient(135deg, #ffb26b, #f97316 52%, #ea580c);
  box-shadow:
    0 18px 44px rgba(249,115,22,0.42),
    inset 0 1px 0 rgba(255,255,255,0.48);
  transition: all 0.22s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 28px 60px rgba(249,115,22,0.55),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.brand {
  position: relative;
  z-index: 1;
  margin-top: 34px;
  color: var(--orange);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.brand span {
  color: rgba(255,255,255,0.42);
}

@media (max-width: 560px) {
  .page {
    padding: 18px;
  }

  .card {
    padding: 34px 22px 30px;
    border-radius: 32px;
  }

  .logo-panel {
    height: 105px;
    margin-bottom: 28px;
  }

  .logo {
    width: 220px;
    max-width: 78%;
  }

  h1 {
    font-size: 2.45rem;
  }

  p {
    font-size: 0.98rem;
  }
}

.return-link {
  position: relative;
  z-index: 1;
  color: var(--orange);
  font-weight: 800;
  text-decoration: none;
}