/*
  Zonetech Networks - Theme v5 (2025)
  Modern CSS: custom properties, clamp(), logical properties, :is(), :where()
  Colors inherited from hosting.css :root tokens
  Font: Inter (with system fallback stack)
*/

/* ========== Google Font ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ========== Base Overrides ========== */
.PageHead { margin-top: var(--zt-space-2xl); }
.footerlinks ul li a h2 {
  margin: 0; padding: 0;
  font-weight: 500;
  font-size: var(--zt-text-sm);
  line-height: 1.5;
}

/* ========== Buttons (Extended) ========== */
.DomainSubmitBtn {
  display: inline-block;
  padding: 14px 32px;
  border: none;
  background: var(--zt-red);
  color: var(--zt-white);
  font-size: var(--zt-text-lg);
  font-weight: 700;
  border-radius: var(--zt-radius);
  cursor: pointer;
  transition: var(--zt-transition);
}
.DomainSubmitBtn:hover {
  background: var(--zt-red-hover);
  transform: translateY(-1px);
  box-shadow: var(--zt-shadow-red);
}

/* ========== Hero / Full Top ========== */
.wrapperFullTop {
  margin-top: 0;
  background: linear-gradient(135deg, var(--zt-navy) 0%, var(--zt-navy-light) 100%);
}
@media (max-width: 767px) { .wrapperFullTop { border-bottom: 3px solid var(--zt-blue); } }

.FullTopInfo { padding: var(--zt-space-4xl) var(--zt-space-2xl); text-align: center; }
.FullTopInfo p { font-size: var(--zt-text-lg); color: var(--zt-gray-300); margin-bottom: var(--zt-space-lg); line-height: 1.6; }
.FullTopInfo p strong { color: var(--zt-gray-200); font-weight: 500; }

