/* ==========================================================
   AISEL — CONTACT & COLLABORATION
   Navy Hero + Animated Contact Experience
========================================================== */


/* ==========================================================
   ROOT SECTION
========================================================== */

#contact.contact-section {

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #f8fafc 0%,
      #ffffff 48%,
      #f8fafc 100%
    );

  color: var(--ink);

}


/* ==========================================================
   COMPLETE TEXT JUSTIFICATION
========================================================== */

#contact.contact-section,
#contact.contact-section p,
#contact.contact-section h1,
#contact.contact-section h2,
#contact.contact-section h3,
#contact.contact-section h4,
#contact.contact-section .section-desc,
#contact.contact-section .contact-description,
#contact.contact-section .contact-hero-description,
#contact.contact-section .join-benefit p,
#contact.contact-section .contact-info-note p {

  text-align: justify;

}


/* Keep UI controls visually normal */

#contact.contact-section button,
#contact.contact-section a,
#contact.contact-section label,
#contact.contact-section span,
#contact.contact-section .contact-kicker,
#contact.contact-section .section-tag {

  text-align: left;

}


/* ==========================================================
   DECORATIVE SECTION BACKGROUND
========================================================== */

#contact.contact-section::before {

  content: "";

  position: absolute;

  width: 520px;

  height: 520px;

  right: -250px;

  top: 430px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(37,99,235,.075),
      transparent 70%
    );

  pointer-events: none;

}


#contact.contact-section::after {

  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  left: -230px;

  bottom: -130px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(6,182,212,.055),
      transparent 70%
    );

  pointer-events: none;

}


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

.contact-hero {

  position: relative;

  min-height: 590px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 82% 18%,
      rgba(37,99,235,.20),
      transparent 26%
    ),

    radial-gradient(
      circle at 12% 80%,
      rgba(14,165,233,.12),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      #050b1c 0%,
      #07152f 42%,
      #0a1b3b 100%
    );

  color: #ffffff;

}


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

.contact-hero-grid {

  position: absolute;

  inset: 0;

  opacity: .23;

  background-image:

    linear-gradient(
      rgba(147,197,253,.075) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(147,197,253,.075) 1px,
      transparent 1px
    );

  background-size: 48px 48px;

  mask-image:
    linear-gradient(
      90deg,
      black 0%,
      black 70%,
      transparent 100%
    );

  animation:
    contactGridMove
    22s
    linear
    infinite;

  pointer-events: none;

}


@keyframes contactGridMove {

  0% {

    transform:
      translate3d(0,0,0);

  }

  50% {

    transform:
      translate3d(-24px,14px,0);

  }

  100% {

    transform:
      translate3d(0,0,0);

  }

}


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

.contact-hero-orb {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(2px);

}


.contact-orb-one {

  width: 410px;

  height: 410px;

  right: -130px;

  top: -170px;

  background:
    radial-gradient(
      circle,
      rgba(37,99,235,.30),
      transparent 70%
    );

  animation:
    contactOrbOne
    9s
    ease-in-out
    infinite;

}


.contact-orb-two {

  width: 330px;

  height: 330px;

  left: -150px;

  bottom: -170px;

  background:
    radial-gradient(
      circle,
      rgba(14,165,233,.18),
      transparent 70%
    );

  animation:
    contactOrbTwo
    11s
    ease-in-out
    infinite;

}


.contact-orb-three {

  width: 180px;

  height: 180px;

  right: 25%;

  bottom: -70px;

  background:
    radial-gradient(
      circle,
      rgba(99,102,241,.16),
      transparent 70%
    );

  animation:
    contactOrbThree
    7s
    ease-in-out
    infinite;

}


@keyframes contactOrbOne {

  0%,
  100% {

    transform:
      translate3d(0,0,0)
      scale(1);

  }

  50% {

    transform:
      translate3d(-30px,25px,0)
      scale(1.08);

  }

}


@keyframes contactOrbTwo {

  0%,
  100% {

    transform:
      translate3d(0,0,0)
      scale(1);

  }

  50% {

    transform:
      translate3d(30px,-25px,0)
      scale(1.1);

  }

}


