.page-contact{
  --particle-a: rgba(0, 229, 255, .5);
  --particle-b: rgba(188, 19, 254, .45);
  --particle-c: rgba(255, 215, 0, .36);
  --particle-d: rgba(255, 42, 109, .4);
  position: relative;
  background:
    radial-gradient(ellipse at 12% -5%, rgba(188, 19, 254, .16), transparent 55%),
    radial-gradient(ellipse at 88% 8%, rgba(255, 42, 109, .12), transparent 45%),
    radial-gradient(ellipse at 45% 110%, rgba(0, 229, 255, .1), transparent 55%),
    var(--bg-deep);
  overflow: clip;
  padding-bottom: 64px;
}
.page-contact::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, var(--particle-a) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 18%, var(--particle-b) 0 1.5px, transparent 3px),
    radial-gradient(circle at 62% 72%, var(--particle-c) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 84%, var(--particle-d) 0 1.5px, transparent 3px);
}
.page-contact .contact-bg-ornament{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.page-contact .contact-bg-ornament img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .06;
  filter: blur(22px) saturate(.8);
  transform: scale(1.08);
}
.page-contact .contact-hero{
  position: relative;
  z-index: 1;
  padding: 44px 0 10px;
}
.page-contact .breadcrumb{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.page-contact .breadcrumb a{
  color: var(--text-dim);
  text-decoration: none;
  transition: color .2s;
}
.page-contact .breadcrumb a:hover{
  color: var(--neon-blue);
}
.page-contact .breadcrumb .breadcrumb-sep{
  color: rgba(255, 255, 255, .2);
}
.page-contact .hero-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.page-contact .hero-copy .badge{
  margin-bottom: 16px;
}
.page-contact h1{
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: .02em;
  color: var(--text-bright);
  margin: 0 0 14px;
}
.page-contact .text-gradient{
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 2px;
}
.page-contact .lead{
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-main);
  margin: 0 0 14px;
  max-width: 46em;
}
.page-contact .hero-note{
  font-size: .92rem;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 44em;
}
.page-contact .hero-visual{
  position: relative;
  justify-self: center;
  width: min(100%, 260px);
}
.page-contact .hero-visual img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 44px rgba(188, 19, 254, .32), 0 0 90px rgba(0, 229, 255, .12);
}
@keyframes contact-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}
.page-contact .hero-visual{
  animation: contact-float 6s ease-in-out infinite;
}
.page-contact .contact-channels{
  position: relative;
  z-index: 1;
  padding: 24px 0 16px;
}
.page-contact .section-heading{
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 28px;
}
.page-contact .section-heading .badge{
  margin-bottom: 10px;
}
.page-contact .section-heading h2{
  font-family: var(--font-headline);
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: .04em;
  color: var(--text-bright);
  margin: 0 0 10px;
}
.page-contact .section-heading p{
  color: var(--text-dim);
  line-height: 1.8;
  font-size: .92rem;
  margin: 0;
}
.page-contact .contact-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
}
.page-contact .contact-channel-card{
  position: relative;
  background: linear-gradient(150deg, rgba(26, 26, 40, .92), rgba(18, 18, 28, .96));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg);
  padding: 26px 22px 22px;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.page-contact .contact-channel-card:hover{
  transform: translateY(-4px);
  border-color: rgba(188, 19, 254, .4);
  box-shadow: 0 12px 40px rgba(188, 19, 254, .16);
}
.page-contact .contact-channel-card::before{
  content: "";
  position: absolute;
  top: -30%;
  right: -35%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(188, 19, 254, .18), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.page-contact .contact-channel-card:hover::before{
  opacity: 1;
}
.page-contact .channel-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.page-contact .channel-icon svg{
  width: 24px;
  height: 24px;
}
.page-contact .channel-icon--pink{
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
}
.page-contact .channel-icon--blue{
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
}
.page-contact .channel-icon--purple{
  background: linear-gradient(135deg, var(--neon-purple), #8B3EFE);
}
.page-contact .channel-icon--green{
  background: linear-gradient(135deg, var(--neon-green), var(--neon-blue));
  box-shadow: 0 6px 18px rgba(5, 255, 161, .14);
}
.page-contact .contact-channel-card h3{
  font-size: 1.02rem;
  letter-spacing: .05em;
  color: var(--text-bright);
  margin: 0 0 8px;
}
.page-contact .channel-value{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--text-main);
  text-decoration: none;
  letter-spacing: .03em;
  margin-bottom: 10px;
  transition: color .2s, text-shadow .2s;
  overflow-wrap: break-word;
}
.page-contact a.channel-value:hover{
  color: var(--neon-blue);
  text-shadow: 0 0 14px rgba(0, 229, 255, .4);
}
.page-contact .contact-channel-card > p:last-child{
  font-size: .86rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0;
}
.page-contact .contact-hours{
  position: relative;
  z-index: 1;
  padding: 16px 0;
}
.page-contact .hours-panel{
  background: linear-gradient(145deg, rgba(18, 18, 28, .9), rgba(26, 26, 40, .72));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  padding: 30px 24px 26px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-contact .hours-panel::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: var(--gradient-main);
  box-shadow: 0 0 18px rgba(188, 19, 254, .6);
  opacity: .8;
}
.page-contact .hours-panel h2{
  font-family: var(--font-headline);
  font-size: 1.4rem;
  letter-spacing: .05em;
  color: var(--text-bright);
  margin: 10px 0 8px;
}
.page-contact .hours-panel p{
  max-width: 30em;
  margin-inline: auto;
  color: var(--text-dim);
  font-size: .92rem;
  line-height: 1.8;
}
.page-contact .hours-panel strong{
  color: var(--neon-blue);
  font-size: 1.05rem;
  letter-spacing: .06em;
}
.page-contact .hours-timeline{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding: 0 6px;
}
.page-contact .timeline-start,
.page-contact .timeline-end{
  font-family: var(--font-mono);
  font-size: .92rem;
  color: var(--text-main);
  white-space: nowrap;
}
.page-contact .timeline-bar{
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
  position: relative;
  overflow: hidden;
}
.page-contact .timeline-bar i{
  display: block;
  height: 100%;
  width: 50%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue), var(--gold));
  box-shadow: 0 0 14px rgba(0, 229, 255, .45);
}
.page-contact .contact-form-section{
  position: relative;
  z-index: 1;
  padding: 24px 0 16px;
}
.page-contact .form-panel{
  background: linear-gradient(160deg, rgba(18, 18, 28, .8), rgba(12, 12, 18, .92));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .38);
  position: relative;
  overflow: hidden;
}
.page-contact .form-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(188, 19, 254, .55), transparent 30%, rgba(0, 229, 255, .45) 70%, rgba(255, 215, 0, .4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.page-contact .section-heading--form{
  text-align: left;
  margin-inline: 0;
  margin-bottom: 24px;
}
.page-contact .form-shell{
  display: grid;
  gap: 18px;
}
.page-contact .form-field{
  position: relative;
}
.page-contact .form-field label{
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: .03em;
  margin-bottom: 8px;
}
.page-contact .form-field input,
.page-contact .form-field textarea{
  width: 100%;
  box-sizing: border-box;
  background: rgba(10, 10, 16, .78);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
  resize: vertical;
}
.page-contact .form-field input::placeholder,
.page-contact .form-field textarea::placeholder{
  color: rgba(255, 255, 255, .28);
}
.page-contact .form-field input:focus,
.page-contact .form-field textarea:focus{
  outline: none;
  border-color: var(--neon-purple);
  background: rgba(10, 10, 16, .96);
  box-shadow: 0 0 0 4px rgba(188, 19, 254, .14), 0 0 22px rgba(188, 19, 254, .3);
}
.page-contact .field-hint{
  display: block;
  font-size: .78rem;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.5;
}
.page-contact .form-actions{
  margin-top: 6px;
}
.page-contact .form-actions .btn{
  background: var(--gradient-main);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 28px;
  text-align: center;
  display: block;
  text-decoration: none;
  font-family: var(--font-headline);
  letter-spacing: .04em;
  font-size: .95rem;
  box-shadow: 0 10px 30px rgba(188, 19, 254, .3);
  transition: transform .2s, box-shadow .2s;
}
.page-contact .form-actions .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(188, 19, 254, .45);
}
.page-contact .form-note{
  text-align: center;
  font-size: .8rem;
  color: var(--text-dim);
  margin: 16px 0 0;
  line-height: 1.6;
}
.page-contact .contact-help{
  position: relative;
  z-index: 1;
  padding: 24px 0 0;
}
.page-contact .help-shortcuts{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 720px;
  margin-inline: auto;
}
.page-contact .help-card{
  position: relative;
  display: block;
  background: linear-gradient(150deg, rgba(26, 26, 40, .82), rgba(18, 18, 28, .94));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.page-contact .help-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, .4);
  box-shadow: 0 14px 42px rgba(0, 229, 255, .13);
}
.page-contact .help-card-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: .88rem;
  background: rgba(255, 255, 255, .06);
  color: var(--neon-blue);
  margin-bottom: 16px;
}
.page-contact .help-card h3{
  font-size: 1rem;
  color: var(--text-bright);
  margin: 0 0 8px;
  letter-spacing: .04em;
}
.page-contact .help-card p{
  font-size: .86rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 14px;
}
.page-contact .help-more{
  font-size: .82rem;
  letter-spacing: .04em;
  font-weight: 600;
}
@media(min-width: 560px){
  .page-contact .contact-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(min-width: 680px){
  .page-contact .help-shortcuts{
    grid-template-columns: repeat(3, 1fr);
    max-width: 1080px;
  }
}
@media(min-width: 768px){
  .page-contact .contact-hero{
    padding: 64px 0 24px;
  }
  .page-contact .hero-layout{
    grid-template-columns: 1fr 260px;
    gap: 48px;
  }
  .page-contact .contact-channels{
    padding: 32px 0 24px;
  }
  .page-contact .contact-channel-card{
    padding: 30px 26px 24px;
  }
  .page-contact .form-panel{
    padding: 40px 36px 36px;
  }
}
@media(min-width: 960px){
  .page-contact .hero-layout{
    grid-template-columns: 1fr 320px;
    gap: 56px;
  }
  .page-contact .hero-visual{
    width: 320px;
  }
}
@media(min-width: 1080px){
  .page-contact .contact-cards{
    gap: 22px;
  }
  .page-contact .help-shortcuts{
    gap: 22px;
  }
}