.FullTopTitle {
  margin-bottom: var(--zt-space-md);
  color: var(--zt-white);
  font-size: var(--zt-text-5xl);
  font-weight: 800;
  line-height: 1.15;
}
.FullTopTitleOver {
  color: var(--zt-blue);
  font-size: var(--zt-text-lg);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.FullTopInfo a {
  display: inline-block;
  padding: 14px 28px;
  margin-top: 10px;
  background: var(--zt-blue);
  color: var(--zt-white);
  border: none;
  border-radius: var(--zt-radius);
  font-weight: 600;
  transition: var(--zt-transition);
}
.FullTopInfo a:hover {
  background: var(--zt-blue-hover);
  color: var(--zt-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--zt-shadow-blue);
}

/* ========== Domain Search ========== */
.wapperDomainTitle { padding: 28px 0; background: var(--zt-navy); }
.DomainTitle { color: var(--zt-white); font-size: var(--zt-text-3xl); font-weight: 700; text-align: center; margin: 0; }
.DomainPromo { color: var(--zt-red); font-size: var(--zt-text-lg); font-weight: 600; text-align: center; margin: var(--zt-space-sm) 0 0; }
.wrapperDomainForm { padding: 35px 0; background: var(--zt-red); }
.wrapperDomainForm select,
.wrapperDomainForm input[type=text] {
  padding: 12px 16px;
  height: 52px;
  border-radius: var(--zt-radius);
  border: none;
  font-size: var(--zt-text-lg);
}
.DomainFormSubmit { margin-top: 20px; text-align: center; }

/* ========== Testimonial Bar ========== */
.wrapperTestimonialTitle { padding: 22px 0; background: var(--zt-red); }
.TestimonialTitle { color: var(--zt-white); font-size: var(--zt-text-2xl); font-weight: 700; text-align: center; line-height: 1.3; margin: 0; }
.TestimonialTitle span { color: var(--zt-navy); }

/* ========== Text Promo ========== */
.wrapperTextPromo { background: var(--zt-white); margin-top: 0; }
.TextPromoTitle { margin-bottom: var(--zt-space-md); color: var(--zt-navy); font-size: var(--zt-text-4xl); font-weight: 800; line-height: 1.2; }
.TextPromoTitle span { color: var(--zt-red); }
.TextPromoText { margin-bottom: var(--zt-space-lg); }
.TextPromoSquare {
  float: left;
  margin: 15px 0;
  padding: var(--zt-space-md) 20px;
  border: 2px solid var(--zt-red);
  color: var(--zt-red);
  font-size: var(--zt-text-2xl);
  font-weight: 700;
  border-radius: var(--zt-radius);
}
@media (max-width: 767px) {
  .TextPromoTitle, .TextPromoText { text-align: center; }
  .TextPromoSquare { float: none; text-align: center; }
}

/* ========== Plan Cards (WHC pricing style) ========== */
.PlanBox {
  margin: var(--zt-space-4xl) 0 var(--zt-space-2xl);
  transition: var(--zt-transition);
  border-radius: var(--zt-radius-xl);
  overflow: hidden;
  box-shadow: var(--zt-shadow-sm);
  border: 1px solid var(--zt-gray-200);
  background: var(--zt-white);
}
.PlanBox:hover { box-shadow: var(--zt-shadow-lg); transform: translateY(-4px); }
.PlanBox .PlanName { background: var(--zt-navy); padding: var(--zt-space-2xl) 20px 20px; text-align: center; }
.PlanBox .Price {
  background: var(--zt-red);
  color: var(--zt-white);
  font-size: var(--zt-text-2xl);
  font-weight: 700;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: -60px auto 12px;
}
.PlanBox .PlanName h3 { color: var(--zt-white); text-align: center; padding: 0; margin: 0; text-transform: uppercase; font-size: var(--zt-text-lg); letter-spacing: 0.5px; }
.PlanBox .PlanName p { color: var(--zt-gray-400); text-align: center; font-size: var(--zt-text-sm); margin: 4px 0 0; }
.PlanOrange { background: var(--zt-red); padding: 10px 15px; text-align: center; color: var(--zt-white); font-size: var(--zt-text-sm); }
.PlanOrange span { font-size: var(--zt-text-lg); font-weight: 700; }
.PlanBox .PlanFeatures { background: var(--zt-gray-50); text-align: center; padding: var(--zt-space-md) 20px; }
.PlanBox .PlanFeatures ul { margin: 0; padding: 0; list-style: none; }
.PlanBox .PlanFeatures ul li { padding: 10px 0; font-size: var(--zt-text-sm); color: var(--zt-gray-600); border-bottom: 1px solid var(--zt-gray-200); }
.PlanBox .PlanFeatures ul li:last-child { border-bottom: none; }
.PlanBox p { margin: 0; }
.PlanBox .btn { width: 100%; border-radius: 0 0 var(--zt-radius-xl) var(--zt-radius-xl); margin: 0; padding: 14px; font-size: var(--zt-text-lg); }

/* ========== Promo Sections (WordPress/Joomla/Prestashop) ========== */
:is(.wrapperWordpress, .wrapperJoomla, .wrapperPrestashop) { background-color: var(--zt-navy); }
:is(.wrapperWordpressInfo, .wrapperJoomlaInfo, .wrapperPrestashopInfo) { min-height: 300px; padding: var(--zt-space-2xl) var(--zt-space-2xl); }
:is(.wrapperWordpressTitle, .wrapperWordpressTitle2, .wrapperJoomlaTitle, .wrapperPrestashopTitle) { color: var(--zt-white); font-size: var(--zt-text-3xl); font-weight: 700; line-height: 1.2; }
:is(.wrapperWordpressTitle, .wrapperJoomlaTitle, .wrapperPrestashopTitle) span { color: var(--zt-red); }
.wrapperWordpressInfo p { color: var(--zt-gray-400); }
:is(.wrapperWordpressInfo, .wrapperWordpressInfo2) a {
  float: left;
  padding: 12px 24px;
  margin: 15px 0 20px;
  border: 2px solid var(--zt-red);
  color: var(--zt-red);
  border-radius: var(--zt-radius);
  font-weight: 600;
  transition: var(--zt-transition);
}
:is(.wrapperWordpressInfo, .wrapperWordpressInfo2) a:hover { background: var(--zt-red); color: var(--zt-white); text-decoration: none; }
@media (min-width: 768px) {
  .wrapperWordpress { background: url(../images/banner-wordpress.jpg) 50% 50% no-repeat; background-size: cover; }
  .wrapperWordpress2 { background: url(../images/banner-wordpress2.jpg) 50% 50% no-repeat; background-size: cover; }
  :is(.wrapperdatacenter, .wrapperdatacenter2, .wrapperdatacenter4, .wrapperdatacenter7) { background-size: cover; }
  .wrapperdatacenter { background: url(../images/hebergeur-web-datacenter2.jpg) 50% 50% no-repeat; background-size: cover; }
  .wrapperdatacenter2 { background: url(../images/hebergeur-web-datacenter3.jpg) 50% 50% no-repeat; background-size: cover; }
}
@media (max-width: 767px) { :is(.wrapperWordpress, .wrapperJoomla, .wrapperPrestashop) { border-bottom: 3px solid var(--zt-red); } }

/* ========== Entreprise Promo ========== */
.EntrepriseTitle { margin: var(--zt-space-xl) 0; color: var(--zt-white); font-size: var(--zt-text-3xl); font-weight: 700; line-height: 1.2; }
.EntrepriseTitle span { color: var(--zt-red); }
.EntreprisePromo {
  float: left; margin: 15px 0; padding: 12px 24px;
  border: 2px solid var(--zt-red); color: var(--zt-red);
  font-weight: 600; border-radius: var(--zt-radius); transition: var(--zt-transition);
}
.EntreprisePromo:hover { background: var(--zt-red); color: var(--zt-white); text-decoration: none; }
@media (min-width: 768px) { .wrapperEntreprise { background: url(../images/banner-entreprise.jpg) 50% 50% no-repeat; background-size: cover; min-height: 400px; background-color: var(--zt-navy); } }
@media (max-width: 767px) { .wrapperEntreprise { min-height: 200px; background-color: var(--zt-navy); } .EntreprisePromo { width: 100%; text-align: center; } }

/* ========== Orange Promo ========== */
.wrapperOrangeTitle { margin-top: 0; padding: 25px 0; background: var(--zt-navy); }
.OrangeTitle { color: var(--zt-white); font-size: var(--zt-text-3xl); font-weight: 700; text-align: center; }
.wrapperOrange { background: var(--zt-red); }
.OrangeText p { color: var(--zt-navy); }

/* ========== Triple Row Cards ========== */
.wrapperTripleRow { background: var(--zt-gray-50); padding: 20px 0; }
.TripleRow {
  margin: var(--zt-space-lg) 0;
  background: var(--zt-white);
  transition: var(--zt-transition);
  border-radius: var(--zt-radius-xl);
  overflow: hidden;
  box-shadow: var(--zt-shadow-xs);
  border: 1px solid var(--zt-gray-200);
}
.TripleRow:hover { box-shadow: var(--zt-shadow-lg); transform: translateY(-4px); }
.TripleRowContent { position: relative; padding: var(--zt-space-2xl) 20px var(--zt-space-lg); text-align: center; }
.TripleRowContent img { position: relative; margin-top: -100px; }
.TripleRowTitle { padding-bottom: 12px; font-size: var(--zt-text-xl); font-weight: 700; }

/* ========== Accordion / FAQ ========== */
.panel { border: none !important; border-radius: var(--zt-radius-lg) !important; margin-bottom: 10px; overflow: hidden; box-shadow: var(--zt-shadow-xs); }
.panel-group .panel-heading + .panel-collapse > .panel-body { border: none; padding: 20px 24px; background: var(--zt-white); color: var(--zt-text-muted); }
.panel-default > .panel-heading {
  padding: 18px 24px;
  background: var(--zt-gray-50);
  border: 1px solid var(--zt-gray-200);
  border-radius: var(--zt-radius-lg);
  transition: background var(--zt-duration) var(--zt-ease);
}
.panel-default > .panel-heading:hover { background: var(--zt-gray-100); }
.active > .panel-heading { color: var(--zt-white); background: var(--zt-navy); border-color: var(--zt-navy); border-radius: var(--zt-radius-lg) var(--zt-radius-lg) 0 0; }
.active > .panel-heading .panel-title a { color: var(--zt-white); }
.panel-title a { font-weight: 600; font-size: var(--zt-text-base); color: var(--zt-navy); text-decoration: none; display: block; }
.panel-title a::after { font-family: 'Glyphicons Halflings'; content: "\e114"; float: right; color: var(--zt-red); }
.panel-title a.collapsed::after { content: "\e080"; }

/* ========== Promo Triple (SSL page) ========== */
.PromoTriple {
  padding: 28px; margin-bottom: 15px;
  background: var(--zt-white); border-radius: var(--zt-radius-xl);
  box-shadow: var(--zt-shadow-sm); border: 1px solid var(--zt-gray-200);
}
.PromoTriple h3 { padding-bottom: 12px; border-bottom: 2px solid var(--zt-red); font-size: var(--zt-text-xl); }
.PromoTriple p { font-size: var(--zt-text-sm); }

/* ========== Progress Bar ========== */
.progress { height: 40px; margin-bottom: 20px; border-radius: var(--zt-radius); background: var(--zt-gray-200); box-shadow: none; overflow: hidden; }
.progress .progress-bar { text-align: left; padding-left: 14px; line-height: 40px; font-size: var(--zt-text-sm); background: var(--zt-red); border-radius: var(--zt-radius); }

/* ========== Tables ========== */
:is(.tableDomain, .tableAntivirus) { margin-top: var(--zt-space-xl); border-collapse: separate; border-spacing: 0; border-radius: var(--zt-radius-xl); overflow: hidden; width: 100%; }
:is(.tableDomain, .tableAntivirus) thead tr th { height: 60px; border-bottom: 3px solid var(--zt-red); background: var(--zt-navy); color: var(--zt-white); text-align: center; font-weight: 600; padding: 15px; }
:is(.tableDomain, .tableAntivirus) tbody tr td { padding: 14px 15px; color: var(--zt-text); border-top: 1px solid var(--zt-gray-200); text-align: center; }
:is(.tableDomain, .tableAntivirus) tbody tr { background: var(--zt-white); }
:is(.tableDomain, .tableAntivirus) tbody tr:nth-child(even) { background: var(--zt-gray-50); }
:is(.tableDomain, .tableAntivirus) tbody tr td:first-child { font-weight: 600; text-align: left; }
.table-hover tbody tr:hover td { background: #fef2f2; }

/* ========== Feature Items ========== */
.featureItem { margin: 12px 0; }
.featureItem h3 { padding: 0; margin: 0; font-size: var(--zt-text-xl); }
.featureItem p { font-size: var(--zt-text-sm); color: var(--zt-text-muted); }
.featureItem img { border-radius: 50%; }

/* ========== Icon Set ========== */
.wrapperIconSet { margin-top: var(--zt-space-2xl); }
.IconSet { margin-bottom: 35px; }
.IconSetTitre { font-size: var(--zt-text-xl); font-weight: 700; }
.IconSetSousTitre { margin-bottom: 12px; color: var(--zt-red); font-size: var(--zt-text-xs); text-transform: uppercase; letter-spacing: 0.5px; }

/* ========== Split Section ========== */
.wrapperSplit { margin-top: 0; background: var(--zt-navy); }
@media (min-width: 768px) { .wrapperSplit { background: url(../images/banner-split.jpg) 50% 50% repeat-y; background-size: cover; } }
.SplitLeft { padding: var(--zt-space-3xl); }
.SplitLeft h2 { color: var(--zt-white); font-size: var(--zt-text-4xl); line-height: 1.15; }
.SplitLeft h2 span { color: var(--zt-red); }
.SplitLeft p { color: var(--zt-gray-400); }
.SplitRight { padding: var(--zt-space-3xl); text-align: right; background: var(--zt-red); }
.SplitRight h2 { color: var(--zt-navy); font-size: var(--zt-text-4xl); line-height: 1.15; }
.SplitRight h2 span { color: var(--zt-white); }
.SplitRight p { color: var(--zt-navy); }

/* ========== Full Width ========== */
.wrapperFullWidth { margin-top: 0; background: var(--zt-navy); }
@media (min-width: 768px) { .wrapperFullWidth { background: url(../images/banner-nomdedomaine.jpg) 50% 50% no-repeat; background-size: cover; } }
.FullWidthInfo { min-height: 280px; padding: var(--zt-space-2xl); text-align: center; }
.FullWidthInfo p { color: var(--zt-white); margin-bottom: var(--zt-space-lg); }
.FullWidthTitle { margin-bottom: var(--zt-space-md); color: var(--zt-white); font-size: var(--zt-text-4xl); font-weight: 700; line-height: 1.15; }
.FullWidthTitleOver { color: var(--zt-red); font-size: var(--zt-text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
.FullWidthInfo a {
  display: inline-block; padding: 12px 28px; margin-top: 10px;
  border: 2px solid var(--zt-red); color: var(--zt-red);
  border-radius: var(--zt-radius); font-weight: 600; transition: var(--zt-transition);
}
.FullWidthInfo a:hover { background: var(--zt-red); color: var(--zt-white); text-decoration: none; }

/* ========== Clients ========== */
.ClientsTitle { margin: var(--zt-space-xl) 0; color: var(--zt-white); font-size: var(--zt-text-3xl); font-weight: 700; }
.ClientsTitle span { color: var(--zt-red); }
.ClientsBox { padding: var(--zt-space-lg); margin: 20px 0; border: 1px solid var(--zt-gray-200); border-radius: var(--zt-radius-xl); background: var(--zt-white); }
.ClientsBoxTitle { font-size: var(--zt-text-2xl); font-weight: 700; }

/* ========== Hosting Carousel ========== */
.wrapperHostingCarousel { margin: var(--zt-space-2xl) 0; }
.hostingCarouselTitreOver { margin-top: 20px; color: var(--zt-red); font-size: var(--zt-text-sm); text-transform: uppercase; letter-spacing: 1px; }
.hostingCarouselTitre { margin-bottom: 10px; font-size: var(--zt-text-2xl); font-weight: 700; }
.hostingCarouselItem a {
  display: inline-block; padding: 14px 28px; margin: 10px 0 20px;
  background: var(--zt-red); color: var(--zt-white);
  font-size: var(--zt-text-lg); font-weight: 700;
  border-radius: var(--zt-radius); transition: var(--zt-transition);
}
.hostingCarouselItem a:hover { background: var(--zt-red-hover); text-decoration: none; }

/* ========== Testimonials ========== */
.wrapperTestimonial { min-height: 500px; background: var(--zt-red); padding: 20px 0; }
.Testimonial { margin: var(--zt-space-4xl) var(--zt-space-xl) var(--zt-space-xl); text-align: center; transition: var(--zt-transition); }
.Testimonial:hover { transform: translateY(-4px); }
.TestimonialTop { padding: var(--zt-space-2xl) 20px 15px; background: var(--zt-navy); text-align: center; border-bottom: 3px solid var(--zt-red); border-radius: var(--zt-radius-xl) var(--zt-radius-xl) 0 0; }
.Testimonial .ClientName { display: block; color: var(--zt-white); font-size: var(--zt-text-2xl); font-weight: 700; }
.Testimonial .ClientWebsite a { font-size: var(--zt-text-sm); color: var(--zt-red); text-decoration: none; }
.Testimonial .ClientQuote { padding: var(--zt-space-lg); background: var(--zt-gray-50); text-align: center; border-radius: 0 0 var(--zt-radius-xl) var(--zt-radius-xl); }
.TestimonialBtn {
  margin-top: 20px; display: inline-block; padding: 14px 32px;
  background: var(--zt-navy); color: var(--zt-white);
  font-size: var(--zt-text-xl); font-weight: 700;
  border-radius: var(--zt-radius); border: none; transition: var(--zt-transition);
}
.TestimonialBtn:hover { background: var(--zt-green); color: var(--zt-white); text-decoration: none; }

/* ========== Installatron ========== */
.installatronTitle { color: var(--zt-navy); text-align: center !important; display: block; padding: 0 0 var(--zt-space-2xl); }
.wrapperInstallatron { width: 100%; float: left; background: var(--zt-gray-50) !important; overflow: hidden; padding: var(--zt-space-2xl) 0; }
aside ul { list-style: none; }
aside ul li::before { content: ""; width: 21px; height: 21px; float: left; background: url(/images/check.svg) no-repeat left center; background-size: 21px auto; }

/* ========== Features Section ========== */
.wrapperFeatures { background: var(--zt-red); margin-top: 0; padding: var(--zt-space-2xl) 0; }
.featureTitle { font-size: var(--zt-text-3xl); font-weight: 700; text-align: center; color: var(--zt-white); }
.featureUnderTitle { font-size: var(--zt-text-base); margin-bottom: var(--zt-space-2xl); color: rgba(255,255,255,0.85); text-align: center; }

/* ========== Désinfection ========== */
.notAvailable { text-decoration: line-through; color: var(--zt-red); }
.available { color: var(--zt-green); }

/* ========== SSL page backgrounds ========== */
@media (min-width: 768px) {
  .wrapperFullTopSsl { background: url(../images/bannertop-ssl.jpg) 50% 50% no-repeat; background-size: cover; }
  .wrapperFullTopWp { background: url(../images/bannertop-wordpress.jpg) 50% 50% no-repeat; background-size: cover; }
  .wrapperFullTopJl { background: url(../images/bannertop-joomla.jpg) 50% 50% no-repeat; background-size: cover; }
  .wrapperFullTopPs { background: url(../images/bannertop-prestashop.jpg) 50% 50% no-repeat; background-size: cover; }
  .wrapperFullTopHebergement { background: url(../images/bannertop-joomla.jpg) 50% 50% no-repeat; background-size: cover; }
  .ShoutcastBackground { background: url(../images/banner-shoutcast.jpg) 50% 50% no-repeat; background-size: cover; }
  .wrapperantispam2 { background: url(../images/antispam.jpg) 50% 50% no-repeat; background-size: cover; }
}

/* ========== Slider ========== */
.wrapperIndexSlider { padding: var(--zt-space-2xl) 0; background: url(../images/header-bg.jpg) no-repeat var(--zt-navy); color: var(--zt-white); background-size: cover; }
.IndexSliderItem { padding: 150px var(--zt-space-2xl); text-align: center; }
.IndexSliderItem h2 { font-size: var(--zt-text-5xl); color: var(--zt-white); }
.IndexSliderItem h3 { margin-bottom: var(--zt-space-lg); font-size: var(--zt-text-2xl); line-height: 1.3; color: var(--zt-gray-300); }
.IndexSliderItem a {
  display: inline-block; padding: 16px 32px;
  border: 2px solid var(--zt-red); color: var(--zt-red);
  font-size: var(--zt-text-xl); font-weight: 700;
  border-radius: var(--zt-radius); transition: var(--zt-transition);
}
.IndexSliderItem a:hover { background: var(--zt-red); color: var(--zt-white); text-decoration: none; }

/* ========== Owl Carousel Controls ========== */
@media (min-width: 992px) {
  .owl-theme .owl-controls .owl-buttons div {
    position: absolute; padding: 12px 18px;
    border: 2px solid var(--zt-red); color: var(--zt-red);
    font-weight: 700; opacity: 1; border-radius: 50%; transition: var(--zt-transition);
  }
  .owl-theme .owl-controls .owl-buttons div:hover { background: var(--zt-red); color: var(--zt-white); }
  .owl-theme .owl-controls .owl-buttons .owl-prev { left: 1%; top: 40%; }
  .owl-theme .owl-controls .owl-buttons .owl-next { right: 1%; top: 40%; }
}

/* ========== Utilities ========== */
.green { color: var(--zt-green); }
.activeMenu { border-bottom: 3px solid var(--zt-red); }

/* ========== Responsive ========== */
@media (max-width: 767px) {
  .FullTopTitle { font-size: var(--zt-text-3xl); }
  .FullTopInfo { padding: var(--zt-space-2xl) var(--zt-space-md); }
  .TextPromoTitle { font-size: var(--zt-text-2xl); }
  .EntrepriseTitle { font-size: var(--zt-text-2xl); }
  .DomainTitle { font-size: var(--zt-text-2xl); }
}

/* ========== Plan Cards (global) ========== */
.plan-card {
  background: var(--zt-white); border: 1px solid var(--zt-gray-200);
  border-radius: var(--zt-radius-xl); padding: 35px 25px 30px;
  text-align: center; position: relative; transition: var(--zt-transition); height: 100%;
}
.plan-card:hover { box-shadow: var(--zt-shadow-lg); transform: translateY(-4px); }
.plan-card.popular { border: 2px solid var(--zt-red); }
.plan-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--zt-red); color: var(--zt-white);
  padding: 4px 20px; border-radius: var(--zt-radius-full);
  font-size: var(--zt-text-sm); font-weight: 700; white-space: nowrap;
}
.plan-card h3 { font-size: var(--zt-text-2xl); color: var(--zt-navy); margin: 10px 0; }
.plan-card .plan-desc { font-size: var(--zt-text-sm); color: var(--zt-text-muted); min-height: 40px; }
.plan-card .plan-price { font-size: var(--zt-text-4xl); font-weight: 800; color: var(--zt-navy); }
.plan-card .plan-price span { font-size: var(--zt-text-sm); font-weight: 500; }
.plan-card .plan-price-label { font-size: var(--zt-text-xs); color: var(--zt-gray-400); margin-top: 12px; }
.plan-card .plan-old-price { font-size: var(--zt-text-sm); color: var(--zt-gray-400); text-decoration: line-through; }
.plan-card .plan-discount { display: inline-block; background: var(--zt-red); color: var(--zt-white); font-size: var(--zt-text-xs); font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 5px; }
.plan-cta {
  display: block; background: var(--zt-navy); color: var(--zt-white);
  padding: 14px; border-radius: var(--zt-radius);
  font-size: var(--zt-text-lg); font-weight: 700;
  text-decoration: none; margin: 20px 0 15px; transition: var(--zt-transition);
}
.plan-cta:hover { background: var(--zt-red); color: var(--zt-white); text-decoration: none; }
.plan-features { list-style: none; padding: 0; margin: 0; text-align: left; }
.plan-features li { padding: 7px 0; font-size: var(--zt-text-sm); color: var(--zt-gray-600); border-bottom: 1px solid var(--zt-gray-100); }
.plan-features li:last-child { border-bottom: none; }
.plan-features li span.pf-icon { margin-right: var(--zt-space-sm); }
.pf-red { color: var(--zt-red); }
.pf-gray { color: var(--zt-text-muted); }

/* ========== WP Cards ========== */
.wp-card {
  background: var(--zt-white); border: 1px solid var(--zt-gray-200);
  border-radius: var(--zt-radius-xl); padding: 35px 25px 30px;
  text-align: center; position: relative; transition: var(--zt-transition); height: 100%;
}
.wp-card:hover { box-shadow: var(--zt-shadow-lg); transform: translateY(-4px); }
.wp-card.popular { border: 2px solid var(--zt-red); }
.wp-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--zt-red); color: var(--zt-white);
  padding: 4px 20px; border-radius: var(--zt-radius-full);
  font-size: var(--zt-text-sm); font-weight: 700; white-space: nowrap;
}
.wp-card h3 { font-size: var(--zt-text-2xl); color: var(--zt-navy); margin: 10px 0; }
.wp-card .wp-desc { font-size: var(--zt-text-sm); color: var(--zt-text-muted); min-height: 45px; }
.wp-card .wp-price { font-size: var(--zt-text-4xl); font-weight: 800; color: var(--zt-navy); }
.wp-card .wp-price span { font-size: var(--zt-text-sm); font-weight: 500; }
.wp-card .wp-old { font-size: var(--zt-text-sm); color: var(--zt-gray-400); text-decoration: line-through; }
.wp-card .wp-discount { display: inline-block; background: var(--zt-red); color: var(--zt-white); font-size: var(--zt-text-xs); font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.wp-cta {
  display: block; background: var(--zt-navy); color: var(--zt-white);
  padding: 14px; border-radius: var(--zt-radius);
  font-size: var(--zt-text-lg); font-weight: 700;
  text-decoration: none; margin: 20px 0 15px; transition: var(--zt-transition);
}
.wp-cta:hover { background: var(--zt-red); color: var(--zt-white); text-decoration: none; }
.wp-features { list-style: none; padding: 0; margin: 0; text-align: left; }
.wp-features li { padding: 7px 0; font-size: var(--zt-text-sm); color: var(--zt-gray-600); border-bottom: 1px solid var(--zt-gray-100); }
.wp-features li:last-child { border-bottom: none; }
.wpf-icon { margin-right: var(--zt-space-sm); }
.wpf-red { color: var(--zt-red); }
.wpf-gray { color: var(--zt-text-muted); }

/* ========== TLD Cards ========== */
.tld-grid { display: flex; flex-wrap: wrap; gap: var(--zt-space-md); justify-content: center; }
.tld-card {
  background: var(--zt-white); border: 1px solid var(--zt-gray-200);
  border-radius: var(--zt-radius-xl); padding: 22px; width: 220px;
  text-align: center; transition: var(--zt-transition); position: relative;
}
.tld-card:hover { box-shadow: var(--zt-shadow-lg); transform: translateY(-4px); }
.tld-ext { font-size: var(--zt-text-2xl); font-weight: 800; color: var(--zt-navy); margin-bottom: 5px; }
.tld-price { font-size: var(--zt-text-2xl); font-weight: 700; color: var(--zt-red); }
.tld-old { font-size: var(--zt-text-sm); color: var(--zt-gray-400); text-decoration: line-through; }
.tld-badge { position: absolute; top: -10px; right: 15px; background: var(--zt-red); color: var(--zt-white); font-size: var(--zt-text-xs); font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.tld-btn {
  display: inline-block; margin-top: 12px; padding: 8px 24px;
  background: var(--zt-navy); color: var(--zt-white);
  border-radius: var(--zt-radius); font-size: var(--zt-text-sm);
  font-weight: 600; text-decoration: none; transition: var(--zt-transition);
}
.tld-btn:hover { background: var(--zt-red); color: var(--zt-white); text-decoration: none; }
.tld-flag { font-size: var(--zt-text-sm); color: var(--zt-text-muted); margin-bottom: var(--zt-space-sm); }

/* ========== Index Hero ========== */
.hero-home { background: linear-gradient(135deg, var(--zt-navy) 0%, var(--zt-navy-light) 100%); padding: 90px 0 70px; color: var(--zt-white); text-align: center; }
.hero-home h1 { font-size: var(--zt-text-5xl); font-weight: 800; color: var(--zt-white); margin-bottom: 20px; line-height: 1.15; }
.hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--zt-space-xl); margin: var(--zt-space-xl) 0; }
.hero-badges .hb { font-size: var(--zt-text-sm); color: var(--zt-gray-400); text-align: center; }
.hero-badges .hb strong { display: block; color: var(--zt-white); font-size: var(--zt-text-sm); font-weight: 600; }
.hero-cta {
  display: inline-block; background: var(--zt-red); color: var(--zt-white);
  padding: 16px 40px; border-radius: var(--zt-radius);
  font-size: var(--zt-text-xl); font-weight: 700;
  text-decoration: none; transition: var(--zt-transition); margin-top: 10px;
}
.hero-cta:hover { background: var(--zt-red-hover); color: var(--zt-white); text-decoration: none; transform: translateY(-2px); box-shadow: var(--zt-shadow-red); }
.hero-sub { color: var(--zt-text-muted); font-size: var(--zt-text-sm); margin-top: 15px; }

