/* ========== Global Base ========== */
:root{
  --halanZ-bg-main: #064D5B;
  --halanZ-bg-deep: #053943;
  --halanZ-card: #384A4C;
  --halanZ-accent: #ECFC03;
  --halanZ-btn: #ED0707;
  --halanZ-nav: #C6FBC6;
  --halanZ-text: #E8FFF0;
  --halanZ-muted: rgba(232,255,240,.74);
  --halanZ-shadow-dark: rgba(0,0,0,.34);
  --halanZ-shadow-light: rgba(255,255,255,.06);
}

*{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color: var(--halanZ-text);
  background:
    radial-gradient(circle at 12% 18%, rgba(198,251,198,.10) 0%, transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(236,252,3,.12) 0%, transparent 26%),
    radial-gradient(circle at 50% 80%, rgba(237,7,7,.10) 0%, transparent 28%),
    linear-gradient(135deg, #064D5B 0%, #0A5C63 35%, #053943 68%, #064D5B 100%);
  min-height: 100vh;
}

/* ========== Header ========== */
.halanZ_header{
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 14px 0;
  backdrop-filter: blur(12px);
  background: rgba(6,77,91,.52);
  border-bottom: 1px solid rgba(236,252,3,.12);
}

.halanZ_headerWrap{
  width: min(1380px, calc(100% - 24px));
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 22px;
  background: rgba(56,74,76,.72);
  border: 1px solid rgba(236,252,3,.34);
  box-shadow:
    12px 12px 24px var(--halanZ-shadow-dark),
    -10px -10px 20px var(--halanZ-shadow-light),
    0 0 22px rgba(198,251,198,.08);
}

.halanZ_headerMain{
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 18px;
}

.halanZ_headerBrand{
  display: flex;
  align-items: center;
}

.halanZ_logoLink{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.halanZ_logoLink img{
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.halanZ_headerCenter{
  display: flex;
  justify-content: center;
  min-width: 0;
}

.halanZ_desktopNav{
  width: 100%;
}

.halanZ_navList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.halanZ_navItem{
  margin: 0;
  padding: 0;
}

.halanZ_navLink{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  color: var(--halanZ-nav);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: all .28s ease;
  border: 1px solid transparent;
  text-shadow: 0 0 8px rgba(198,251,198,.18);
}

.halanZ_navLink::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(198,251,198,.08), rgba(236,252,3,.04));
  opacity: 0;
  transition: opacity .28s ease;
}

.halanZ_navLink:hover{
  color: #ffffff;
  border-color: rgba(236,252,3,.54);
  box-shadow:
    inset 0 0 0 1px rgba(236,252,3,.16),
    0 0 18px rgba(198,251,198,.24);
}

.halanZ_navLink:hover::before{
  opacity: 1;
}

.halanZ_headerTools{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.halanZ_searchBox{
  display: inline-flex;
  align-items: center;
}

.halanZ_searchForm{
  display: flex;
  align-items: center;
  gap: 8px;
}

.halanZ_searchField{
  position: relative;
}

.halanZ_searchInput{
  width: 9.2em;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(236,252,3,.42);
  outline: none;
  background: linear-gradient(145deg, rgba(67,86,88,.92), rgba(45,60,62,.92));
  color: var(--halanZ-text);
  font-size: 14px;
  font-weight: 700;
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,.22),
    inset -3px -3px 8px rgba(255,255,255,.03);
  transition: all .28s ease;
}

.halanZ_searchInput::placeholder{
  color: rgba(232,255,240,.62);
}

.halanZ_searchInput:focus{
  border-color: var(--halanZ-accent);
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,.22),
    inset -3px -3px 8px rgba(255,255,255,.03),
    0 0 0 3px rgba(236,252,3,.10),
    0 0 18px rgba(236,252,3,.18);
}