@keyframes contactOrbThree {

  0%,
  100% {

    transform:
      translate3d(0,0,0)
      scale(1);

  }

  50% {

    transform:
      translate3d(0,-25px,0)
      scale(1.15);

  }

}


/* ==========================================================
   PARTICLES
========================================================== */

.contact-particles {

  position: absolute;

  inset: 0;

  pointer-events: none;

}


.contact-particle {

  position: absolute;

  width: 3px;

  height: 3px;

  border-radius: 50%;

  background:
    rgba(147,197,253,.75);

  box-shadow:
    0 0 14px
    rgba(96,165,250,.55);

  animation:
    contactParticleFloat
    var(--particle-duration)
    ease-in-out
    infinite;

  animation-delay:
    var(--particle-delay);

}


@keyframes contactParticleFloat {

  0%,
  100% {

    opacity: .15;

    transform:
      translate3d(0,25px,0)
      scale(.7);

  }

  50% {

    opacity: .9;

    transform:
      translate3d(
        var(--particle-x),
        -35px,
        0
      )
      scale(1.35);

  }

}


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

.contact-hero-inner {

  position: relative;

  z-index: 4;

  padding-top: 82px;

  padding-bottom: 78px;

}


.contact-hero-kicker {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 18px;

  color: #93c5fd;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .14em;

  opacity: 0;

}


.contact-kicker-line {

  width: 38px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      #60a5fa,
      transparent
    );

}


.contact-hero-title {

  max-width: 920px;

  margin: 0;

  font-family:
    "IBM Plex Sans",
    sans-serif;

  font-size:
    clamp(
      42px,
      6vw,
      76px
    );

  line-height: 1.02;

  letter-spacing: -.055em;

  font-weight: 700;

  opacity: 0;

}


.contact-hero-title span {

  display: block;

  color: #8db8ff;

}


.contact-hero-description {

  max-width: 820px;

  margin-top: 25px;

  color:
    rgba(
      255,
      255,
      255,
      .72
    );

  font-size: 15px;

  line-height: 1.85;

  opacity: 0;

}


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

.contact-hero-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 25px;

  opacity: 0;

}


.contact-hero-tags span {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .12
    );

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      .055
    );

  color:
    rgba(
      255,
      255,
      255,
      .80
    );

  font-size: 10.5px;

  backdrop-filter:
    blur(10px);

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;

}


.contact-hero-tags span:hover {

  transform:
    translateY(-3px);

  background:
    rgba(
      255,
      255,
      255,
      .10
    );

  border-color:
    rgba(
      147,
      197,
      253,
      .35
    );

}


.contact-hero-tags i {

  color:
    #93c5fd;

}


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

.contact-hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;

  opacity: 0;

}


.contact-hero-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 43px;

  padding:
    10px 16px;

  border-radius: 11px;

  text-decoration: none;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 11px;

  font-weight: 700;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease,
    border-color .3s ease;

}


.contact-hero-btn-primary {

  border:
    1px solid
    rgba(
      147,
      197,
      253,
      .25
    );

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3158c7
    );

  color: #ffffff;

  box-shadow:
    0 12px 30px
    rgba(
      37,
      99,
      235,
      .24
    );

}


.contact-hero-btn-secondary {

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .14
    );

  background:
    rgba(
      255,
      255,
      255,
      .055
    );

  color:
    rgba(
      255,
      255,
      255,
      .85
    );

}


.contact-hero-btn:hover {

  transform:
    translateY(-3px);

}


.contact-hero-btn-primary:hover {

  box-shadow:
    0 18px 40px
    rgba(
      37,
      99,
      235,
      .32
    );

}


.contact-hero-btn-secondary:hover {

  background:
    rgba(
      255,
      255,
      255,
      .10
    );

  border-color:
    rgba(
      147,
      197,
      253,
      .30
    );

}


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

