:root{
  --styleZ_bg_main: #D30DC2;
  --styleZ_card_bg: #E9D607;
  --styleZ_border: #EB0F30;
  --styleZ_button: #141414;
  --styleZ_nav_text: #F4F6F4;
  --styleZ_text_dark: #161616;
  --styleZ_text_light: #ffffff;
  --styleZ_shadow: 0 18px 48px rgba(38, 10, 48, .22);
  --styleZ_radius: 22px;
}

body{
  margin: 0;
  color: var(--styleZ_text_dark);
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.22) 0%, transparent 18%),
    radial-gradient(circle at 88% 10%, rgba(233,214,7,.22) 0%, transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(235,15,48,.18) 0%, transparent 22%),
    linear-gradient(135deg, #6a0dad 0%, #a30fc6 26%, #d30dc2 56%, #ff44d0 100%);
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
}

.styleZ_header{
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 14px 0;
  backdrop-filter: blur(14px);
  background: rgba(88, 7, 106, .26);
  border-bottom: 1px solid rgba(244, 246, 244, .14);
}

.styleZ_headerShell{
  width: min(1360px, calc(100% - 28px));
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: var(--styleZ_shadow);
  border: 1px solid rgba(244,246,244,.16);
}

.styleZ_headerTop{
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 18px;
}

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

.styleZ_headerLogo a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 8px;
  text-decoration: none;
}

.styleZ_headerLogo img{
  display: block;
  max-width: 100%;
  height: auto;
}

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

.styleZ_headerNavPc{
  display: flex;
  justify-content: center;
}

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

.styleZ_navItem a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--styleZ_nav_text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(244,246,244,.06);
  border: 1px solid rgba(244,246,244,.16);
  transition: all .3s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.styleZ_navItem a:hover,
.styleZ_navItem a:focus{
  color: #141414;
  background: linear-gradient(135deg, #F4F6F4 0%, #ffffff 100%);
  border-color: var(--styleZ_border);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(235,15,48,.22);
}

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

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

.styleZ_headerSearchForm{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(244,246,244,.10);
  border: 1px solid rgba(244,246,244,.16);
}

.styleZ_headerSearchField{
  position: relative;
}

.styleZ_headerSearchInput{
  width: 8em;
  min-width: 8em;
  max-width: 8em;
  height: 40px;
  border: none;
  outline: none;
  border-radius: 999px;
  background: rgba(244,246,244,.96);
  color: #141414;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
}

.styleZ_headerSearchInput::placeholder{
  color: #666;
}

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

.styleZ_headerSearchBtn{
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #141414 0%, #2d2d2d 100%);
  color: #F4F6F4;
  cursor: pointer;
  transition: all .3s ease;
}

.styleZ_headerSearchBtn:hover{
  background: linear-gradient(135deg, #EB0F30 0%, #141414 100%);
  transform: translateY(-2px);
}

.styleZ_headerToggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(244,246,244,.18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20,20,20,.95) 0%, rgba(45,45,45,.95) 100%);
  color: #F4F6F4;
  cursor: pointer;
  transition: all .3s ease;
}

.styleZ_headerToggle:hover{
  border-color: var(--styleZ_border);
  transform: translateY(-2px);
}

.styleZ_headerToggleIcon{
  font-size: 22px;
  line-height: 1;
  display: inline-block;
}

.styleZ_headerMobilePanel{
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(244,246,244,.12);
}