.halanZ_searchLabel{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.halanZ_searchBtn{
  width: 40px;
  height: 40px;
  border: 1px solid rgba(236,252,3,.45);
  border-radius: 50%;
  background: linear-gradient(135deg, #ED0707 0%, #9A0303 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    5px 5px 12px rgba(0,0,0,.26),
    -4px -4px 10px rgba(255,255,255,.03),
    0 0 14px rgba(237,7,7,.24);
  transition: all .28s ease;
}

.halanZ_searchBtn:hover{
  transform: scale(.95);
  box-shadow:
    3px 3px 8px rgba(0,0,0,.28),
    0 0 18px rgba(237,7,7,.36);
}

.halanZ_mobileToggle{
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(236,252,3,.48);
  background: linear-gradient(145deg, rgba(67,86,88,.96), rgba(47,61,63,.96));
  color: var(--halanZ-nav);
  cursor: pointer;
  box-shadow:
    6px 6px 12px rgba(0,0,0,.24),
    -4px -4px 10px rgba(255,255,255,.03);
  transition: all .28s ease;
}

.halanZ_mobileToggle:hover{
  transform: scale(.95);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(198,251,198,.26);
}

.halanZ_mobileToggleIcon{
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.halanZ_mobileNav{
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(236,252,3,.16);
}

.halanZ_mobileNav.is-open{
  display: block;
}

.halanZ_mobileNavInner{
  width: 100%;
}

.halanZ_mobileNavList{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.halanZ_mobileNavItem{
  margin: 0;
}

.halanZ_mobileNavLink{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--halanZ-nav);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  background: rgba(198,251,198,.04);
  border: 1px solid rgba(236,252,3,.16);
  transition: all .28s ease;
}

.halanZ_mobileNavLink:hover{
  color: #ffffff;
  border-color: rgba(236,252,3,.48);
  box-shadow: 0 0 14px rgba(198,251,198,.18);
}

/* ========== Responsive ========== */
@media (max-width: 1100px){
  .halanZ_headerMain{
    grid-template-columns: 140px 1fr auto;
    gap: 12px;
  }

  .halanZ_navLink{
    padding: 0 12px;
    font-size: 14px;
  }
}

@media (max-width: 860px){
  .halanZ_desktopNav{
    display: none;
  }

  .halanZ_mobileToggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .halanZ_headerMain{
    grid-template-columns: 1fr auto;
  }

  .halanZ_headerCenter{
    display: none;
  }

  .halanZ_headerBrand{
    min-width: 0;
  }
}

@media (max-width: 560px){
  .halanZ_headerWrap{
    padding: 10px 12px;
  }

  .halanZ_searchInput{
    width: 8.6em;
  }

  .halanZ_searchForm{
    gap: 6px;
  }

  .halanZ_searchBtn,
  .halanZ_mobileToggle{
    width: 38px;
    height: 38px;
  }
}
/* ========== Common Layout ========== */
.halanZ_container{
  width: min(1380px, calc(100% - 24px));
  margin: 0 auto;
}

.halanZ_section{
  position: relative;
  padding: 56px 0;
}

.halanZ_eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(198,251,198,.08);
  border: 1px solid rgba(236,252,3,.28);
  color: #C6FBC6;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(198,251,198,.08);
}

.halanZ_sectionHead{
  max-width: 820px;
  margin-bottom: 26px;
}

.halanZ_mainTitle,
.halanZ_sectionTitle{
  margin: 14px 0 16px;
  color: #F2FFF3;
  line-height: 1.22;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(198,251,198,.08);
}

.halanZ_mainTitle{
  font-size: clamp(34px, 5vw, 66px);
}

.halanZ_sectionTitle{
  font-size: clamp(28px, 4vw, 46px);
}

.halanZ_mainText,
.halanZ_sectionText{
  margin: 0;
  color: rgba(232,255,240,.84);
  font-size: 16px;
  line-height: 1.95;
}

.halanZ_neoCard{
  position: relative;
  border-radius: 26px;
  padding: 22px;
  background: linear-gradient(145deg, rgba(65,83,85,.96), rgba(49,65,67,.96));
  border: 1px solid rgba(236,252,3,.24);
  box-shadow:
    16px 16px 32px rgba(0,0,0,.24),
    -10px -10px 22px rgba(255,255,255,.03),
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.15);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.halanZ_neoCard:hover{
  transform: scale(.98);
  border-color: rgba(236,252,3,.44);
  box-shadow:
    10px 10px 20px rgba(0,0,0,.28),
    -6px -6px 14px rgba(255,255,255,.03),
    0 0 22px rgba(236,252,3,.10);
}

.halanZ_neoCard::after{
  content: "";
  position: absolute;
  top: 0;
  right: -80px;
  width: 180px;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(236,252,3,.06) 45%, transparent 100%);
  transform: skewX(-24deg);
  pointer-events: none;
}

.halanZ_btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  transition: all .28s ease;
  border: 1px solid rgba(236,252,3,.32);
  cursor: pointer;
}