/* ========== Service Cards (index) ========== */
.service-cards { padding: var(--zt-space-3xl) 0; background: var(--zt-white); }
.svc-card {
  display: block; background: var(--zt-gray-50); border: 1px solid var(--zt-gray-200);
  border-radius: var(--zt-radius-xl); padding: var(--zt-space-xl) var(--zt-space-lg);
  text-decoration: none; transition: var(--zt-transition); height: 100%;
  position: relative; overflow: hidden;
}
.svc-card:hover { box-shadow: var(--zt-shadow-lg); transform: translateY(-4px); text-decoration: none; }
.svc-card h3 { color: var(--zt-navy); font-size: var(--zt-text-xl); margin: 12px 0 8px; }
.svc-card p { color: var(--zt-text-muted); font-size: var(--zt-text-sm); margin-bottom: 15px; }
.svc-card .svc-link { color: var(--zt-red); font-weight: 600; font-size: var(--zt-text-sm); }
.svc-card .svc-badge { position: absolute; top: 15px; right: 15px; background: var(--zt-red); color: var(--zt-white); font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 4px; letter-spacing: 0.3px; }

/* ========== Testimonials (index) ========== */
.testimonials { background: var(--zt-gray-50); padding: var(--zt-space-3xl) 0; }
.testi-card { background: var(--zt-white); border-radius: var(--zt-radius-xl); padding: 28px; box-shadow: var(--zt-shadow-xs); border: 1px solid var(--zt-gray-200); height: 100%; }
.testi-card .testi-text { font-size: var(--zt-text-sm); color: var(--zt-gray-600); font-style: italic; line-height: 1.7; margin-bottom: 15px; }
.testi-card .testi-author { font-weight: 700; color: var(--zt-navy); font-size: var(--zt-text-sm); }
.testi-card .testi-source { font-size: var(--zt-text-xs); color: var(--zt-gray-400); }