.contact-hero-stats {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  margin-top: 42px;

  padding-top: 23px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .10
    );

  opacity: 0;

}


.contact-hero-stat {

  display: flex;

  align-items: center;

  gap: 10px;

}


.contact-stat-icon {

  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(
      147,
      197,
      253,
      .16
    );

  border-radius: 9px;

  background:
    rgba(
      255,
      255,
      255,
      .045
    );

  color:
    #93c5fd;

}


.contact-hero-stat strong {

  display: block;

  color: #ffffff;

  font-size: 17px;

  line-height: 1;

}


.contact-hero-stat span {

  display: block;

  margin-top: 4px;

  color:
    rgba(
      255,
      255,
      255,
      .48
    );

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8.5px;

  letter-spacing: .04em;

}


/* ==========================================================
   CONTENT
========================================================== */

.contact-content {

  position: relative;

  z-index: 2;

  padding-top: 65px;

  padding-bottom: 68px;

}


.contact-section-head {

  margin-bottom: 28px;

}


.contact-section-head .section-desc {

  max-width: 830px;

}


/* ==========================================================
   TABS
========================================================== */

#contact .contact-tabs {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;

  width: max-content;

  max-width: 100%;

  margin:
    0 auto 38px;

  padding: 6px;

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

  border-radius: 50px;

  background:
    rgba(
      255,
      255,
      255,
      .88
    );

  box-shadow:
    0 14px 35px
    rgba(
      15,
      23,
      42,
      .06
    );

  backdrop-filter:
    blur(14px);

}


#contact .tab-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border: none;

  background: transparent;

  color:
    var(--ink-soft);

  padding:
    11px 23px;

  border-radius: 40px;

  font-family:
    var(--font-mono);

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;

}


#contact .tab-btn:hover {

  color:
    var(--violet);

  transform:
    translateY(-1px);

}


#contact .tab-btn.active {

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #6355c7,
      #2563eb
    );

  box-shadow:
    0 9px 22px
    rgba(
      37,
      99,
      235,
      .20
    );

}


/* ==========================================================
   TAB PANELS
========================================================== */

#contact .tab-panel {

  display: none;

}


#contact .tab-panel.active {

  display: block;

  animation:
    contactPanelIn
    .65s
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    )
    both;

}