.halanZ_btnPrimary{
  background: linear-gradient(135deg, #ED0707 0%, #A50505 100%);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(237,7,7,.22);
}

.halanZ_btnPrimary:hover{
  transform: scale(.96);
  box-shadow: 0 0 24px rgba(237,7,7,.34);
}

.halanZ_btnGhost{
  background: rgba(198,251,198,.06);
  color: #C6FBC6;
}

.halanZ_btnGhost:hover{
  transform: scale(.96);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(198,251,198,.16);
}

/* ========== Footer ========== */
.halanZ_footer{
  padding: 16px 0 24px;
}

.halanZ_footerWrap{
  width: min(1380px, calc(100% - 24px));
  margin: 0 auto;
  padding: 22px 18px 18px;
  border-radius: 28px;
  background: rgba(56,74,76,.72);
  border: 1px solid rgba(236,252,3,.24);
  box-shadow:
    14px 14px 28px rgba(0,0,0,.24),
    -8px -8px 18px rgba(255,255,255,.03);
}

.halanZ_footerGrid{
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap: 22px;
}

.halanZ_footerCard{
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(145deg, rgba(65,83,85,.94), rgba(48,63,65,.94));
  border: 1px solid rgba(236,252,3,.18);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.18);
}

.halanZ_footerTitle{
  margin: 14px 0 10px;
  color: #F3FFF4;
  font-size: 24px;
  font-weight: 900;
}

.halanZ_footerDesc{
  margin: 0;
  color: rgba(232,255,240,.80);
  font-size: 15px;
  line-height: 1.9;
}

.halanZ_footerColTitle{
  margin: 0 0 14px;
  color: #ECFC03;
  font-size: 18px;
  font-weight: 900;
}

.halanZ_footerNav{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.halanZ_footerNav li a{
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  color: #C6FBC6;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  background: rgba(198,251,198,.04);
  border: 1px solid rgba(236,252,3,.14);
  transition: all .28s ease;
}

.halanZ_footerNav li a:hover{
  color: #fff;
  transform: scale(.98);
  box-shadow: 0 0 14px rgba(198,251,198,.16);
}

.halanZ_footerContact{
  display: grid;
  gap: 12px;
}

.halanZ_footerContactItem{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(198,251,198,.04);
  border: 1px solid rgba(236,252,3,.14);
}

.halanZ_footerContactItem i{
  color: #ECFC03;
  font-size: 16px;
  margin-top: 3px;
}

.halanZ_footerContactItem a,
.halanZ_footerContactItem em{
  color: rgba(232,255,240,.86);
  font-style: normal;
  text-decoration: none;
  line-height: 1.8;
  font-size: 14px;
  font-weight: 700;
}

.halanZ_footerBottom{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(236,252,3,.14);
  text-align: center;
}

.halanZ_footerBottom span{
  color: rgba(232,255,240,.64);
  font-size: 13px;
  line-height: 1.8;
}

.halanZ_footerBottom a{
  color: #C6FBC6;
  text-decoration: none;
}

.halanZ_backTop{
  position: fixed;
  right: 18px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(236,252,3,.36);
  background: linear-gradient(135deg, #ED0707 0%, #950404 100%);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(237,7,7,.28);
  cursor: pointer;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all .28s ease;
}

.halanZ_backTop.show{
  opacity: 1;
  visibility: visible;
}

.halanZ_backTop:hover{
  transform: scale(.95);
}

/* ========== Home Hero ========== */
.halanZ_homeHeroWrap{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: center;
}

.halanZ_homeHeroActions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.halanZ_homeHeroCard{
  padding: 16px;
  min-height: 420px;
}

.halanZ_homeHeroImage img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 22px;
}

.halanZ_homeHeroBadge{
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(236,252,3,.28);
  background: rgba(6,77,91,.84);
  box-shadow: 0 0 16px rgba(236,252,3,.10);
}

.halanZ_badgeA{
  top: 22px;
  left: 22px;
}

.halanZ_badgeB{
  right: 22px;
  bottom: 22px;
}

/* ========== Home About ========== */
.halanZ_homeAboutWrap{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

.halanZ_homeAboutCard{
  padding: 16px;
}

.halanZ_homeAboutCard img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 22px;
  display: block;
}

/* ========== Service / Stats / Grid ========== */
.halanZ_serviceGrid,
.halanZ_statsGrid,
.halanZ_securityGrid,
.halanZ_powerGrid,
.halanZ_newsGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.halanZ_serviceCard img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  margin-bottom: 16px;
}

.halanZ_serviceCard h3,
.halanZ_statCard h3,
.halanZ_infoCard h3,
.halanZ_metricCard h3,
.halanZ_newsBody h3{
  margin: 0 0 12px;
  color: #F2FFF3;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 900;
}

.halanZ_serviceCard p,
.halanZ_statCard p,
.halanZ_infoCard p,
.halanZ_metricCard p,
.halanZ_newsBody p{
  margin: 0;
  color: rgba(232,255,240,.82);
  font-size: 15px;
  line-height: 1.9;
}

.halanZ_statCard,
.halanZ_infoCard,
.halanZ_metricCard{
  min-height: 100%;
}

