/* =========================================================
   THINKRIUM SOFTWARE CONTACT FORM
   ========================================================= */

.software-contact {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  font-family:  'sans-serif';
  padding:
    clamp(90px, 11vw, 150px)
    clamp(20px, 6vw, 90px)
    clamp(70px, 8vw, 110px);

  background:
    radial-gradient(
      circle at 74% 22%,
      rgba(126, 255, 214, 0.08),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 76%,
      rgba(141, 123, 183, 0.08),
      transparent 36%
    ),
    #020317;

  color: #f6f7fb;
}


/* =========================================================
   BACKGROUND ORBS
   ========================================================= */

.software-contact__backdrop {
  position: absolute;
  inset: 0;

  pointer-events: none;
  overflow: hidden;
}


.software-contact__orb {
  position: absolute;

  border-radius: 50%;

  opacity: 0.35;

  filter: blur(1px);

  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 255, 255, 0.7),
      rgba(184, 197, 224, 0.4) 35%,
      rgba(84, 101, 143, 0.24) 70%,
      rgba(20, 26, 48, 0.14) 100%
    );

  box-shadow:
    inset -18px -22px 35px rgba(0, 0, 0, 0.18),
    inset 10px 8px 24px rgba(255, 255, 255, 0.14);
}


.software-contact__orb--one {
  width: 220px;
  height: 220px;

  right: 8%;
  top: 10%;
}


.software-contact__orb--two {
  width: 110px;
  height: 110px;

  left: 7%;
  bottom: 17%;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(185, 246, 223, 0.7),
      rgba(71, 112, 105, 0.24) 70%,
      rgba(20, 26, 48, 0.08)
    );
}


.software-contact__orb--three {
  width: 70px;
  height: 70px;

  right: 22%;
  bottom: 11%;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(157, 185, 255, 0.65),
      rgba(57, 73, 120, 0.22) 70%,
      rgba(20, 26, 48, 0.08)
    );
}


/* =========================================================
   LAYOUT
   ========================================================= */

.software-contact__inner {
  position: relative;
  z-index: 2;

  width: min(100%, 1120px);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(320px, 1.1fr);

  gap: clamp(42px, 7vw, 100px);

  align-items: start;
}


/* =========================================================
   COPY
   ========================================================= */

.software-contact__header {
  padding-top: 24px;
}

.software-contact__eyebrow a,
.software-contact__eyebrow {
  margin: 0 0 18px;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.58);
}


.software-contact__header h1 {
  margin: 0;

  max-width: 620px;

  font-size:
    clamp(
      54px,
      7vw,
      106px
    );

  line-height: 0.9;

  letter-spacing: -0.055em;

  font-weight: 700;

  color: #f7f8fc;
}


.software-contact__intro {
  max-width: 520px;

  margin:
    clamp(24px, 4vw, 38px)
    0
    0;

  font-size:
    clamp(
      16px,
      1.6vw,
      21px
    );

  line-height: 1.55;

  color: rgba(236, 240, 248, 0.66);
}


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

.software-contact__form-shell {
  position: relative;

  padding:
    clamp(22px, 3vw, 36px);

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

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(16, 22, 42, 0.76),
      rgba(6, 9, 27, 0.72)
    );

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.34);
}


/* =========================================================
   DRUPAL / WEBFORM ELEMENTS
   ========================================================= */

.software-contact
.form-item {
  margin-bottom: 22px;
}


.software-contact
.form-item label,
.software-contact
.form-wrapper > label {
  display: block;

  margin-bottom: 8px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.65);
}


.software-contact
input[type="text"],

.software-contact
input[type="email"],

.software-contact
input[type="tel"],

.software-contact
input[type="url"],

.software-contact
input[type="number"],

.software-contact
input[type="date"],

.software-contact
select,

.software-contact
textarea {

  width: 100%;

  min-height: 52px;

  padding:
    13px
    15px;

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

  border-radius: 14px;

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

  color: #f8f9fc;

  font:
    inherit;

  font-size: 16px;

  line-height: 1.35;

  outline: none;

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


.software-contact
textarea {
  min-height: 150px;

  resize: vertical;
}


.software-contact
input::placeholder,

.software-contact
textarea::placeholder {
  color:
    rgba(255, 255, 255, 0.34);
}


.software-contact
input:focus,

.software-contact
select:focus,

.software-contact
textarea:focus {
  border-color:
    rgba(174, 246, 216, 0.78);

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

  box-shadow:
    0 0 0 3px
    rgba(174, 246, 216, 0.08);
}


/* =========================================================
   SELECT
   ========================================================= */

.software-contact
select {
  appearance: none;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      rgba(255, 255, 255, 0.75) 50%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.75) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 18px) 22px,
    calc(100% - 13px) 22px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;

  padding-right: 42px;
}


/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

.software-contact
.form-type-checkbox,

.software-contact
.form-type-radio {
  display: flex;

  align-items: center;

  gap: 10px;
}


.software-contact
input[type="checkbox"],

.software-contact
input[type="radio"] {
  width: 18px;
  height: 18px;

  accent-color: #aef6d8;
}


/* =========================================================
   DESCRIPTION / HELP
   ========================================================= */

.software-contact
.description,

.software-contact
.form-item__description,

.software-contact
.webform-element-description {

  margin-top: 7px;

  font-size: 12px;

  line-height: 1.45;

  color:
    rgba(255, 255, 255, 0.42);
}


/* =========================================================
   REQUIRED MARKER
   ========================================================= */

.software-contact
.form-required::after {

  color: #aef6d8;
}


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

.software-contact
.form-actions {
  margin:
    28px
    0
    0;
}


.software-contact
.form-submit,

.software-contact
button[type="submit"] {

  min-height: 54px;

  padding:
    14px
    24px;

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

  border-radius: 999px;

  background:
    #e8edf8;

  color:
    #101522;

  font:
    inherit;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.software-contact
.form-submit:hover,

.software-contact
button[type="submit"]:hover {

  background:
    #aef6d8;

  transform:
    translateY(-2px);

  box-shadow:
    0 14px 32px
    rgba(123, 236, 195, 0.16);
}


.software-contact
.form-submit:active,

.software-contact
button[type="submit"]:active {

  transform:
    translateY(0);
}


/* =========================================================
   WEBFORM ERRORS
   ========================================================= */

.software-contact
.form-item--error-message,

.software-contact
.messages--error {

  color:
    #ffaaa5;
}


.software-contact
.form-item--error
input,

.software-contact
.form-item--error
textarea,

.software-contact
.form-item--error
select {

  border-color:
    rgba(255, 126, 117, 0.7);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 820px) {

  .software-contact {

    padding:
      82px
      18px
      52px;

  }


  .software-contact__inner {

    grid-template-columns:
      1fr;

    gap:
      42px;

  }


  .software-contact__header {

    padding-top: 0;

  }


  .software-contact__header h1 {

    max-width:
      520px;

    font-size:
      clamp(
        52px,
        16vw,
        84px
      );

  }


  .software-contact__intro {

    font-size:
      16px;

  }


  .software-contact__form-shell {

    border-radius:
      22px;

    padding:
      20px;

  }


  .software-contact__orb--one {

    width:
      160px;

    height:
      160px;

    right:
      -35px;

    top:
      34px;

  }


  .software-contact__orb--two {

    left:
      -35px;

  }

}