.contact-main
{
  min-height:calc(100vh - 78px);
  background:radial-gradient(circle at 80% 8%,#0b3974 0,transparent 29%),linear-gradient(180deg,#07101f,#04142d 58%,#061f42)
}

.contact-wrap
{
  width:min(920px,calc(100% - 40px));
  margin:0 auto
}

.contact-hero
{
  padding:72px 0 46px;
  border-bottom:1px solid #ffffff12
}

.contact-hero h1
{
  font-size:clamp(38px,6vw,62px);
  line-height:1.1;
  margin:12px 0 15px
}

.contact-hero p
{
  max-width:700px;
  color:#b8c9dd;
  font-size:17px;
  line-height:1.8;
  margin:0
}

.contact-list
{
  padding:46px 0 90px;
  display:flex;
  flex-direction:column;
  gap:24px
}

.contact-card
{
  display:grid;
  grid-template-columns:88px 1fr;
  border:1px solid #4b98e344;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,#082e5d,#051c3b);
  box-shadow:0 22px 55px #00142e55
}

.contact-number
{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:32px;
  background:linear-gradient(180deg,#0b4b92,#062750);
  color:#77bfff;
  font-size:25px;
  font-weight:900;
  letter-spacing:.08em
}

.contact-content
{
  padding:30px 34px 34px
}

.contact-title
{
  display:flex;
  align-items:center;
  gap:13px
}

.contact-title small
{
  display:block;
  color:#7fbfff;
  font-weight:800;
  letter-spacing:1.6px;
  font-size:11px
}

.contact-title h2
{
  font-size:34px;
  margin:2px 0 0
}

.channel-dot
{
  width:14px;
  height:14px;
  border-radius:50%;
  box-shadow:0 0 0 6px #ffffff0c
}

.line-dot
{
  background:#35d276
}

.wa-dot
{
  background:#4aacff
}

.contact-content>p
{
  color:#b7c8db;
  line-height:1.8
}

.contact-qr
{
  width:min(360px,100%);
  aspect-ratio:1;
  margin:24px auto;
  border-radius:20px;
  padding:12px;
  background:#fff;
  box-shadow:0 14px 35px #00142e66
}

.contact-qr img
{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.contact-qr.placeholder
{
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#eaf3ff,#fff);
  color:#6d8096;
  text-align:center;
  font-weight:900;
  letter-spacing:.12em
}

.contact-info
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:22px
}

.contact-info>div
{
  padding:15px 17px;
  border:1px solid #5aa7ef33;
  border-radius:14px;
  background:#041a37
}

.contact-info span
{
  display:block;
  color:#87a4c2;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  margin-bottom:5px
}

.contact-info strong
{
  overflow-wrap:anywhere
}

.contact-action
{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  margin-top:18px;
  border-radius:14px;
  color:#fff;
  font-weight:900;
  font-size:17px;
  background:linear-gradient(135deg,#0877d8,#144f9c);
  box-shadow:0 11px 28px #00173366
}

.line-action
{
  background:linear-gradient(135deg,#20b85e,#35d276)
}

.contact-action.disabled
{
  opacity:.42;
  box-shadow:none
}

.nav nav a.nav-contact
{
  color:#34d17b
}

.nav nav a.nav-contact[aria-current="page"]
{
  color:#5ded9b
}

@media(max-width:640px)
{
  .contact-wrap
  {
    width:min(100% - 24px,920px)
  }
  .contact-hero
  {
    padding:48px 0 34px
  }
  .contact-card
  {
    grid-template-columns:1fr
  }
  .contact-number
  {
    justify-content:flex-start;
    padding:16px 20px;
    background:#07366c;
    font-size:16px
  }
  .contact-content
  {
    padding:22px 18px 25px
  }
  .contact-info
  {
    grid-template-columns:1fr
  }
  .contact-title h2
  {
    font-size:29px
  }
}