:root{
  --bg:#1d253b;
  --card:#26324c;
  --input:#1d253b;
  --gold:#a08e68;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:'Raleway',sans-serif;
}
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:40px 24px;
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.media{display:flex;justify-content:center}
.hero{width:100%;height:auto;border-radius:6px;display:none}
.hero-desktop{display:block}
.hero-mobile{display:none}
.card{
  background:var(--card);
  border-radius:8px;
  padding:32px;
  max-width:560px;
  width:100%;
  margin-left:auto;
}
h1{
  font-family:'Playfair Display', serif;
  font-weight:600;
  margin:0 0 24px;
  font-size:32px;
  line-height:1.2;
}
.field{margin-bottom:16px}
label{display:block;margin-bottom:8px;font-weight:500}
input[type="text"],input[type="email"],textarea{
  width:100%;
  background:var(--input);
  border:1px solid rgba(255,255,255,.08);
  color:var(--white);
  padding:12px 14px;
  border-radius:6px;
  font-size:16px;
  outline:none;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.55)}
input:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(160,142,104,.2)}
.check{display:flex;align-items:center;gap:10px;margin:12px 0 20px;font-size:14px}
.check input{accent-color:var(--gold)}
.check a{color:var(--gold);font-weight:600;text-decoration:none}
.check a:hover{text-decoration:underline}
button{
  width:100%;
  background:var(--gold);
  color:var(--white);
  border:none;
  border-radius:6px;
  padding:14px 18px;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
}
button:hover{filter:brightness(.95)}
@media (min-width: 980px){
  .wrap{grid-template-columns:1fr 1fr;align-items:start}
  .media{justify-content:flex-start}
  .hero-desktop{display:block}
  .hero-mobile{display:none}
}
@media (max-width: 979px){
  .hero-desktop{display:none}
  .hero-mobile{display:block}
  .card{margin:0 auto;max-width:640px}
}