.section{
  width:min(1100px, calc(100% - 2rem));
  margin:auto;
}

.support-hero{
  min-height:calc(34vh - 82px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.25rem 0 .5rem;
}

/* shared content panel style */
.uniform-panel{
  max-width:980px;
  width:100%;
  margin:0 auto;
  padding:2.7rem 2.2rem;
  background:rgba(0,0,0,.34);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.02);
  position:relative;
  overflow:hidden;
}

.uniform-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none;
}

.uniform-panel > *{
  position:relative;
  z-index:2;
}

/* HERO BOX */
.support-hero-inner{
  max-width:980px;
  width:100%;
  margin:0 auto;
  padding:2.7rem 2.2rem;
  text-align:center;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.02);
  position:relative;
  overflow:hidden;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.support-hero-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.04), transparent 60%);
  pointer-events:none;
}

.support-hero-inner > *{
  position:relative;
  z-index:1;
}

.support-title{
  font-family:'CloisterBlack', serif;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.05;
  margin:0 0 1rem;
  letter-spacing:0;
  text-align:center;

  text-shadow:
    0 0 18px rgba(255,255,255,.10),
    0 0 8px rgba(255,255,255,.06);
}

.support-sub{
  max-width:760px;
  margin:0 auto;
  font-family:'Cinzel', serif;
  font-size:clamp(1rem, 2vw, 1.18rem);
  line-height:1.8;
  letter-spacing:.1em;
  color:rgba(255,255,255,.74);
}

/* SUPPORT CARD */
.support-card{
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:rgba(0,0,0,.52);
}

/* drifting background image */
.support-card::before{
  content:"";
  position:absolute;
  inset:-8%;
  background:
    linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.74)),
    url("https://i.imgur.com/DazQEzJ.jpeg");
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;

  opacity:.40;
  filter:blur(2.5px);

  transform:scale(1.12);
  animation:cryptDrift 12s ease-in-out infinite alternate;
  will-change:transform;

  z-index:0;
}

/* side shading */
.support-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.80) 0%,
      rgba(0,0,0,0.30) 24%,
      rgba(0,0,0,0.06) 50%,
      rgba(0,0,0,0.30) 76%,
      rgba(0,0,0,0.80) 100%
    );
  pointer-events:none;
  z-index:1;
}

.support-card > *{
  position:relative;
  z-index:2;
}

/* DRIFT ANIMATION */
@keyframes cryptDrift{
  0%{
    transform:scale(1.12) translate3d(0,0,0);
  }
  100%{
    transform:scale(1.2) translate3d(-3%, -2%, 0);
  }
}

/* TEXT SECTIONS */
.section-header{
  margin-bottom:2rem;
}

.section-kicker{
  display:block;
  margin-bottom:.8rem;
  font-family:'Inter', sans-serif;
  font-size:.75rem;
  letter-spacing:.42em;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}

.section-title{
  font-family:'Cinzel', serif;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.08;
  margin:0;
  color:#f5f5f5;
  text-transform:uppercase;
  text-shadow:
    0 0 10px rgba(255,255,255,.08),
    0 0 20px rgba(255,255,255,.06),
    0 0 40px rgba(255,255,255,.04);
}

.card-divider{
  display:none;
}

.support-copy{
  max-width:760px;
  margin:0 auto 1.35rem;
  color:#b9b9b9;
  line-height:1.8;
  font-size:1rem;
  font-family:'Manrope', sans-serif;
  letter-spacing:.02em;
}

.support-copy:last-of-type{
  margin-bottom:0;
}

.gothic-btn{
  margin-top:2rem;
}

@media (max-width: 768px){
  .support-hero{
    min-height:auto;
    padding:1rem 0 .25rem;
  }

  .support-hero-inner{
    padding:2.15rem 1.2rem;
  }

  .uniform-panel{
    padding:2.15rem 1.2rem;
  }

  .support-copy{
    line-height:1.9;
  }

  .support-sub{
    font-size:.98rem;
    line-height:1.75;
    letter-spacing:.08em;
  }

  .support-title{
    font-size:clamp(3rem, 15vw, 5.2rem);
  }

  .support-card::before{
    background-position:center 35%;
    opacity:.36;
  }
}