.halanZ_statCard i,
.halanZ_infoCard i,
.halanZ_metricCard i{
  display: inline-flex;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: rgba(236,252,3,.08);
  color: #ECFC03;
  font-size: 22px;
  box-shadow: inset 0 0 0 1px rgba(236,252,3,.16);
}

.halanZ_statCard strong,
.halanZ_metricCard strong{
  display: block;
  margin-bottom: 10px;
  color: #ECFC03;
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
}

/* ========== Ask Slider ========== */
.halanZ_askSlider{
  position: relative;
}

.halanZ_askTrack{
  position: relative;
  min-height: 290px;
}

.halanZ_askCard{
  display: none;
  padding: 26px;
}

.halanZ_askCard.is-active{
  display: block;
}

.halanZ_askAvatar{
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: rgba(236,252,3,.08);
  color: #ECFC03;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}

.halanZ_askCard h3{
  margin: 0 0 12px;
  color: #F2FFF3;
  font-size: 26px;
  font-weight: 900;
}

.halanZ_askCard p{
  margin: 0;
  color: rgba(232,255,240,.84);
  font-size: 16px;
  line-height: 1.95;
}

.halanZ_askDots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.halanZ_askDot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(198,251,198,.28);
  cursor: pointer;
}

.halanZ_askDot.is-active{
  background: #ECFC03;
  box-shadow: 0 0 12px rgba(236,252,3,.34);
}

/* ========== FAQ ========== */
.halanZ_faqGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.halanZ_faqCard{
  padding: 0;
}

.halanZ_faqCard summary{
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  color: #F2FFF3;
  font-size: 18px;
  font-weight: 900;
}

.halanZ_faqCard summary::-webkit-details-marker{
  display: none;
}

.halanZ_faqCard p{
  margin: 0;
  padding: 0 22px 22px;
  color: rgba(232,255,240,.82);
  line-height: 1.9;
  font-size: 15px;
}

/* ========== News ========== */
.halanZ_newsCard{
  padding: 14px;
}

.halanZ_newsThumb img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

.halanZ_newsBody{
  padding: 16px 8px 8px;
}

.halanZ_newsBody h3 a{
  color: #F2FFF3;
  text-decoration: none;
}

.halanZ_newsBody time{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: rgba(198,251,198,.78);
  font-size: 13px;
  font-weight: 800;
}

/* ========== Contact Form ========== */
.halanZ_homeContactWrap{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 28px;
  align-items: start;
}

.halanZ_contactInfoList{
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.halanZ_contactInfoItem{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(198,251,198,.05);
  border: 1px solid rgba(236,252,3,.16);
}

.halanZ_contactInfoItem i{
  color: #ECFC03;
  margin-top: 3px;
}

.halanZ_contactInfoItem em{
  color: rgba(232,255,240,.84);
  font-style: normal;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 700;
}

.halanZ_homeContactCard{
  padding: 24px;
}

.halanZ_contactForm{
  display: grid;
  gap: 16px;
}

.halanZ_formRow{
  display: grid;
  gap: 10px;
}

.halanZ_formRow label{
  color: #C6FBC6;
  font-size: 14px;
  font-weight: 800;
}

.halanZ_formRow input,
.halanZ_formRow textarea{
  width: 100%;
  border: 1px solid rgba(236,252,3,.22);
  outline: none;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(62,80,82,.96), rgba(47,61,63,.96));
  color: #F2FFF3;
  font-size: 15px;
  padding: 14px 16px;
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,.18),
    inset -3px -3px 8px rgba(255,255,255,.03);
}

.halanZ_formRow input::placeholder,
.halanZ_formRow textarea::placeholder{
  color: rgba(232,255,240,.54);
}

.halanZ_formRow input:focus,
.halanZ_formRow textarea:focus{
  border-color: rgba(236,252,3,.48);
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,.18),
    inset -3px -3px 8px rgba(255,255,255,.03),
    0 0 0 3px rgba(236,252,3,.10);
}

.halanZ_submitBtn{
  width: fit-content;
}