@keyframes contactPanelIn {

  from {

    opacity: 0;

    transform:
      translateY(22px)
      scale(.985);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


/* ==========================================================
   CONTACT GRID
========================================================== */

.contact-grid {

  display: grid;

  grid-template-columns:
    minmax(0, .85fr)
    minmax(0, 1.15fr);

  gap: 50px;

  align-items: start;

}


/* ==========================================================
   CONTACT INFORMATION
========================================================== */

.contact-info {

  padding:
    22px 0;

}


.contact-kicker {

  display: inline-block;

  margin-bottom: 15px;

  color:
    var(--violet);

  font-family:
    var(--font-mono);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .16em;

  text-transform: uppercase;

}


.contact-title {

  margin:
    0 0 17px;

  max-width: 600px;

  color:
    var(--ink);

  font-size: 34px;

  line-height: 1.24;

  font-weight: 750;

}


.contact-description {

  max-width: 620px;

  margin:
    0 0 27px;

  color:
    var(--ink-soft);

  font-size: 14.5px;

  line-height: 1.85;

}


/* ==========================================================
   CONTACT LIST
========================================================== */

.contact-list {

  list-style: none;

  margin:
    0 0 25px;

  padding: 0;

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

  font-family:
    var(--font-mono);

  font-size: 12px;

}


.contact-list li {

  display: flex;

  align-items: flex-start;

  gap: 16px;

  padding:
    13px 0;

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

  transition:
    padding-left .3s ease;

}


.contact-list li:hover {

  padding-left: 5px;

}


.contact-list .k {

  display: flex;

  align-items: center;

  gap: 7px;

  flex:
    0 0 82px;

  color:
    var(--ink-faint);

  text-transform:
    uppercase;

  font-size: 9.5px;

  letter-spacing:
    .06em;

}


.contact-list .k i {

  color:
    var(--violet);

}


.contact-list a {

  color:
    var(--violet);

  text-decoration:
    none;

  transition:
    color .25s ease;

}


.contact-list a:hover {

  color:
    var(--teal);

}


/* ==========================================================
   FOCUS TITLE
========================================================== */

.contact-focus-wrapper {

  margin-top: 22px;

}


.contact-focus-title {

  margin-bottom: 9px;

  color:
    var(--ink);

  font-family:
    var(--font-mono);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform:
    uppercase;

}


/* ==========================================================
   FOCUS TAGS
========================================================== */

.contact-focus {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

}


.contact-focus span {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(
      37,
      99,
      235,
      .10
    );

  border-radius:
    30px;

  background:
    #f3f7ff;

  color:
    #2563eb;

  font-family:
    var(--font-mono);

  font-size: 9px;

  font-weight: 600;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;

}


.contact-focus span:hover {

  transform:
    translateY(-3px);

  background:
    #2563eb;

  color:
    #ffffff;

  box-shadow:
    0 8px 18px
    rgba(
      37,
      99,
      235,
      .14
    );

}


/* ==========================================================
   INFO NOTE
========================================================== */

.contact-info-note {

  display: flex;

  align-items: flex-start;

  gap: 11px;

  margin-top: 25px;

  padding:
    13px 15px;

  border:
    1px solid
    rgba(
      37,
      99,
      235,
      .10
    );

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #f4f8ff
    );

}


.contact-info-note-icon {

  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  flex:
    0 0 30px;

  border-radius:
    9px;

  background:
    #e8f1ff;

  color:
    #2563eb;

}


.contact-info-note p {

  margin: 0;

  color:
    var(--ink-soft);

  font-size: 11px;

  line-height: 1.65;

}


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

.contact-form,
.join-form {

  position: relative;

  padding:
    30px;

  border:
    1px solid
    rgba(
      37,
      99,
      235,
      .10
    );

  border-radius:
    24px;

  background:
    rgba(
      255,
      255,
      255,
      .92
    );

  box-shadow:
    0 22px 60px
    rgba(
      15,
      23,
      42,
      .07
    );

  backdrop-filter:
    blur(14px);

  transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;

}


.contact-form::before,
.join-form::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 3px;

  border-radius:
    24px
    24px
    0
    0;

  background:
    linear-gradient(
      90deg,
      #6355c7,
      #2563eb,
      #06b6d4
    );

  transform:
    scaleX(.25);

  transform-origin:
    left;

  transition:
    transform .6s ease;

}


.contact-form:hover::before,
.join-form:hover::before {

  transform:
    scaleX(1);

}


.contact-form:hover,
.join-form:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(
      99,
      85,
      199,
      .20
    );

  box-shadow:
    0 30px 70px
    rgba(
      37,
      99,
      235,
      .10
    );

}


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

.contact-form-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}


.contact-form-label {

  display: block;

  margin-bottom: 5px;

  color:
    var(--violet);

  font-family:
    var(--font-mono);

  font-size: 9px;

  font-weight: 700;

  letter-spacing:
    .14em;

}


.contact-form-header h3 {

  margin: 0;

  color:
    var(--ink);

  font-size: 22px;

  line-height: 1.25;

  font-weight: 750;

}


.contact-form-icon {

  width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  flex:
    0 0 42px;

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      #eff6ff,
      #eef2ff
    );

  color:
    #2563eb;

  box-shadow:
    0 8px 20px
    rgba(
      37,
      99,
      235,
      .09
    );

  animation:
    contactIconFloat
    4s
    ease-in-out
    infinite;

}


@keyframes contactIconFloat {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-4px);

  }

}


.contact-form-line {

  width: 100%;

  height: 1px;

  margin:
    18px 0 23px;

  background:
    linear-gradient(
      90deg,
      var(--line),
      transparent
    );

}


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

.field {

  position: relative;

  margin-bottom: 18px;

}


