*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  background:#050407;
}

body{
  padding-bottom:92px;
  color:#f7f3ff;
  font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
}

.elements-site-footer{
  --elements-purple:#ad55ff;
  --elements-purple-dark:#4d1b73;
  --elements-silver:#eef0f6;
  --elements-muted:#c7b8d5;

  width:100%;
  margin-top:36px;
  border-top:1px solid rgba(173,85,255,.34);
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(173,85,255,.14),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #0b0710,
      #050407
    );
  box-shadow:0 -18px 40px rgba(0,0,0,.40);
}

.elements-footer-inner{
  width:min(1180px,100%);
  margin:0 auto;
  padding:34px 18px 22px;
}

.elements-footer-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start;
}

.elements-footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.elements-footer-logo{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  flex:0 0 58px;
  border:1px solid rgba(205,138,255,.62);
  border-radius:18px;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(188,98,255,.38),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #1b1027,
      #060408
    );
  box-shadow:
    0 0 22px rgba(173,85,255,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.elements-footer-logo span{
  color:#ead7ff;
  font-size:31px;
  line-height:1;
  text-shadow:
    0 0 8px rgba(255,255,255,.55),
    0 0 16px rgba(173,85,255,.85),
    0 0 28px rgba(173,85,255,.48);
}

.elements-footer-brand-text h2{
  margin:0;
  color:#fff;
  font-size:23px;
  line-height:1.2;
  font-weight:1000;
}

.elements-footer-brand-text p{
  margin:7px 0 0;
  color:#bd93df;
  font-size:13px;
  letter-spacing:.08em;
}

.elements-footer-desc{
  max-width:560px;
  margin:18px 0 0;
  color:#cfc5d8;
  font-size:14px;
  line-height:1.8;
}

.elements-footer-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.elements-footer-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:12px 14px;
  border:1px solid rgba(188,110,255,.26);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  color:#eadff4;
  font-size:14px;
  font-weight:900;
  text-align:center;
  text-decoration:none;
  transition:
    color .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    transform .2s ease;
}

.elements-footer-links a:hover{
  color:#fff;
  border-color:rgba(201,132,255,.62);
  background:rgba(126,42,177,.20);
  transform:translateY(-1px);
}

.elements-footer-contact{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:56px;
  margin-top:14px;
  padding:0 18px;
  border:1px solid rgba(205,138,255,.70);
  border-radius:999px;
  background:
    linear-gradient(
      135deg,
      rgba(133,44,191,.52),
      rgba(27,10,40,.95)
    );
  color:#fff;
  font-size:16px;
  font-weight:1000;
  text-decoration:none;
  box-shadow:
    0 0 24px rgba(173,85,255,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.elements-footer-contact:hover{
  border-color:#dcabff;
  box-shadow:0 0 30px rgba(173,85,255,.40);
}

.elements-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(173,85,255,.16);
  color:#8f8299;
  font-size:12px;
  line-height:1.7;
}

/* 浮動電話按鈕 */
.elements-floating-phone{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-width:190px;
  height:62px;
  padding:0 20px;

  border:1px solid rgba(215,157,255,.78);
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #7f2fc2,
      #351249 60%,
      #14091d
    );

  color:#fff;
  font-size:16px;
  font-weight:1000;
  text-decoration:none;

  box-shadow:
    0 12px 32px rgba(0,0,0,.45),
    0 0 28px rgba(173,85,255,.36),
    inset 0 1px 0 rgba(255,255,255,.10);

  /*
   * 安全預設為顯示。
   * 即使JavaScript失效，按鈕仍不會完全消失。
   */
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);

  transition:
    opacity .24s ease,
    transform .24s ease,
    visibility 0s linear 0s,
    box-shadow .2s ease;
}

/*
 * JavaScript成功初始化後，
 * 沒達到捲動距離時才隱藏。
 */
html.elements-floating-ready
.elements-floating-phone:not(.is-visible){
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(20px);
  transition:
    opacity .24s ease,
    transform .24s ease,
    visibility 0s linear .24s,
    box-shadow .2s ease;
}

/* 達到捲動距離後顯示 */
html.elements-floating-ready
.elements-floating-phone.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}

.elements-floating-phone.is-visible:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 34px rgba(0,0,0,.50),
    0 0 34px rgba(173,85,255,.48);
}

.elements-floating-phone-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  color:#efdfff;
  font-size:18px;
  box-shadow:inset 0 0 10px rgba(255,255,255,.06);
}

@media(max-width:760px){

  .elements-footer-inner{
    padding:28px 14px 20px;
  }

  .elements-footer-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .elements-footer-links{
    grid-template-columns:1fr;
  }

  .elements-footer-links a{
    min-height:52px;
  }

  .elements-footer-brand-text h2{
    font-size:20px;
  }

  .elements-floating-phone{
    right:12px;
    bottom:12px;
    left:12px;
    width:auto;
    min-width:0;
    height:60px;
    font-size:15px;
  }

  body{
    padding-bottom:84px;
  }
}

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

  .elements-floating-phone,
  html.elements-floating-ready
  .elements-floating-phone:not(.is-visible){
    transition:none;
  }
}