* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #111; color: #fff; }
.page { min-height: 100vh; }
.hero { display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: center; min-height: 82vh; padding: 56px; background: linear-gradient(135deg, #ed008c 0%, #111 72%); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 14px; font-weight: 700; margin: 0 0 16px; }
h1 { font-size: clamp(44px, 8vw, 92px); line-height: 0.95; margin: 0 0 24px; }
.intro { max-width: 620px; font-size: 22px; line-height: 1.45; margin: 0 0 32px; }
.button, button { display: inline-block; border: 0; border-radius: 999px; padding: 16px 26px; background: #fff; color: #111; font-weight: 800; text-decoration: none; cursor: pointer; font-size: 16px; }
.card { background: #fff; color: #111; border-radius: 28px; padding: 30px; box-shadow: 0 24px 80px rgba(0,0,0,0.35); }
.card h2 { margin: 0 0 20px; font-size: 28px; }
label { display: block; font-weight: 700; margin: 14px 0; }
input, textarea { width: 100%; border: 1px solid #d7d7d7; border-radius: 14px; padding: 13px 14px; margin-top: 7px; font: inherit; }
button { width: 100%; background: #ed008c; color: #fff; margin-top: 10px; }
.hidden { display: none; }
.about { padding: 48px 56px 64px; max-width: 920px; }
.about h2 { font-size: 36px; margin: 0 0 16px; }
.about p { color: #ddd; font-size: 20px; line-height: 1.5; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding: 28px; } .card { border-radius: 22px; } .about { padding: 32px 28px 48px; } }