/* ========== Responsive ========== */
@media (max-width: 1100px){
  .halanZ_footerGrid,
  .halanZ_homeHeroWrap,
  .halanZ_homeAboutWrap,
  .halanZ_homeContactWrap{
    grid-template-columns: 1fr;
  }

  .halanZ_serviceGrid,
  .halanZ_statsGrid,
  .halanZ_securityGrid,
  .halanZ_powerGrid,
  .halanZ_newsGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px){
  .halanZ_serviceGrid,
  .halanZ_statsGrid,
  .halanZ_securityGrid,
  .halanZ_powerGrid,
  .halanZ_newsGrid,
  .halanZ_faqGrid,
  .halanZ_footerNav{
    grid-template-columns: 1fr;
  }

  .halanZ_homeHeroImage img,
  .halanZ_homeAboutCard img{
    height: 280px;
  }

  .halanZ_section{
    padding: 42px 0;
  }

  .halanZ_statCard strong,
  .halanZ_metricCard strong{
    font-size: 30px;
  }
}
/* ========== Contact Page ========== */
.halanZ_contactHeroWrap,
.halanZ_contactFormWrap,
.halanZ_appHeroWrap,
.halanZ_appIntroWrap,
.halanZ_appInviteWrap{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 28px;
  align-items: center;
}

.halanZ_contactHeroCard,
.halanZ_appPhoneStage,
.halanZ_appIntroCard,
.halanZ_appInviteCard{
  padding: 16px;
}

.halanZ_contactHeroCard img,
.halanZ_appPhoneStage img,
.halanZ_appIntroCard img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 22px;
}

.halanZ_contactHeroCard,
.halanZ_appPhoneStage{
  position: relative;
}

.halanZ_contactHeroFloat,
.halanZ_appMiniBadge{
  position: absolute;
  right: 26px;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(6,77,91,.86);
  color: #F2FFF3;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(236,252,3,.28);
  box-shadow: 0 0 16px rgba(236,252,3,.10);
}

.halanZ_contactQuickGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.halanZ_contactQuickCard i{
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin-bottom: 16px;
  background: rgba(236,252,3,.08);
  color: #ECFC03;
  font-size: 22px;
}

.halanZ_contactQuickCard small{
  display: block;
  margin-bottom: 8px;
  color: #C6FBC6;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.halanZ_contactQuickCard h3{
  margin: 0 0 12px;
  color: #F2FFF3;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 900;
}

.halanZ_contactQuickCard a,
.halanZ_contactQuickCard span{
  display: inline-block;
  margin-bottom: 12px;
  color: #ECFC03;
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.6;
}

.halanZ_contactQuickCard p{
  margin: 0;
  color: rgba(232,255,240,.82);
  font-size: 15px;
  line-height: 1.9;
}

.halanZ_contactAccordion{
  display: grid;
  gap: 18px;
}

.halanZ_contactAccItem{
  padding: 0;
}

.halanZ_contactAccTitle{
  margin: 0;
}

.halanZ_contactAccBtn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  border: none;
  background: transparent;
  color: #F2FFF3;
  text-align: left;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.halanZ_contactAccBtn i{
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  background: rgba(236,252,3,.08);
  color: #ECFC03;
  font-size: 16px;
}

.halanZ_contactAccPanel{
  display: none;
  padding: 0 24px 22px;
}

.halanZ_contactAccItem.is-open .halanZ_contactAccPanel{
  display: block;
}

.halanZ_contactAccBody p{
  margin: 0 0 14px;
  color: rgba(232,255,240,.82);
  font-size: 15px;
  line-height: 1.95;
}

.halanZ_contactAccBody ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.halanZ_contactAccBody ul li{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(198,251,198,.05);
  border: 1px solid rgba(236,252,3,.14);
  color: rgba(232,255,240,.84);
  font-size: 14px;
  font-weight: 700;
}

.halanZ_contactAccBody ul li i{
  color: #ECFC03;
}

