@import url("hanul-skin-v3.css");

/* How a contest runs + Partners — redrawn to the Secure3-style reference.
   House mark is Hanul, not Secure3. Logos stay in color and scroll. */

#hanul-how,
#hanul-partners,
#hanul-teams {
  background: #f4f6fa;
  color: #122033;
  padding: 72px 6vw 56px;
}

#hanul-teams {
  background: #fff;
  padding: 72px 0 80px;
}

#hanul-how h2,
#hanul-partners h2,
#hanul-teams h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #122033;
  text-align: center;
  margin: 0 0 2.4rem;
}

#hanul-how-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 980px;
  margin: 0 auto;
}

#hanul-how-mark {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 12px;
}

#hanul-how-line {
  width: 48px;
  height: 2px;
  background: #c5cdd8;
  position: relative;
}
#hanul-how-line::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6ec8ff;
  border: 2px solid #fff;
}

.hanul-how-card {
  background: #fff;
  border: 1px solid #e4e8ef;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  min-width: 220px;
  max-width: 280px;
  margin-left: 10px;
  box-shadow: 0 8px 24px rgba(18, 32, 51, 0.06);
}
.hanul-how-card.dash {
  border-style: dashed;
  border-color: #c9d4e3;
}
.hanul-how-card .n {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: #e8f4ff;
  color: #0a1628;
  margin-right: 0.4rem;
}
.hanul-how-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
  color: #122033;
}
.hanul-how-card p,
.hanul-how-card li {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5b6b7c;
}
.hanul-how-card ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

#hanul-how-more {
  display: block;
  width: max-content;
  margin: 1.6rem auto 0;
  color: #0a1628 !important;
  border-bottom: 1px solid #0a1628 !important;
  font-size: 0.9rem;
}

#hanul-partners h2 {
  text-align: left;
  max-width: 1248px;
  margin: 0 auto 0.7rem;
}
#hanul-partners .hanul-ptabs {
  max-width: 1248px;
  margin: 0 auto 1.4rem;
  font-size: 0.88rem;
  color: #7a8796;
}
#hanul-partners .hanul-ptabs button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
#hanul-partners .hanul-ptabs button.on {
  color: #2f80ed;
  font-weight: 600;
}

.hanul-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
}
.hanul-marquee[hidden] {
  display: none !important;
}
.hanul-marquee-track {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  width: max-content;
  animation: hanul-marquee 32s linear infinite;
}
.hanul-marquee-track:hover {
  animation-play-state: paused;
}
#hanul-partners .hanul-marquee img,
#page #hanul-partners img,
#page img[src*="images/investors/"],
#page img[src*="images/ecoPartners/"] {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  height: 36px !important;
  width: auto !important;
  max-width: 160px;
  object-fit: contain;
}
/* Wordmark shipped as white on transparent — ink it for the light band. */
#hanul-partners img[src*="Zonff_Partners"] {
  filter: invert(1) !important;
  -webkit-filter: invert(1) !important;
}

/* Next may re-insert the dead PNG / Swiper after hydration — hide those only. */
#page img[src*="audit_proccess"] {
  display: none !important;
}
#page .max-w-\[1248px\].mx-auto.py-10.border-y:has(h1) {
  display: none !important;
}
#page .border-y.py-\[120px\]:has(h2.text-3xl) {
  display: none !important;
}
#page .w-full.relative.overflow-hidden.py-\[120px\]:has(h2.text-3xl):not(#hanul-teams) {
  display: none !important;
}

#hanul-teams .hanul-tcard {
  flex: 0 0 280px;
  width: 280px;
  padding-right: 1.5rem;
}
#hanul-teams .hanul-tcard img,
#page #hanul-teams img,
#page img[src*="images/customer/"] {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  height: 36px !important;
  width: auto !important;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 1rem;
}
#hanul-teams .hanul-tcard .q {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #5b6b7c;
  min-height: 6.4em;
}
#hanul-teams .hanul-tcard .who {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: #9aa3ad;
}
#hanul-teams .hanul-marquee-track {
  animation-duration: 48s;
}