.field label {

  display: block;

  margin-bottom: 7px;

  color:
    var(--ink-soft);

  font-family:
    var(--font-mono);

  font-size: 9.5px;

  font-weight: 600;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;

}


.field-input-wrapper {

  position: relative;

}


.field-input-wrapper > i {

  position: absolute;

  left: 13px;

  top: 50%;

  z-index: 2;

  color:
    #94a3b8;

  font-size: 12px;

  transform:
    translateY(-50%);

  pointer-events:
    none;

  transition:
    color .25s ease;

}


.field-input-wrapper.textarea-wrapper > i {

  top: 17px;

  transform: none;

}


.field input,
.field textarea,
.field select {

  width: 100%;

  box-sizing: border-box;

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

  border-radius:
    12px;

  background:
    #f8fafc;

  color:
    var(--ink);

  padding:
    12px 13px 12px 38px;

  font-family:
    var(--font-sans);

  font-size:
    13px;

  outline:
    none;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .25s ease;

}


.field textarea {

  min-height:
    125px;

  resize:
    vertical;

  line-height:
    1.65;

}


.field input::placeholder,
.field textarea::placeholder {

  color:
    var(--ink-faint);

}


.field input:hover,
.field textarea:hover,
.field select:hover {

  border-color:
    rgba(
      99,
      85,
      199,
      .30
    );

}


.field input:focus,
.field textarea:focus,
.field select:focus {

  background:
    #ffffff;

  border-color:
    var(--violet);

  box-shadow:
    0 0 0 4px
    rgba(
      99,
      85,
      199,
      .09
    );

  transform:
    translateY(-1px);

}


.field-input-wrapper:focus-within > i {

  color:
    var(--violet);

}


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

.submit-btn {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  width: 100%;

  min-height:
    47px;

  padding:
    12px 20px;

  overflow: hidden;

  border:
    1px solid
    #6355c7;

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      #6355c7,
      #2563eb
    );

  color:
    #ffffff;

  font-family:
    var(--font-mono);

  font-size:
    11.5px;

  font-weight:
    700;

  cursor:
    pointer;

  box-shadow:
    0 11px 27px
    rgba(
      37,
      99,
      235,
      .18
    );

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;

}


.submit-btn::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 70%;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        .22
      ),
      transparent
    );

  transform:
    skewX(-20deg);

  transition:
    left .6s ease;

}


.submit-btn:hover::before {

  left:
    130%;

}


.submit-btn:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 17px 35px
    rgba(
      37,
      99,
      235,
      .25
    );

  filter:
    brightness(1.04);

}


.submit-btn:active {

  transform:
    translateY(-1px);

}


.submit-btn[disabled] {

  opacity:
    .75;

  cursor:
    not-allowed;

  transform:
    none;

}


.submit-arrow {

  transition:
    transform .25s ease;

}


.submit-btn:hover
.submit-arrow {

  transform:
    translateX(4px);

}


/* ==========================================================
   SPINNER
========================================================== */

.spinner {

  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      .35
    );

  border-top-color:
    #ffffff;

  display:
    none;

  animation:
    contactSpin
    .7s
    linear
    infinite;

}


.submit-btn.loading
.spinner {

  display:
    inline-block;

}


.submit-btn.loading
.btn-label {

  opacity:
    .75;

}


@keyframes contactSpin {

  to {

    transform:
      rotate(360deg);

  }

}


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

.form-success {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    14px;

  color:
    var(--teal);

  font-family:
    var(--font-mono);

  font-size:
    10.5px;

  line-height:
    1.5;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(8px);

  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;

}


.form-success.show {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);

}


.check {

  position:
    relative;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 20px;

  width:
    20px;

  height:
    20px;

  border:
    2px solid
    var(--teal);

  border-radius:
    50%;

}


.check i {

  font-size:
    9px;

}


/* ==========================================================
   JOIN PANEL
========================================================== */

.join-panel {

  display:
    grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.1fr);

  gap:
    50px;

  align-items:
    start;

}


.join-intro {

  padding:
    24px 0;

}


