@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --bg: #0d0913;
  --bg-2: #15101f;

  --card: rgba(24, 18, 34, 0.88);

  --ink: #f7f4fb;
  --muted: #b9b0c7;

  --purple: #9a5cff;
  --purple-2: #bf8cff;

  --orange: #ff8a2a;
  --orange-2: #ffb15f;

  --line: rgba(255, 255, 255, 0.11);

  --danger: #ff7c8e;
}



/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(154, 92, 255, 0.16),
      transparent 28rem
    ),
    radial-gradient(
      circle at 85% 25%,
      rgba(255, 138, 42, 0.12),
      transparent 24rem
    ),
    linear-gradient(
      180deg,
      #0a0710 0%,
      #0f0a17 48%,
      #08060c 100%
    );

  color: var(--ink);

  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x: hidden;
}


body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  opacity: 0.22;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 34px 34px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 70%
    );
}



/* =========================================================
   PAGE
   ========================================================= */

.shell {
  position: relative;

  width: min(100% - 28px, 860px);

  margin: 0 auto;

  padding: 18px 0 20px;

  z-index: 2;
}



/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;

  padding: 10px 6px 14px;
}


.eyebrow,
.kicker,
.footer-mark {
  font-family: "Space Grotesk", sans-serif;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  font-weight: 700;
}


.eyebrow {
  color: var(--orange-2);

  font-size: 0.72rem;

  margin-bottom: 7px;
}



/* =========================================================
   EXACT TWO LINE HEADING
   ========================================================= */

.scan-heading {
  margin: 0;
  padding: 0;

  width: 100%;
  max-width: none;

  display: flex;

  flex-direction: column;

  gap: 3px;

  font-family: "Space Grotesk", sans-serif;

  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.045em;
}


.scan-heading-white,
.scan-heading-orange {
  display: block;

  width: fit-content;

  max-width: 100%;

  white-space: nowrap;
}


/* FIRST LINE */

.scan-heading-white {
  color: #ffffff;

  font-size: 2.45rem;
}


/* SECOND LINE */

.scan-heading-orange {
  color: var(--orange);

  font-size: 2.05rem;

  margin-top: 2px;

  text-shadow:
    0 0 24px rgba(255, 138, 42, 0.16);
}



/* HERO SUBTEXT */

.hero-copy {
  max-width: 650px;

  margin: 9px 0 0;

  color: var(--muted);

  font-size: 0.95rem;

  line-height: 1.4;
}



/* =========================================================
   CARD
   ========================================================= */

.card {
  position: relative;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 26px;

  padding: 26px 30px 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    ),
    rgba(21, 16, 31, 0.78);

  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


.card::after {
  content: "✦";

  position: absolute;

  right: 24px;
  top: 12px;

  color: rgba(154, 92, 255, 0.18);

  font-size: 3rem;

  pointer-events: none;
}


.card-heading {
  position: relative;

  max-width: 650px;

  margin-bottom: 17px;

  z-index: 1;
}


.kicker {
  margin: 0 0 5px;

  color: var(--purple-2);

  font-size: 0.7rem;
}


.card-heading h2 {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(
    1.65rem,
    4vw,
    2.35rem
  );

  letter-spacing: -0.04em;
}


.card-heading p:last-child {
  color: var(--muted);

  margin: 6px 0 0;

  line-height: 1.35;

  font-size: 0.9rem;
}



/* =========================================================
   FORM
   ========================================================= */

.party-form {
  position: relative;

  display: grid;

  gap: 12px;

  z-index: 1;
}


.field {
  display: grid;

  gap: 6px;
}


.field-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 10px;
}


label {
  font-size: 0.82rem;

  color: #ddd5e8;

  font-weight: 700;
}



/* INPUTS */

input,
select,
textarea {
  width: 100%;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  background:
    rgba(255, 255, 255, 0.05);

  color: var(--ink);

  border-radius: 14px;

  padding: 11px 13px;

  font: inherit;

  outline: none;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}


textarea {
  resize: vertical;

  min-height: 78px;

  max-height: 160px;
}


input::placeholder,
textarea::placeholder {
  color: #7f758d;
}


input:focus,
select:focus,
textarea:focus {
  border-color:
    rgba(191, 140, 255, 0.8);

  background:
    rgba(255, 255, 255, 0.07);

  box-shadow:
    0 0 0 4px
    rgba(154, 92, 255, 0.1);
}



/* SELECTS */

select {
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  padding-right: 38px;
}


select option {
  background: #17101f;

  color: #ffffff;
}


.select-wrap {
  position: relative;
}


.select-wrap::after {
  content: "⌄";

  position: absolute;

  right: 14px;

  top: 50%;

  transform:
    translateY(-58%);

  pointer-events: none;

  color: var(--orange-2);

  font-size: 1.15rem;
}



/* HELPER TEXT */

.helper {
  color: #8e849b;

  font-size: 0.72rem;
}



/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.submit-btn {
  margin-top: 4px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 0;

  border-radius: 15px;

  padding: 13px 16px;

  cursor: pointer;

  color: #140c19;

  font-family: "Space Grotesk", sans-serif;

  font-size: 0.95rem;

  font-weight: 800;

  background:
    linear-gradient(
      135deg,
      var(--orange) 0%,
      #ffab55 48%,
      #bf8cff 100%
    );

  box-shadow:
    0 12px 28px
    rgba(255, 138, 42, 0.16);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}