.halanZ_contactMetaList{
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.halanZ_contactMetaItem{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(198,251,198,.05);
  border: 1px solid rgba(236,252,3,.14);
  color: rgba(232,255,240,.86);
  font-size: 15px;
  font-weight: 700;
}

.halanZ_contactMetaItem i{
  color: #ECFC03;
}

/* ========== App Page ========== */
.halanZ_appHeroStats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.halanZ_appStat{
  text-align: center;
  padding: 18px;
}

.halanZ_appStat h3{
  margin: 0 0 8px;
  color: #ECFC03;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.halanZ_appStat small{
  color: rgba(232,255,240,.78);
  font-size: 14px;
  font-weight: 800;
}

.halanZ_appPhoneIcon{
  position: absolute;
  top: 26px;
  left: 26px;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(6,77,91,.88);
  color: #ECFC03;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 28px;
  box-shadow: 0 0 20px rgba(236,252,3,.14);
}

.halanZ_appFeatureTags{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.halanZ_appFeatureTags span{
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(198,251,198,.05);
  border: 1px solid rgba(236,252,3,.14);
  color: rgba(232,255,240,.84);
  font-size: 14px;
  font-weight: 700;
}

.halanZ_appStoreActions,
.halanZ_appInviteActions,
.halanZ_appCtaActions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.halanZ_appAdvantageGrid,
.halanZ_appExperienceGrid,
.halanZ_appTrustGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.halanZ_advantageCard h3,
.halanZ_expCard h3,
.halanZ_trustCard h3,
.halanZ_installCard h3,
.halanZ_timelineCard h4{
  margin: 0 0 12px;
  color: #F2FFF3;
  font-weight: 900;
  line-height: 1.4;
}

.halanZ_advantageCard h3,
.halanZ_expCard h3,
.halanZ_trustCard h3,
.halanZ_installCard h3{
  font-size: 22px;
}

.halanZ_advantageCard p,
.halanZ_expCard p,
.halanZ_trustCard p,
.halanZ_timelineCard p,
.halanZ_timelineCard li{
  color: rgba(232,255,240,.82);
  font-size: 15px;
  line-height: 1.9;
}

.halanZ_expCard h3 span,
.halanZ_trustCard span{
  display: inline-flex;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  background: rgba(236,252,3,.08);
  color: #ECFC03;
}

.halanZ_compareTableWrap{
  padding: 0;
  overflow: hidden;
}

.halanZ_compareTable{
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
}

.halanZ_compareTable > div{
  padding: 16px 18px;
  border-right: 1px solid rgba(236,252,3,.12);
  border-bottom: 1px solid rgba(236,252,3,.12);
  color: rgba(232,255,240,.84);
  font-size: 15px;
  line-height: 1.8;
}

.halanZ_compareTable > div:nth-child(1),
.halanZ_compareTable > div:nth-child(2),
.halanZ_compareTable > div:nth-child(3){
  background: rgba(236,252,3,.08);
  color: #F2FFF3;
  font-weight: 900;
}

.halanZ_timelineGroup{
  margin-bottom: 30px;
}

.halanZ_timelineYear{
  margin: 0 0 16px;
  color: #ECFC03;
  font-size: 28px;
  font-weight: 900;
}

.halanZ_timelineCard{
  margin-bottom: 16px;
}

.halanZ_timelineCard p{
  margin: 0 0 12px;
}

.halanZ_timelineCard ul{
  margin: 0;
  padding-left: 18px;
}

.halanZ_appFaqGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.halanZ_faqCard summary span{
  margin-right: 8px;
  color: #ECFC03;
}

.halanZ_installGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.halanZ_installStep{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(236,252,3,.12);
}

.halanZ_installStep:last-child{
  border-bottom: none;
}

.halanZ_installStep span{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(236,252,3,.08);
  color: #ECFC03;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
}

.halanZ_installStep h4{
  margin: 0 0 8px;
  color: #F2FFF3;
  font-size: 18px;
  font-weight: 900;
}

.halanZ_installStep p{
  margin: 0;
  color: rgba(232,255,240,.82);
  font-size: 15px;
  line-height: 1.85;
}

.halanZ_appTrustLead{
  margin: 0 0 8px;
  color: #C6FBC6;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.halanZ_appTrustNote{
  margin: 18px 0 0;
  color: rgba(232,255,240,.76);
  font-size: 15px;
  line-height: 1.9;
}

.halanZ_appInviteCard{
  text-align: center;
  padding: 36px 24px;
}

.halanZ_appInviteSub{
  margin: 18px 0 10px;
  color: #C6FBC6;
  font-size: 15px;
  font-weight: 800;
}

.halanZ_appInviteCode{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  min-height: 60px;
  padding: 0 24px;
  border-radius: 16px;
  background: rgba(236,252,3,.08);
  border: 1px solid rgba(236,252,3,.24);
  color: #ECFC03;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .08em;
}

.halanZ_appCtaCard{
  text-align: center;
  padding: 34px 24px;
}

.halanZ_appCtaTag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(198,251,198,.08);
  border: 1px solid rgba(236,252,3,.18);
  color: #C6FBC6;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 14px;
}

/* ========== Responsive Contact / App ========== */
@media (max-width: 1100px){
  .halanZ_contactHeroWrap,
  .halanZ_contactFormWrap,
  .halanZ_appHeroWrap,
  .halanZ_appIntroWrap,
  .halanZ_appInviteWrap{
    grid-template-columns: 1fr;
  }

  .halanZ_contactQuickGrid{
    grid-template-columns: repeat(2, 1fr);
  }

  .halanZ_appAdvantageGrid,
  .halanZ_appExperienceGrid,
  .halanZ_appTrustGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px){
  .halanZ_contactQuickGrid,
  .halanZ_contactAccBody ul,
  .halanZ_appFeatureTags,
  .halanZ_appFaqGrid,
  .halanZ_installGrid,
  .halanZ_appHeroStats,
  .halanZ_appAdvantageGrid,
  .halanZ_appExperienceGrid,
  .halanZ_appTrustGrid{
    grid-template-columns: 1fr;
  }

  .halanZ_contactHeroCard img,
  .halanZ_appPhoneStage img,
  .halanZ_appIntroCard img{
    height: 280px;
  }

  .halanZ_compareTable{
    grid-template-columns: 1fr;
  }

  .halanZ_compareTable > div{
    border-right: none;
  }
}
/* ========== Mini Section ========== */
.halanZ_sectionMini{
  padding: 8px 0 0;
}

/* ========== Breadcrumb ========== */
.halanZ_breadcrumbNav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(56,74,76,.54);
  border: 1px solid rgba(236,252,3,.14);
  box-shadow:
    10px 10px 20px rgba(0,0,0,.18),
    -5px -5px 12px rgba(255,255,255,.02);
}