.styleZ_navListMobile{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.styleZ_navListMobile .styleZ_navItem a{
  width: 100%;
  justify-content: flex-start;
  padding: 0 16px;
  border-radius: 14px;
}

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

@media (max-width: 992px){
  .styleZ_headerTop{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .styleZ_headerMain{
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .styleZ_headerNavPc{
    display: none;
  }

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

  .styleZ_headerSearchForm{
    display: none;
  }
}

@media (min-width: 993px){
  .styleZ_headerMobilePanel{
    display: none !important;
  }
}

@media (max-width: 640px){
  .styleZ_headerShell{
    padding: 12px 14px;
    border-radius: 20px;
  }

  .styleZ_headerLogo{
    justify-content: center;
  }

  .styleZ_headerMain{
    grid-template-columns: 1fr auto;
  }
}
/* ========== Shared Layout ========== */
.styleZ_container{
  width: min(1360px, calc(100% - 28px));
  margin: 0 auto;
}

.styleZ_section{
  padding: 34px 0;
}

.styleZ_sectionHead{
  margin-bottom: 22px;
}

.styleZ_eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(244,246,244,.12);
  border: 1px solid rgba(244,246,244,.18);
  color: #F4F6F4;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.styleZ_sectionTitle{
  margin: 14px 0 12px;
  color: #F4F6F4;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.18;
  font-weight: 900;
}

.styleZ_sectionText{
  margin: 0;
  color: rgba(244,246,244,.92);
  font-size: 16px;
  line-height: 1.9;
}

.styleZ_gradientCard{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(233,214,7,.96) 0%, rgba(255,241,87,.94) 100%);
  border: 2px solid #EB0F30;
  box-shadow: 0 18px 44px rgba(44, 8, 53, .20);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.styleZ_gradientCard:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 54px rgba(44, 8, 53, .26);
}

.styleZ_btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  transition: all .3s ease;
}