.submit-btn:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.04);

  box-shadow:
    0 15px 34px
    rgba(255, 138, 42, 0.22);
}


.submit-btn:active {
  transform:
    translateY(0);
}


.submit-btn:disabled {
  opacity: 0.7;

  cursor: wait;
}


.button-icon {
  font-size: 1.3rem;

  line-height: 1;
}


.fine-print {
  text-align: center;

  color: #7f758d;

  font-size: 0.72rem;

  margin: -2px 0 0;
}



/* =========================================================
   VALIDATION
   ========================================================= */

.alert {
  margin-bottom: 14px;

  padding: 11px 13px;

  border:
    1px solid
    rgba(255, 124, 142, 0.28);

  border-radius: 12px;

  background:
    rgba(255, 124, 142, 0.08);

  color: #ffb4bf;

  font-size: 0.86rem;
}



/* HONEYPOT */

.hp-field {
  position: absolute !important;

  left: -10000px !important;

  width: 1px !important;

  height: 1px !important;

  overflow: hidden !important;
}



/* =========================================================
   FOOTER
   ========================================================= */

footer {
  text-align: center;

  padding: 16px 12px 4px;

  color: #766d83;
}


.footer-mark {
  font-size: 0.68rem;

  color: #9b91aa;
}


footer p {
  margin: 5px 0 0;

  font-size: 0.76rem;
}



/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.ambient {
  position: fixed;

  border-radius: 50%;

  filter: blur(80px);

  pointer-events: none;

  opacity: 0.2;

  z-index: 0;
}


.ambient-one {
  width: 260px;

  height: 260px;

  background: var(--purple);

  left: -120px;

  top: 42%;
}


.ambient-two {
  width: 210px;

  height: 210px;

  background: var(--orange);

  right: -100px;

  top: 12%;
}



/* =========================================================
   SUCCESS PAGE
   ========================================================= */

.success-shell {
  min-height: 100vh;

  display: grid;

  place-items: center;

  width: min(100% - 32px, 700px);

  margin: auto;

  padding: 32px 0;
}


.success-card {
  width: 100%;

  text-align: center;

  border: 1px solid var(--line);

  border-radius: 30px;

  padding:
    clamp(
      32px,
      7vw,
      64px
    );

  background:
    rgba(21, 16, 31, 0.82);

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.36);
}


.success-icon {
  font-size: 4rem;

  margin-bottom: 14px;
}


.success-card h1 {
  margin: 0;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(
      2.8rem,
      8vw,
      5rem
    );

  letter-spacing:
    -0.05em;
}


.success-card p {
  color: var(--muted);

  line-height: 1.6;

  max-width: 520px;

  margin:
    16px auto 26px;
}


.back-link {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  color: #140c19;

  background:
    linear-gradient(
      135deg,
      var(--orange),
      var(--purple-2)
    );

  border-radius: 14px;

  padding: 14px 18px;

  font-weight: 800;
}



/* =========================================================
   TABLET / PHONE
   ========================================================= */

@media (max-width: 680px) {

  .shell {
    width:
      min(
        100% - 14px,
        860px
      );

    padding-top: 8px;

    padding-bottom: 12px;
  }


  .hero {
    padding:
      7px 3px 11px;
  }


  .eyebrow {
    font-size: 0.64rem;

    margin-bottom: 5px;
  }


  /* TWO LINE HEADING */

  .scan-heading {
    gap: 2px;
  }


  .scan-heading-white {
    font-size: 1.82rem;
  }


  .scan-heading-orange {
    font-size: 1.52rem;

    margin-top: 2px;
  }


  .hero-copy {
    margin-top: 7px;

    font-size: 0.82rem;

    line-height: 1.3;
  }


  /* CARD */

  .card {
    padding:
      17px 14px 16px;

    border-radius: 21px;
  }


  .card-heading {
    margin-bottom: 12px;
  }


  .card-heading h2 {
    font-size: 1.5rem;
  }


  .card-heading p:last-child {
    font-size: 0.8rem;

    line-height: 1.3;
  }


  /* FORM */

  .party-form {
    gap: 10px;
  }


  label {
    font-size: 0.76rem;
  }


  input,
  select,
  textarea {
    padding:
      10px 11px;

    border-radius: 12px;

    font-size: 0.9rem;
  }


  select {
    padding-right: 34px;
  }


  textarea {
    min-height: 68px;
  }


  .field-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 8px;
  }


  .helper {
    font-size: 0.68rem;
  }


  .submit-btn {
    padding:
      12px 14px;

    font-size: 0.9rem;
  }


  footer {
    padding-top: 12px;
  }


  footer p {
    font-size: 0.7rem;
  }

}



/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 390px) {

  .scan-heading-white {
    font-size: 1.62rem;
  }


  .scan-heading-orange {
    font-size: 1.34rem;
  }


  .hero-copy {
    font-size: 0.78rem;
  }


  .card-heading p:last-child {
    display: none;
  }


  .helper {
    display: none;
  }


  footer {
    display: none;
  }

}



/* =========================================================
   EXTRA SMALL PHONE
   Keeps heading on exactly two lines
   ========================================================= */

@media (max-width: 340px) {

  .scan-heading-white {
    font-size: 1.48rem;
  }


  .scan-heading-orange {
    font-size: 1.22rem;
  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  * {
    scroll-behavior: auto !important;

    transition: none !important;
  }

}