.halanZ_breadcrumbItem{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(232,255,240,.76);
  font-size: 14px;
  font-weight: 700;
}

.halanZ_breadcrumbItem a{
  color: rgba(232,255,240,.76);
  text-decoration: none;
}

.halanZ_breadcrumbItem.is-current a{
  color: #ECFC03;
}

.halanZ_breadcrumbArrow{
  color: rgba(198,251,198,.54);
  font-size: 12px;
}

/* ========== List Hero / Show Hero ========== */
.halanZ_listHeroWrap,
.halanZ_showHeroWrap{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 28px;
  align-items: center;
}

.halanZ_listHeroCard,
.halanZ_showHeroCard{
  position: relative;
  padding: 16px;
}

.halanZ_listHeroCard img,
.halanZ_showHeroCard img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  border-radius: 22px;
}

.halanZ_listHeroFloat,
.halanZ_showHeroFloat{
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(6,77,91,.86);
  color: #F2FFF3;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(236,252,3,.28);
}

/* ========== List Layout ========== */
.halanZ_listContentWrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.halanZ_listGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.halanZ_listCard{
  padding: 14px;
}

.halanZ_listThumb{
  display: block;
  text-decoration: none;
}

.halanZ_listThumb img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

.halanZ_listCardBody{
  padding: 16px 8px 8px;
}

.halanZ_listCardMain h3{
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.45;
  font-weight: 900;
}

.halanZ_listCardMain h3 a{
  color: #F2FFF3;
  text-decoration: none;
}

.halanZ_listCardMain p{
  margin: 0;
  color: rgba(232,255,240,.82);
  font-size: 15px;
  line-height: 1.9;
}

.halanZ_listCardMeta{
  margin-top: 14px;
}

.halanZ_listCardMeta time{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(198,251,198,.80);
  font-size: 13px;
  font-weight: 800;
}

/* ========== Sidebar ========== */
.halanZ_listSidebar,
.halanZ_showSidebar{
  display: grid;
  gap: 20px;
}

.halanZ_sideCard{
  padding: 22px;
}

.halanZ_sideTitle{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #ECFC03;
  font-size: 20px;
  font-weight: 900;
}

.halanZ_sidebarSearch{
  display: flex;
  align-items: center;
  gap: 10px;
}

.halanZ_sidebarSearchField{
  position: relative;
  flex: 1;
}

.halanZ_sidebarSearchField input{
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(236,252,3,.22);
  background: linear-gradient(145deg, rgba(62,80,82,.96), rgba(47,61,63,.96));
  color: #F2FFF3;
  outline: none;
  font-size: 14px;
  font-weight: 700;
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,.18),
    inset -3px -3px 8px rgba(255,255,255,.03);
}

.halanZ_sidebarSearchField input::placeholder{
  color: rgba(232,255,240,.54);
}

.halanZ_sidebarSearchField input:focus{
  border-color: rgba(236,252,3,.46);
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,.18),
    inset -3px -3px 8px rgba(255,255,255,.03),
    0 0 0 3px rgba(236,252,3,.10);
}