.join-benefits {

  display:
    grid;

  gap:
    11px;

  margin-top:
    24px;

}


.join-benefit {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  padding:
    12px;

  border:
    1px solid
    rgba(
      15,
      23,
      42,
      .07
    );

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      .65
    );

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}


.join-benefit:hover {

  transform:
    translateX(5px);

  border-color:
    rgba(
      37,
      99,
      235,
      .15
    );

  box-shadow:
    0 10px 25px
    rgba(
      15,
      23,
      42,
      .05
    );

}


.join-benefit-icon {

  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 31px;

  border-radius:
    9px;

  background:
    #eef5ff;

  color:
    #2563eb;

}


.join-benefit h4 {

  margin:
    0 0 4px;

  color:
    var(--ink);

  font-size:
    12px;

}


.join-benefit p {

  margin:
    0;

  color:
    var(--ink-soft);

  font-size:
    10.5px;

  line-height:
    1.6;

}


/* ==========================================================
   BOTTOM
========================================================== */

.contact-bottom {

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  margin-top:
    42px;

}


.contact-bottom > span {

  flex:
    1;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #cbd5e1
    );

}


.contact-bottom > span:last-child {

  background:
    linear-gradient(
      90deg,
      #cbd5e1,
      transparent
    );

}


.contact-bottom p {

  margin:
    0;

  max-width:
    560px;

  color:
    #64748b;

  text-align:
    center !important;

  font-size:
    11px;

  line-height:
    1.65;

}


.contact-bottom strong {

  color:
    #334155;

}


/* ==========================================================
   REVEAL
========================================================== */

#contact .reveal {

  opacity:
    0;

  transform:
    translateY(24px);

}


#contact .reveal.contact-visible {

  opacity:
    1;

  transform:
    translateY(0);

  transition:
    opacity .75s ease,
    transform .75s
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    );

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 950px) {

  .contact-grid,
  .join-panel {

    grid-template-columns:
      1fr;

    gap:
      30px;

  }


  .contact-info,
  .join-intro {

    padding:
      0;

  }


  .contact-title {

    font-size:
      30px;

  }

}


@media (max-width: 700px) {

  .contact-hero {

    min-height:
      540px;

  }


  .contact-hero-inner {

    padding-top:
      60px;

    padding-bottom:
      60px;

  }


  .contact-hero-title {

    font-size:
      43px;

  }


  .contact-hero-description {

    font-size:
      13px;

  }


  .contact-hero-stats {

    gap:
      18px;

  }


  .contact-hero-stat {

    flex:
      1 1 120px;

  }


  .contact-content {

    padding-top:
      50px;

  }


  #contact .contact-tabs {

    width:
      100%;

  }


  #contact .tab-btn {

    flex:
      1;

    padding:
      10px 12px;

    font-size:
      10.5px;

  }


  .contact-form,
  .join-form {

    padding:
      22px;

    border-radius:
      18px;

  }


  .contact-title {

    font-size:
      27px;

  }


  .contact-list li {

    flex-direction:
      column;

    gap:
      6px;

  }


  .contact-list .k {

    flex:
      none;

  }


  .contact-bottom > span {

    display:
      none;

  }


  .contact-bottom p {

    width:
      100%;

  }

}


@media (max-width: 480px) {

  .contact-hero-title {

    font-size:
      37px;

  }


  .contact-hero-tags span {

    font-size:
      9px;

    padding:
      7px 9px;

  }


  .contact-hero-actions {

    flex-direction:
      column;

  }


  .contact-hero-btn {

    width:
      100%;

  }


  .contact-hero-stats {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  .contact-form-header h3 {

    font-size:
      19px;

  }


  .join-benefit {

    padding:
      10px;

  }

}


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

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

  .contact-hero-grid,
  .contact-hero-orb,
  .contact-particle,
  .contact-stat-icon,
  .contact-form,
  .join-form,
  .join-benefit,
  .submit-btn,
  .tab-panel,
  .reveal {

    animation:
      none !important;

    transition:
      none !important;

  }

}