/* ========== Why Section (index) ========== */
.why-section { padding: var(--zt-space-3xl) 0; background: var(--zt-white); }
.why-card { text-align: center; margin-bottom: var(--zt-space-xl); }
.why-card .why-icon { font-size: 36px; margin-bottom: 10px; }
.why-card h4 { color: var(--zt-navy); font-size: var(--zt-text-lg); margin-bottom: 6px; }
.why-card p { color: var(--zt-text-muted); font-size: var(--zt-text-sm); }

/* ========== Domain Banner ========== */
.domain-banner { background: var(--zt-blue); padding: 18px 0; text-align: center; }
.domain-banner a { color: var(--zt-white); font-size: var(--zt-text-lg); font-weight: 700; text-decoration: none; }
.domain-banner a:hover { text-decoration: underline; color: var(--zt-white); }

/* ========== CTA Bottom ========== */
.cta-bottom { background: var(--zt-navy); padding: var(--zt-space-2xl) 0; text-align: center; }
.cta-bottom h2 { color: var(--zt-white); font-size: var(--zt-text-3xl); margin-bottom: var(--zt-space-lg); }
.cta-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
.cta-links a {
  display: inline-block; padding: 14px 30px; border-radius: var(--zt-radius);
  font-weight: 700; font-size: var(--zt-text-base); text-decoration: none; transition: var(--zt-transition);
}
.cta-links .cta-phone { background: var(--zt-red); color: var(--zt-white); }
.cta-links .cta-phone:hover { background: var(--zt-red-hover); color: var(--zt-white); }
.cta-links .cta-chat { background: transparent; border: 2px solid var(--zt-white); color: var(--zt-white); }
.cta-links .cta-chat:hover { background: var(--zt-white); color: var(--zt-navy); }
.cta-links .cta-domain { background: transparent; border: 2px solid var(--zt-blue); color: var(--zt-blue); }
.cta-links .cta-domain:hover { background: var(--zt-blue); color: var(--zt-white); }

@media (max-width: 767px) {
  .hero-home h1 { font-size: var(--zt-text-3xl); }
  .hero-badges { gap: 15px; }
  .cta-links { flex-direction: column; align-items: center; }
  .svc-card { margin-bottom: 15px; }
}

/* ========== Home Header ========== */
.home-header {
  background-size: cover !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden;
}