@keyframes hanul-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* CTA + footer: vivid band, white pill, light footer — not navy-on-navy. */
#hanul-cta,
#page .bg-primary.text-primary-content.bg-center.bg-cover {
  background: #2f6bff !important;
  color: #fff !important;
}
#hanul-cta p,
#page .bg-primary.text-primary-content.bg-center.bg-cover p {
  color: #fff !important;
}
#hanul-cta a.btn,
#page .bg-primary.text-primary-content.bg-center.bg-cover a.btn {
  background: #fff !important;
  color: #0a1628 !important;
  border: 0 !important;
  border-radius: 999px !important;
  min-width: 165px;
  height: 48px !important;
  font-weight: 600;
  box-shadow: none !important;
}

#hanul-foot,
#page .mt-\[100px\].w-full.flex.flex-col {
  background: #fff !important;
  color: #122033 !important;
  margin-top: 0 !important;
  padding-top: 4.25rem;
  padding-bottom: 1.5rem;
}
#hanul-foot p,
#hanul-foot a,
#hanul-foot span,
#hanul-foot .text-base-content,
#hanul-foot .text-base-content\/50,
#hanul-foot .text-base-content\/80,
#page .mt-\[100px\] p,
#page .mt-\[100px\] a,
#page .mt-\[100px\] span,
#page .mt-\[100px\] .text-base-content,
#page .mt-\[100px\] .text-base-content\/50,
#page .mt-\[100px\] .text-base-content\/80 {
  color: #122033 !important;
}
#hanul-foot svg,
#page .mt-\[100px\] svg {
  color: #122033 !important;
}
#hanul-foot .fill-base-content\/60,
#page .mt-\[100px\] .fill-base-content\/60 {
  fill: #122033 !important;
  opacity: 0.55;
}
#hanul-foot .border-t,
#page .mt-\[100px\] .border-t {
  border-color: rgba(18, 32, 51, 0.12) !important;
}

#hanul-hero-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 22, 40, 0.55) 0%,
    rgba(10, 22, 40, 0.18) 52%,
    rgba(10, 22, 40, 0.32) 100%
  );
}
#hanul-field {
  opacity: 1;
}

#hanul-kr {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto 1.5rem;
  padding: 0 32px 4px;
}
#hanul-kr img {
  width: min(340px, 88vw);
  height: auto;
  border-radius: 2px;
  box-shadow: 0 10px 32px rgba(18, 32, 51, 0.12);
}
#hanul-kr .hanul-kr-copy {
  max-width: 28rem;
}
#hanul-kr .k {
  font-size: 1.2rem;
  font-weight: 700;
  color: #122033 !important;
  margin: 0 0 0.45rem;
}
#hanul-kr p {
  margin: 0;
  color: #5b6b7c !important;
  line-height: 1.45;
}

/* Coverage tabs + colored project marks (dump invert made them all white). */
#hanul-cover {
  max-width: 1248px;
  margin: 0 auto;
  padding: 2.75rem 1rem 3.25rem;
}
#hanul-cover h2 {
  font-size: 2.25rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: inherit;
}
#hanul-cover .sub {
  margin: 0 0 1.75rem;
  opacity: 0.55;
}
#hanul-cover .hanul-cbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
#hanul-cover .hanul-ctabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
}
#hanul-cover .hanul-ctabs button {
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.48;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.2rem 0.15rem;
}
#hanul-cover .hanul-ctabs button.on {
  opacity: 1;
  color: #6ec8ff;
}
#hanul-cover .hanul-ctabs span {
  opacity: 0.28;
  margin: 0 0.55rem;
}
#hanul-cover .open {
  color: inherit;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}
#hanul-cover .hanul-cgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.35rem 1.1rem;
  align-items: center;
}
#hanul-cover .hanul-ccell {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hanul-cover img,
#page #hanul-cover img,
#page img[src*="images/projects/color/"] {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  max-height: 32px !important;
  max-width: 148px;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
#hanul-cover img[src*="myxrp"] {
  max-height: 44px !important;
  max-width: 44px;
}
#page .py-10:has(.skeleton):has(h2) {
  display: none !important;
}

/* Next may put Resource / Docs back */
#page > .sticky .dropdown.dropdown-hover,
#page a[href="/docs/"],
#page a[title="Docs"] {
  display: none !important;
}

@media (max-width: 800px) {
  #hanul-how-row {
    flex-direction: column;
    gap: 1rem;
  }
  #hanul-how-line {
    width: 2px;
    height: 28px;
  }
  .hanul-how-card {
    margin-left: 0;
  }
  #hanul-cover .hanul-cgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}