.halanZ_sidebarSearchField label{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.halanZ_sidebarSearch button{
  width: 44px;
  height: 44px;
  border: 1px solid rgba(236,252,3,.38);
  border-radius: 14px;
  background: linear-gradient(135deg, #ED0707 0%, #980505 100%);
  color: #fff;
  cursor: pointer;
  transition: all .28s ease;
}

.halanZ_sidebarSearch button:hover{
  transform: scale(.95);
}

.halanZ_hotList{
  display: grid;
  gap: 16px;
}

.halanZ_hotItem{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(198,251,198,.04);
  border: 1px solid rgba(236,252,3,.12);
}

.halanZ_hotThumb img{
  width: 92px;
  height: 92px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.halanZ_hotBody h4{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 900;
}

.halanZ_hotBody h4 a{
  color: #F2FFF3;
  text-decoration: none;
}

.halanZ_hotBody p{
  margin: 0 0 8px;
  color: rgba(232,255,240,.78);
  font-size: 13px;
  line-height: 1.8;
}

.halanZ_hotBody time{
  color: rgba(198,251,198,.72);
  font-size: 12px;
  font-weight: 800;
}

.halanZ_sideNav{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.halanZ_sideNav li a{
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(198,251,198,.05);
  border: 1px solid rgba(236,252,3,.14);
  color: #C6FBC6;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: all .28s ease;
}

.halanZ_sideNav li a:hover{
  color: #fff;
  transform: scale(.98);
  box-shadow: 0 0 14px rgba(198,251,198,.12);
}

/* ========== Show Layout ========== */
.halanZ_showContentWrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.halanZ_showArticle{
  padding: 28px;
}

.halanZ_showArticleTitle{
  margin: 0 0 18px;
  color: #F2FFF3;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.35;
  font-weight: 900;
}

.halanZ_showMeta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.halanZ_showMeta span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(198,251,198,.05);
  border: 1px solid rgba(236,252,3,.14);
  color: rgba(232,255,240,.82);
  font-size: 13px;
  font-weight: 800;
}

.halanZ_showArticleBody{
  color: rgba(232,255,240,.88);
  font-size: 16px;
  line-height: 2;
  word-break: break-word;
}

.halanZ_showArticleBody img{
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.halanZ_showArticleBody a{
  color: #ECFC03;
}

.halanZ_showArticleBody h2,
.halanZ_showArticleBody h3,
.halanZ_showArticleBody h4{
  color: #F2FFF3;
  line-height: 1.45;
}

.halanZ_showPager{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px;
}

.halanZ_showPagerLink{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(198,251,198,.05);
  border: 1px solid rgba(236,252,3,.14);
  color: #F2FFF3;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: all .28s ease;
}

.halanZ_showPagerLink:hover{
  transform: scale(.98);
  box-shadow: 0 0 16px rgba(236,252,3,.10);
}

.halanZ_showShare{
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(236,252,3,.12);
}

.halanZ_showShareHead h2{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #F2FFF3;
  font-size: 22px;
  font-weight: 900;
}

.halanZ_showShareHead p{
  margin: 0 0 16px;
  color: rgba(232,255,240,.76);
  font-size: 14px;
  line-height: 1.8;
}

.halanZ_showShareActions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.halanZ_shareBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(236,252,3,.16);
  background: rgba(198,251,198,.05);
  color: #C6FBC6;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all .28s ease;
}

.halanZ_shareBtn:hover{
  color: #fff;
  transform: scale(.98);
}

.halanZ_showLower{
  grid-column: 1 / 2;
}

.halanZ_recommendWrap{
  margin-top: 24px;
  padding: 22px;
}

.halanZ_recommendList{
  display: grid;
  gap: 16px;
}

.halanZ_recommendItem{
  display: grid;
  grid-template-columns: 42px 92px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(198,251,198,.04);
  border: 1px solid rgba(236,252,3,.12);
}

.halanZ_recommendIndex{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(236,252,3,.08);
  color: #ECFC03;
  font-size: 16px;
  font-weight: 900;
}

.halanZ_recommendThumb img{
  width: 92px;
  height: 72px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.halanZ_recommendBody h4{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 900;
}

.halanZ_recommendBody h4 a{
  color: #F2FFF3;
  text-decoration: none;
}

.halanZ_recommendBody small{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(198,251,198,.74);
  font-size: 12px;
  font-weight: 800;
}

/* ========== Responsive List / Show ========== */
@media (max-width: 1100px){
  .halanZ_listHeroWrap,
  .halanZ_showHeroWrap,
  .halanZ_listContentWrap,
  .halanZ_showContentWrap{
    grid-template-columns: 1fr;
  }

  .halanZ_listSidebar,
  .halanZ_showSidebar{
    order: 2;
  }

  .halanZ_showLower{
    grid-column: auto;
  }
}

@media (max-width: 768px){
  .halanZ_listGrid{
    grid-template-columns: 1fr;
  }

  .halanZ_listHeroCard img,
  .halanZ_showHeroCard img{
    height: 260px;
  }

  .halanZ_showArticle{
    padding: 20px;
  }

  .halanZ_showPager{
    grid-template-columns: 1fr;
  }

  .halanZ_recommendItem,
  .halanZ_hotItem{
    grid-template-columns: 1fr;
  }

  .halanZ_recommendThumb img,
  .halanZ_hotThumb img{
    width: 100%;
    height: 180px;
  }
}