:root {
  --bg: #f4eeee;
  --card: #f8f4f4;
  --ink: #5f2f37;
  --line: #e6d6d8;
  --focus: #ff5f1f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  background: radial-gradient(circle at 15% -10%, #ffd2bf 0%, rgba(255, 210, 191, 0) 40%), var(--bg);
}

main {
  overflow-x: clip;
}

.site-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 95% 5%, rgba(255, 106, 31, 0.18), transparent 35%),
    radial-gradient(circle at 5% 70%, rgba(184, 16, 42, 0.09), transparent 30%);
  z-index: 0;
}

.hero-gradient {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 70% 100%, rgba(255, 190, 130, 0.25) 0%, transparent 45%),
    linear-gradient(120deg, #a40f2a 10%, #e12434 45%, #ff6c1d 100%);
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

.content-wrap {
  margin: 0 auto;
  max-width: 1120px;
  padding: 1.5rem 1rem 3.5rem;
}

.panel {
  background: var(--card);
  border: 1px solid #efe4e5;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(120, 30, 40, 0.12);
}

.field-label {
  display: block;
  margin-bottom: 0.45rem;
  color: #59282f;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 600;
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  color: #5c3640;
  padding: 0.85rem 1rem;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.45;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-textarea {
  min-height: 140px;
  resize: vertical;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(255, 95, 31, 0.18);
}

.field-error {
  margin-top: 0.25rem;
  color: #c8202d;
  font-size: 0.95rem;
}

.cta-primary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0.62rem 1.15rem;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.cta-primary {
  color: white;
  background: linear-gradient(120deg, #ff7b23 0%, #ff4a1c 38%, #e3162f 100%);
  box-shadow: 0 9px 20px rgba(190, 35, 30, 0.25);
}

.cta-secondary {
  background: #fff7f2;
  border: 1px solid #e8d7d8;
  color: #a92b2e;
}

.cta-primary:hover,
.cta-secondary:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.chip {
  border: 1px solid #e0d2d3;
  background: #f7eded;
  color: #62353e;
  border-radius: 10px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip.is-active {
  border-color: #ff5f1f;
  background: #fff0e8;
  color: #b93928;
}

.toast-error {
  background: #fff0ef;
  border: 1px solid #e7b6b5;
  color: #842f31;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.muted {
  color: #8b6a70;
}

main .text-6xl {
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.15;
}

main .text-5xl {
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
  line-height: 1.2;
}

main .text-4xl {
  font-size: clamp(1.35rem, 1.9vw, 1.9rem);
  line-height: 1.25;
}

main .text-3xl {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.35;
}

main .text-2xl {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.4;
}

.brand-logo {
  display: block;
  width: auto;
  height: clamp(32px, 4vw, 54px);
  max-width: min(70vw, 460px);
  object-fit: contain;
}

.home-card-icon {
  display: block;
  width: auto;
  height: clamp(86px, 11vw, 150px);
  max-width: 100%;
  margin: 0 auto 1rem;
  object-fit: contain;
}

.home-step-icon {
  display: block;
  width: auto;
  height: clamp(94px, 12vw, 170px);
  max-width: 100%;
  margin: 0 auto 0.8rem;
  object-fit: contain;
}

.thanks-step-icon {
  display: block;
  width: auto;
  height: clamp(72px, 9vw, 118px);
  max-width: 100%;
  margin: 0 auto 0.35rem;
  object-fit: contain;
}

.lead-side-icon {
  flex: 0 0 auto;
  width: clamp(56px, 7vw, 88px);
  height: auto;
  object-fit: contain;
}

.auth-qr-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-qr-img {
  width: clamp(140px, 20vw, 210px);
  height: auto;
  border-radius: 14px;
  border: 1px solid #efd9db;
  background: #fff;
  padding: 0.4rem;
}

@media (max-width: 900px) {
  .hero-gradient {
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
  }
  .cta-primary,
  .cta-secondary {
    font-size: 0.98rem;
    padding: 0.58rem 1rem;
  }
  .brand-logo {
    height: clamp(30px, 8vw, 42px);
    max-width: 62vw;
  }
  .content-wrap {
    padding: 1.2rem 0.85rem 2.6rem;
  }
}

@media (max-width: 640px) {
  .panel {
    border-radius: 16px;
  }
  .home-card-icon {
    height: clamp(72px, 28vw, 108px);
  }
  .home-step-icon {
    height: clamp(80px, 30vw, 118px);
  }
}