.styleZ_btnPrimary{
  background: linear-gradient(135deg, #141414 0%, #2d2d2d 100%);
  color: #F4F6F4;
  border: 1px solid rgba(255,255,255,.06);
}

.styleZ_btnPrimary:hover{
  background: linear-gradient(135deg, #EB0F30 0%, #141414 100%);
  transform: translateY(-2px);
}

.styleZ_btnGhost{
  background: rgba(244,246,244,.10);
  color: #F4F6F4;
  border: 1px solid rgba(244,246,244,.18);
}

.styleZ_btnGhost:hover{
  border-color: #EB0F30;
  transform: translateY(-2px);
}

/* ========== Footer ========== */
.styleZ_footer{
  padding: 30px 0 36px;
}

.styleZ_footerShell{
  width: min(1360px, calc(100% - 28px));
  margin: 0 auto;
  padding: 26px;
  border-radius: 30px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(244,246,244,.14);
  box-shadow: 0 18px 44px rgba(32, 8, 40, .18);
}

.styleZ_footerTop{
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 22px;
}

.styleZ_footerBrand,
.styleZ_footerLinks,
.styleZ_footerContact{
  padding: 24px;
}

.styleZ_footerBrandTitle,
.styleZ_footerBlockTitle{
  margin: 14px 0 12px;
  color: #141414;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 900;
}

.styleZ_footerBrandDesc{
  margin: 0;
  color: rgba(20,20,20,.86);
  line-height: 1.9;
  font-size: 15px;
}

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

.styleZ_footerNavList li a{
  color: #141414;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}

.styleZ_footerNavList li a:hover{
  color: #EB0F30;
}

.styleZ_footerContact{
  display: grid;
  gap: 14px;
}

.styleZ_footerContactItem{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #141414;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}

.styleZ_footerContactItem i{
  width: 18px;
  margin-top: 4px;
  color: #EB0F30;
  font-size: 16px;
}

.styleZ_footerContactItem a,
.styleZ_footerContactItem em{
  color: #141414;
  text-decoration: none;
  font-style: normal;
}

.styleZ_footerBottom{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(244,246,244,.14);
  text-align: center;
}

.styleZ_footerBottom span{
  color: rgba(244,246,244,.86);
  font-size: 14px;
  line-height: 1.7;
}

.styleZ_footerBottom a{
  color: #F4F6F4;
  text-decoration: none;
}

.styleZ_backTop{
  position: fixed;
  right: 20px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #141414 0%, #EB0F30 100%);
  color: #F4F6F4;
  box-shadow: 0 16px 34px rgba(18,18,18,.24);
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all .3s ease;
}

.styleZ_backTop.is-show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.styleZ_backTop:hover{
  transform: translateY(-4px);
}

/* ========== Home Banner ========== */
.styleZ_homeBanner{
  padding-top: 42px;
}

.styleZ_bannerGrid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}

.styleZ_bannerTitle{
  margin: 16px 0;
  color: #F4F6F4;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  font-weight: 900;
}

.styleZ_bannerDesc{
  margin: 0;
  color: rgba(244,246,244,.92);
  font-size: 17px;
  line-height: 1.9;
}

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

.styleZ_quadrantBoard{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 18px;
  min-height: 460px;
}

.styleZ_quadItem{
  min-height: 180px;
  border-radius: 22px;
  background: rgba(20,20,20,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 18px;
}

.styleZ_quadItem i{
  font-size: 40px;
  color: #141414;
}

.styleZ_quadItem p{
  margin: 0;
  color: #141414;
  font-size: 18px;
  font-weight: 900;
}

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

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

.styleZ_aboutImageWrap{
  padding: 14px;
}

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

/* ========== Generic 4 Grid ========== */
.styleZ_fourGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.styleZ_statCard,
.styleZ_infoCard,
.styleZ_metricCard{
  padding: 26px;
}

.styleZ_statCard i,
.styleZ_infoCard i,
.styleZ_metricCard i{
  font-size: 30px;
  color: #141414;
  margin-bottom: 14px;
}

.styleZ_statCard strong,
.styleZ_metricCard strong{
  display: block;
  margin-bottom: 10px;
  color: #141414;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1;
  font-weight: 900;
}

.styleZ_statCard h3,
.styleZ_infoCard h3,
.styleZ_metricCard h3{
  margin: 0 0 12px;
  color: #141414;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 900;
}

.styleZ_statCard p,
.styleZ_infoCard p,
.styleZ_metricCard p{
  margin: 0;
  color: rgba(20,20,20,.82);
  line-height: 1.85;
  font-size: 15px;
}

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

.styleZ_faqCard{
  padding: 20px 22px;
}

.styleZ_faqCard summary{
  cursor: pointer;
  list-style: none;
  color: #141414;
  font-size: 18px;
  font-weight: 900;
}

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

.styleZ_faqCard p{
  margin: 14px 0 0;
  color: rgba(20,20,20,.84);
  line-height: 1.85;
  font-size: 15px;
}

/* ========== Service ========== */
.styleZ_serviceGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.styleZ_serviceCard{
  padding: 14px;
}

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

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

.styleZ_serviceCard p{
  margin: 0;
  color: rgba(20,20,20,.82);
  line-height: 1.85;
  font-size: 15px;
}

/* ========== QA Slider ========== */
.styleZ_qaSlider{
  position: relative;
  min-height: 250px;
}

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

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

.styleZ_qaAvatar{
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(20,20,20,.12);
  color: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.styleZ_qaAvatar i{
  font-size: 28px;
}

.styleZ_qaCard h3{
  margin: 0 0 12px;
  color: #141414;
  font-size: 24px;
  font-weight: 900;
}

.styleZ_qaCard p{
  margin: 0;
  color: rgba(20,20,20,.84);
  line-height: 1.9;
  font-size: 15px;
}

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

.styleZ_sliderDots button{
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: rgba(244,246,244,.34);
  cursor: pointer;
}

.styleZ_sliderDots button.is-active{
  background: #E9D607;
  box-shadow: 0 0 0 3px rgba(233,214,7,.18);
}

/* ========== News ========== */
.styleZ_newsGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.styleZ_newsCard{
  height: 100%;
  padding: 14px;
}

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

.styleZ_newsBody{
  padding: 16px 6px 6px;
}

.styleZ_newsBody h3{
  margin: 0 0 12px;
  line-height: 1.5;
}

.styleZ_newsBody h3 a{
  color: #141414;
  text-decoration: none;
  font-size: 20px;
  font-weight: 900;
}

.styleZ_newsBody p{
  margin: 0 0 12px;
  color: rgba(20,20,20,.82);
  line-height: 1.85;
  font-size: 15px;
}

.styleZ_newsBody time{
  color: rgba(20,20,20,.74);
  font-size: 13px;
  font-weight: 800;
}

/* ========== Contact ========== */
.styleZ_contactGrid{
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 28px;
  align-items: start;
}

.styleZ_contactInfoList{
  margin-top: 22px;
  display: grid;
  gap: 14px;
}

.styleZ_contactInfoItem{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #F4F6F4;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
}

.styleZ_contactInfoItem i{
  width: 18px;
  margin-top: 4px;
  color: #E9D607;
}

.styleZ_contactInfoItem em{
  font-style: normal;
}

.styleZ_contactFormCard{
  padding: 24px;
}

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

.styleZ_formRow{
  display: grid;
  gap: 8px;
}

.styleZ_formRow label{
  color: #141414;
  font-size: 14px;
  font-weight: 900;
}

.styleZ_formRow input,
.styleZ_formRow textarea{
  width: 100%;
  border: 1px solid rgba(20,20,20,.14);
  outline: none;
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  color: #141414;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
}

.styleZ_formRow textarea{
  resize: vertical;
  min-height: 140px;
}

.styleZ_formSubmit{
  width: fit-content;
}

/* ========== Responsive ========== */
@media (max-width: 1100px){
  .styleZ_bannerGrid,
  .styleZ_aboutGrid,
  .styleZ_contactGrid,
  .styleZ_footerTop{
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px){
  .styleZ_fourGrid,
  .styleZ_twoColumnFaq,
  .styleZ_serviceGrid,
  .styleZ_newsGrid,
  .styleZ_footerNavList{
    grid-template-columns: 1fr;
  }

  .styleZ_quadrantBoard{
    min-height: auto;
  }

  .styleZ_bannerTitle{
    font-size: 34px;
  }

  .styleZ_aboutImageWrap img{
    min-height: 280px;
  }

  .styleZ_newsThumb img,
  .styleZ_serviceCard img{
    height: 200px;
  }
}
/* ========== Contact Page ========== */
.styleZ_contactBannerGrid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: center;
}

.styleZ_contactHeroCard{
  padding: 18px;
}

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

.styleZ_contactHeroItem{
  min-height: 180px;
  border-radius: 22px;
  background: rgba(20,20,20,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px;
  text-align: center;
}

.styleZ_contactHeroItem i{
  font-size: 38px;
  color: #141414;
}

.styleZ_contactHeroItem p{
  margin: 0;
  color: #141414;
  font-size: 18px;
  font-weight: 900;
}

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

.styleZ_contactQuickCard{
  padding: 24px;
}

.styleZ_contactQuickCard i{
  font-size: 30px;
  color: #141414;
  margin-bottom: 16px;
}

.styleZ_contactQuickCard small{
  display: block;
  margin-bottom: 10px;
  color: rgba(20,20,20,.78);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .05em;
}

.styleZ_contactQuickCard a,
.styleZ_contactQuickCard span{
  display: block;
  margin-bottom: 12px;
  color: #141414;
  text-decoration: none;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.55;
}

.styleZ_contactQuickCard p{
  margin: 0;
  color: rgba(20,20,20,.84);
  line-height: 1.85;
  font-size: 15px;
}

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

.styleZ_contactAccordionItem{
  padding: 0;
}

.styleZ_contactAccordionTitle{
  margin: 0;
}

.styleZ_contactAccordionBtn{
  width: 100%;
  min-height: 76px;
  border: none;
  background: transparent;
  color: #141414;
  font-size: 20px;
  font-weight: 900;
  text-align: left;
  padding: 0 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
}

.styleZ_contactAccordionBtn i{
  color: #EB0F30;
  font-size: 20px;
}

.styleZ_contactAccordionPanel{
  display: none;
  padding: 0 24px 24px;
}

.styleZ_contactAccordionItem.is-open .styleZ_contactAccordionPanel{
  display: block;
}

.styleZ_contactAccordionInner{
  border-top: 1px solid rgba(20,20,20,.12);
  padding-top: 18px;
}

.styleZ_contactAccordionInner p{
  margin: 0 0 14px;
  color: rgba(20,20,20,.84);
  line-height: 1.9;
  font-size: 15px;
}

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

.styleZ_contactAccordionInner li{
  color: #141414;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.styleZ_contactAccordionInner li i{
  color: #EB0F30;
  margin-top: 4px;
}

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

.styleZ_contactFormPanel{
  padding: 24px;
}

/* ========== App Page ========== */
.styleZ_appHeroGrid{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 28px;
  align-items: center;
}

.styleZ_appHeroStats{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.styleZ_appHeroStat{
  min-width: 130px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(244,246,244,.10);
  border: 1px solid rgba(244,246,244,.16);
}

.styleZ_appHeroStat h3{
  margin: 0 0 6px;
  color: #F4F6F4;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.styleZ_appHeroStat small{
  color: rgba(244,246,244,.88);
  font-size: 13px;
  font-weight: 800;
}

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

.styleZ_appPhoneCard{
  padding: 18px;
}

.styleZ_appPhoneFrame{
  max-width: 380px;
  margin: 0 auto;
  border-radius: 30px;
  background: rgba(20,20,20,.92);
  padding: 18px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
}

.styleZ_appPhoneTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #F4F6F4;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 14px;
}

.styleZ_appPhoneTop span{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(233,214,7,.12);
  color: #E9D607;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.styleZ_appPhoneBottom{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.styleZ_appPhoneBottom span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(244,246,244,.08);
  color: #F4F6F4;
  font-size: 13px;
  font-weight: 800;
}

.styleZ_appIntroGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

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

.styleZ_appFeatureTags span{
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(244,246,244,.10);
  border: 1px solid rgba(244,246,244,.16);
  color: #F4F6F4;
  font-size: 14px;
  font-weight: 800;
}

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

.styleZ_featureMiniCard{
  padding: 24px;
}

.styleZ_featureMiniCard h3{
  margin: 0 0 12px;
  color: #141414;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.45;
}

.styleZ_featureMiniCard h3 span{
  display: inline-flex;
  width: 46px;
  height: 46px;
  margin-right: 10px;
  border-radius: 14px;
  background: rgba(20,20,20,.10);
  align-items: center;
  justify-content: center;
}

.styleZ_featureMiniCard p{
  margin: 0;
  color: rgba(20,20,20,.84);
  line-height: 1.85;
  font-size: 15px;
}

.styleZ_compareCard{
  padding: 20px;
}

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

.styleZ_compareRow{
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(20,20,20,.08);
}

.styleZ_compareHead{
  background: rgba(20,20,20,.14);
}

.styleZ_compareRow span{
  color: #141414;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}

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

.styleZ_timelineYear{
  color: #F4F6F4;
  font-size: 22px;
  font-weight: 900;
  padding: 6px 2px;
}

.styleZ_timelineCard{
  padding: 24px;
}

.styleZ_timelineCard h3{
  margin: 0 0 10px;
  color: #141414;
  font-size: 26px;
  font-weight: 900;
}

.styleZ_timelineDate{
  margin: 0 0 14px;
  color: rgba(20,20,20,.76);
  font-size: 14px;
  font-weight: 800;
}

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

.styleZ_timelineCard li{
  color: rgba(20,20,20,.84);
  line-height: 1.9;
  font-size: 15px;
  margin-bottom: 8px;
}

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

.styleZ_installCard{
  padding: 24px;
}

.styleZ_installCard h3{
  margin: 0 0 18px;
  color: #141414;
  font-size: 26px;
  font-weight: 900;
}

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

.styleZ_installStep{
  position: relative;
  padding: 18px 18px 18px 84px;
  border-radius: 18px;
  background: rgba(20,20,20,.08);
}

.styleZ_installStep span{
  position: absolute;
  left: 18px;
  top: 18px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #141414;
  color: #F4F6F4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
}

.styleZ_installStep h4{
  margin: 0 0 8px;
  color: #141414;
  font-size: 19px;
  font-weight: 900;
}

.styleZ_installStep p{
  margin: 0;
  color: rgba(20,20,20,.82);
  line-height: 1.8;
  font-size: 15px;
}

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

.styleZ_sixFeatureGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 16px 0 18px;
}

.styleZ_trustCard{
  padding: 24px;
}

.styleZ_trustCard span{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(20,20,20,.10);
  color: #141414;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.styleZ_trustCard span i{
  font-size: 24px;
}

.styleZ_trustCard h5{
  margin: 0 0 10px;
  color: #141414;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
}

.styleZ_trustCard p{
  margin: 0;
  color: rgba(20,20,20,.82);
  line-height: 1.85;
  font-size: 15px;
}

.styleZ_inviteGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.styleZ_inviteCard,
.styleZ_ctaCard{
  padding: 28px;
}

.styleZ_inviteSub{
  margin: 18px 0 10px;
  color: rgba(20,20,20,.78);
  font-size: 14px;
  font-weight: 800;
}

.styleZ_inviteCode{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  background: rgba(20,20,20,.10);
  color: #141414;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .08em;
  margin-bottom: 18px;
}

.styleZ_ctaBadge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(20,20,20,.10);
  color: #141414;
  font-size: 13px;
  font-weight: 900;
}

.styleZ_ctaActions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

/* ========== Responsive Extra ========== */
@media (max-width: 1100px){
  .styleZ_contactBannerGrid,
  .styleZ_contactFormLayout,
  .styleZ_appHeroGrid,
  .styleZ_appIntroGrid,
  .styleZ_inviteGrid{
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 768px){
  .styleZ_contactHeroGrid,
  .styleZ_contactQuickGrid,
  .styleZ_threeFeatureGrid,
  .styleZ_sixFeatureGrid{
    grid-template-columns: 1fr;
  }

  .styleZ_compareRow{
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }

  .styleZ_appPhoneImage img{
    height: 320px;
  }
}
/* ========== Shared Breadcrumb / Sidebar Layout ========== */
.styleZ_breadcrumb{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #F4F6F4;
  font-size: 14px;
  font-weight: 800;
}

.styleZ_breadcrumb a,
.styleZ_breadcrumb span{
  color: #F4F6F4;
  text-decoration: none;
  line-height: 1.7;
}

.styleZ_breadcrumb small{
  color: rgba(244,246,244,.74);
  font-size: 12px;
}

.styleZ_sidebarLayout{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 360px;
  gap: 24px;
  align-items: start;
}

.styleZ_sidebarLayoutShow{
  grid-template-columns: minmax(0, 1.45fr) 340px;
}

.styleZ_sidebarCard{
  padding: 22px;
}

.styleZ_sidebarTitle{
  margin: 0 0 16px;
  color: #141414;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.4;
}

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

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

.styleZ_sidebarSearchField input{
  width: 100%;
  height: 48px;
  border: 1px solid rgba(20,20,20,.14);
  outline: none;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #141414;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
}

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

.styleZ_sidebarSearchForm button{
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #141414 0%, #2e2e2e 100%);
  color: #F4F6F4;
  cursor: pointer;
  transition: all .3s ease;
}

.styleZ_sidebarSearchForm button:hover{
  background: linear-gradient(135deg, #EB0F30 0%, #141414 100%);
  transform: translateY(-2px);
}

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

.styleZ_sidebarNavList li a{
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(20,20,20,.08);
  color: #141414;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  transition: all .3s ease;
}

.styleZ_sidebarNavList li a:hover{
  background: #141414;
  color: #F4F6F4;
  transform: translateX(4px);
}

.styleZ_hotArticle{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(20,20,20,.12);
}

.styleZ_hotArticle:last-child{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.styleZ_hotArticleThumb img{
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.styleZ_hotArticleBody h4{
  margin: 0 0 8px;
  line-height: 1.5;
}

.styleZ_hotArticleBody h4 a{
  color: #141414;
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
}

.styleZ_hotArticleBody p{
  margin: 0 0 8px;
  color: rgba(20,20,20,.80);
  font-size: 14px;
  line-height: 1.75;
}

.styleZ_hotArticleBody time{
  color: rgba(20,20,20,.72);
  font-size: 12px;
  font-weight: 800;
}

/* ========== List Page ========== */
.styleZ_listBannerGrid{
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 28px;
  align-items: center;
}

.styleZ_listBannerCard{
  padding: 16px;
}

.styleZ_listBannerVisualInner{
  position: relative;
}

.styleZ_listBannerIcon{
  position: absolute;
  top: 16px;
  left: 16px;
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: rgba(20,20,20,.82);
  color: #F4F6F4;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 12px 30px rgba(20,20,20,.20);
}

.styleZ_listBannerIcon i{
  font-size: 28px;
}

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

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

.styleZ_listArticleCard{
  height: 100%;
  padding: 14px;
}

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

.styleZ_listArticleBody{
  padding: 16px 6px 6px;
}

.styleZ_listArticleText h3{
  margin: 0 0 12px;
  line-height: 1.5;
}

.styleZ_listArticleText h3 a{
  color: #141414;
  text-decoration: none;
  font-size: 21px;
  font-weight: 900;
}

.styleZ_listArticleText p{
  margin: 0 0 14px;
  color: rgba(20,20,20,.82);
  font-size: 15px;
  line-height: 1.85;
}

.styleZ_listArticleMeta{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.styleZ_listArticleMeta time{
  color: rgba(20,20,20,.74);
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ========== Show Page ========== */
.styleZ_showBannerGrid{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 28px;
  align-items: center;
}

.styleZ_showBannerCard{
  padding: 16px;
}

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

.styleZ_showArticleCard{
  padding: 28px;
}

.styleZ_showArticleHead{
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(20,20,20,.12);
}

.styleZ_showArticleTitle{
  margin: 0 0 16px;
  color: #141414;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.25;
  font-weight: 900;
}

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

.styleZ_showMeta span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(20,20,20,.08);
  color: #141414;
  font-size: 13px;
  font-weight: 800;
}

.styleZ_showContent{
  color: rgba(20,20,20,.90);
  font-size: 16px;
  line-height: 2;
  word-break: break-word;
}

.styleZ_showContent img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
  border-radius: 16px;
}

.styleZ_showContent h2,
.styleZ_showContent h3,
.styleZ_showContent h4{
  color: #141414;
  line-height: 1.45;
  margin: 1.4em 0 .8em;
}

.styleZ_showContent p{
  margin: 0 0 1.1em;
}

.styleZ_showContent ul,
.styleZ_showContent ol{
  margin: 0 0 1.2em 1.4em;
}

.styleZ_showPrevNext{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

.styleZ_showPrevNext a{
  min-height: 68px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(20,20,20,.08);
  color: #141414;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all .3s ease;
}

.styleZ_showPrevNext a:hover{
  background: #141414;
  color: #F4F6F4;
}

.styleZ_showShare{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(20,20,20,.08);
}

.styleZ_showShareText h6{
  margin: 0 0 8px;
  color: #141414;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
}

.styleZ_showShareText p{
  margin: 0;
  color: rgba(20,20,20,.80);
  font-size: 14px;
  line-height: 1.8;
}

.styleZ_showShareActions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.styleZ_shareBtn{
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: #141414;
  color: #F4F6F4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all .3s ease;
}

.styleZ_shareBtn:hover{
  background: #EB0F30;
  transform: translateY(-2px);
}

.styleZ_showRecommend{
  margin-top: 24px;
}

.styleZ_recommendHead{
  margin-bottom: 14px;
}

.styleZ_recommendHead h3{
  margin: 0;
  color: #F4F6F4;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.styleZ_recommendItem{
  display: grid;
  grid-template-columns: 64px 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.styleZ_recommendIndex{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(20,20,20,.12);
  color: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
}

.styleZ_recommendThumb img{
  width: 110px;
  height: 86px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.styleZ_recommendBody h4{
  margin: 0 0 8px;
  line-height: 1.5;
}

.styleZ_recommendBody h4 a{
  color: #141414;
  text-decoration: none;
  font-size: 18px;
  font-weight: 900;
}

.styleZ_recommendBody small{
  color: rgba(20,20,20,.74);
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ========== Responsive List / Show ========== */
@media (max-width: 1100px){
  .styleZ_sidebarLayout,
  .styleZ_sidebarLayoutShow,
  .styleZ_listBannerGrid,
  .styleZ_showBannerGrid{
    grid-template-columns: 1fr;
  }
}

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

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

  .styleZ_showShare{
    flex-direction: column;
    align-items: flex-start;
  }

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

  .styleZ_recommendThumb img{
    width: 100%;
    height: 200px;
  }

  .styleZ_showBannerImageWrap img,
  .styleZ_listBannerVisualInner img{
    height: 260px;
  }
}