/* HONGPHOT.COM v8.1.21 — Public advertising contact only.
   Intentionally isolated from operational dashboard/community CSS. */
:root {
  color-scheme: dark;
  --hp-bg: #080f1e;
  --hp-card: #101d32;
  --hp-white: #f7f9ff;
  --hp-muted: #9caec9;
  --hp-blue: #47b3ff;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body.hp-contact-only {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--hp-white);
  background: var(--hp-bg);
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hp-contact-main {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(24px, 5vw, 64px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 45% at 50% 51%, rgba(25, 91, 158, .17), transparent 82%),
    radial-gradient(ellipse 37% 42% at 95% 7%, rgba(10, 86, 147, .12), transparent 82%),
    linear-gradient(150deg, #0b1324 0%, #080e19 52%, #0a1324 100%);
}
.hp-contact-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(800px, 110vw);
  height: min(800px, 110vw);
  border: 1px solid rgba(155, 187, 236, .045);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hp-contact-panel {
  position: relative;
  width: min(100%, 674px);
  padding: clamp(34px, 6.4vw, 66px);
  border: 1px solid rgba(143, 189, 241, .14);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(24, 41, 68, .82), rgba(11, 23, 40, .94));
  box-shadow: 0 28px 100px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.hp-contact-panel::before {
  content: "";
  position: absolute;
  height: 2px;
  top: 0;
  left: 28%;
  right: 28%;
  background: linear-gradient(90deg, transparent, rgba(88, 181, 255, .67), transparent);
  pointer-events: none;
}
.hp-contact-logo {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(108, 194, 255, .23);
  background: linear-gradient(140deg, rgba(40, 151, 238, .22), rgba(40, 151, 238, .055));
  color: #74ccff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hp-contact-logo svg { width: 28px; height: 28px; }
.hp-contact-panel h1 {
  margin: 27px 0 30px;
  color: var(--hp-white);
  font-size: clamp(29px, 4.5vw, 43px);
  font-weight: 800;
  letter-spacing: -.052em;
  line-height: 1.19;
}
.hp-contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 106px;
  padding: 21px 23px;
  border: 1px solid rgba(94, 169, 241, .22);
  border-radius: 17px;
  background: rgba(7, 19, 37, .58);
  color: inherit;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hp-contact-link:hover {
  transform: translateY(-2px);
  border-color: rgba(97, 187, 255, .66);
  background: rgba(12, 35, 63, .85);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .15);
}
.hp-contact-link:focus-visible { outline: 3px solid #69c3ff; outline-offset: 5px; }
.hp-contact-link-text { min-width: 0; display: grid; gap: 10px; }
.hp-contact-service {
  color: #7bbde9;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .22em;
}
.hp-contact-url {
  color: #f2f8ff;
  font-size: clamp(17px, 2.45vw, 23px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.hp-contact-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #177bd1;
  color: #fff;
  transition: background .18s ease;
}
.hp-contact-arrow svg { width: 20px; height: 20px; }
.hp-contact-link:hover .hp-contact-arrow { background: #2c9beb; }
@media (max-width: 520px) {
  .hp-contact-main { padding: 19px; }
  .hp-contact-panel { padding: 28px 23px 25px; border-radius: 20px; }
  .hp-contact-logo { width: 52px; height: 52px; border-radius: 16px; }
  .hp-contact-logo svg { width: 25px; height: 25px; }
  .hp-contact-panel h1 { margin: 24px 0 25px; font-size: clamp(26px, 8vw, 33px); }
  .hp-contact-link { padding: 18px 16px; gap: 10px; min-height: 95px; border-radius: 15px; }
  .hp-contact-service { font-size: 10px; }
  .hp-contact-arrow { width: 37px; height: 37px; border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-contact-link, .hp-contact-arrow { transition: none; }
  .hp-contact-link:hover { transform: none; }
}