/* fix-131: homepage hero = full-width photo slideshow.
   The photos sit behind the text and the domain search; the text on the left changes with each photo. */
.hz{position:relative;overflow:hidden;background:#061a39;padding-bottom:44px}
.hz-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hz-img{position:absolute;inset:0;background-image:var(--d);background-size:cover;background-position:center right;background-repeat:no-repeat;opacity:0;transform:scale(1.04);transition:opacity 1.1s ease,transform 7s ease}
.hz-img.is-on{opacity:1;transform:scale(1)}
.hz-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(59,50,171,.94) 0%,rgba(50,7,169,.84) 30%,rgba(24,10,119,.45) 58%,rgba(3,20,46,.10) 85%),
  linear-gradient(180deg,rgba(6,26,57,0) 55%,rgba(6,16,60,.55) 100%)}
html body .hz .hero{background:transparent;overflow:visible;min-height:0}
html body .hz .hero-bg{display:none}
html body .hz .hero-inner{grid-template-columns:minmax(0,1fr);padding-bottom:26px}
html body .hz .hero-copy{max-width:680px}
html body .hz .domain-search{position:relative;z-index:2}

/* Slides: all in one grid cell, so the height stays the same while they change */
.hz-track{display:grid}
.hz-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease,visibility .6s}
.hz-slide.is-on{opacity:1;visibility:visible;transform:none}
html body .hz .hz-slide>p{font-size:19px;line-height:1.55;color:#edf4ff;margin:0}
html[lang] body .hz .hz-title{font-size:43px;font-weight:700;line-height:1.06;letter-spacing:-2px;margin:17px 0 13px;padding:28px 0 25px;color:#fff}
html[lang=en] body .hz .hz-title{font-family:'Poppins','Inter',sans-serif}
.hz-points{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 22px}
.hz-points li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#fff}
.hz-points .icon{width:18px;height:18px;color:#4ade80;flex:none}

/* Main button changes with the slide (same place, same size) */
.hz-pri{display:inline-grid}
.hz-pri>a{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.hz-pri>a.is-on{opacity:1;visibility:visible}
.hz-gap{display:none}
/* the "Get domain ideas" button: no light purple ring around it */
html body .hz .domain-head .wdh-ideas-btn{box-shadow:none!important;animation:none!important}

/* Dots: centred across the page, between the trust row and the domain search */
.hz-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;align-items:center;max-width:1280px;margin:0 auto;padding:4px 22px 40px}
.hz-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.45);cursor:pointer;transition:width .3s,background-color .3s}
.hz-dot:hover{background:rgba(255,255,255,.75)}
.hz-dot.is-on{width:26px;background:#fff}
.hz-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Domain search sits straight on the photo: no white box, white text, white search bar */
html body .hz .domain-search{background:transparent;border-color:transparent;box-shadow:none}
html body .hz .domain-search .domain-title h2{color:#fff}
html body .hz .domain-search .domain-title p{color:rgba(237,244,255,.85)}
html body .hz .domain-search .domain-title>strong{background:rgba(255,255,255,.14);color:#fff}
html body .hz .domain-search .domain-head form{background:#fff;box-shadow:0 14px 34px rgba(10,10,60,.35)}
html body .hz .domain-search .tld span,html body .hz .domain-search .tld small{color:#fff}
html body .hz .domain-search .pricing{color:#86efac}
@media (min-width:1101px){
  /* title on one line, the search bar fills the rest */
  html body .hz .domain-search .domain-head{grid-template-columns:auto minmax(0,1fr);gap:28px}
  html body .hz .domain-search .domain-title h2{white-space:nowrap}
}
@media (max-width:1100px){.hz-img{background-image:var(--t)}}

@media (min-width:421px) and (max-width:620px){
  html[lang] body .hz .hz-title{font-size:32px;letter-spacing:-1.2px}
  html body .hz .hz-slide>p{font-size:16px}
}
@media (max-width:620px){
  .hz-img{background-image:var(--m);background-position:center}
  .hz-points{grid-template-columns:minmax(0,1fr);gap:9px;margin-top:14px}.hz-points li{font-size:14.5px}
  .hz-slide{align-self:start}
  .hz-gap{display:block;height:46vw;max-height:260px} /* empty space so the mobile photo shows under the badges */
  .hz-dots{padding-bottom:28px}
  .hz-shade{background:linear-gradient(180deg,rgba(50,7,169,.30) 0%,rgba(50,7,169,.18) 22%,rgba(40,10,150,.78) 40%,rgba(30,8,130,.84) 70%,rgba(6,16,60,.9) 100%)}
  .hz{padding-bottom:28px}
}
@media (max-width:420px){
  html[lang] body .hz .hz-title{font-size:24px;letter-spacing:-1.2px;padding-top:17px;padding-bottom:17px}
  html body .hz .hz-slide>p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.hz-img,.hz-slide{transition:none;transform:none}}

/* fix-132: tick-list icons chosen in the admin, round WhatsApp + main button, whole banner clickable */
.hz{cursor:default}
.hz a,.hz button,.hz input,.hz .domain-search{cursor:auto}
.hz a,.hz button{cursor:pointer}
.hz-points{margin-bottom:24px}
.hz-points li span{min-width:0}
html body .hz .hz-slide .actions{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:12px;margin:0;width:auto}
.hz .hero-wa{display:inline-grid;place-items:center;flex:none;width:50px;height:50px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 10px 22px rgba(37,211,102,.32);transition:transform .15s,background .15s}
.hz .hero-wa:hover,.hz .hero-wa:focus-visible{background:#1ebe5b;transform:translateY(-1px)}
.hz .hero-wa .icon{width:27px;height:27px;color:#fff}
@media (max-width:620px){
  html body .hz .hz-slide .actions{width:100%}
  html body .hz .hz-slide .actions .btn{flex:1 1 auto;width:auto;max-width:none;min-width:0;justify-content:center}
  .hz-points{margin-bottom:20px}
}

/* fix-140 (owner, 30 Oct): hero clean-up
   1. WhatsApp: just the logo — no round background, no shadow
   2. Globe beside "find your domain": no background, bigger thin line icon
   3. Domain extensions: no coloured pills, all like .com (white outline) — this section only */
html body .hz .hero-wa{width:auto;height:auto;background:transparent!important;box-shadow:none!important;border-radius:0;padding:0}
html body .hz .hero-wa:hover,html body .hz .hero-wa:focus-visible{background:transparent!important;transform:translateY(-1px)}
html body .hz .hero-wa .icon{width:35px;height:35px;color:#25d366}
html body .hz .domain-search .domain-title>strong{background:transparent!important;width:40px;height:40px;min-width:40px;flex:0 0 40px;border-radius:0}
html body .hz .domain-search .domain-title>strong .icon,html body .hz .domain-search .domain-title>strong svg{width:40px!important;height:40px!important;stroke-width:.8}
@media (max-width:620px){
  html body .hz .domain-search .domain-title>strong .icon,html body .hz .domain-search .domain-title>strong svg{stroke-width:.7}
  /* fix-140d (owner): WhatsApp + main button line up with the domain search edges below */
  html body .hz .hz-slide .actions{padding:0 13px;box-sizing:border-box}
}
html body .hz .domain-prices .tld b{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.9);box-shadow:none!important}
html body .hz .domain-prices .tld:hover b,html body .hz .domain-prices .tld:focus-visible b{background:rgba(255,255,255,.12)!important}

/* fix-144d (owner): exactly the reference theme's own slider timings (read from its source CSS) —
   photo: old one fades out and new one fades in at the same time (1s each), and the new photo grows 100% → 105%
   (0.8s ease-in-out, starting 0.4s later); the old one goes back to 100% the same way.
   Text: all parts come up from 80px below, one after another; leaving parts go down in 0.4s (after 0.1s).
   The first slide shows at once on page load (fast for Google); the effect runs from the first change. */
html body .hz .hz-bg .hz-shade{z-index:2}
.hz.hz-anim .hz-img{transform:scale(1);transition:opacity 1s ease,transform .8s ease-in-out .4s}
.hz.hz-anim .hz-img.is-on{transform:scale(1.05)}
html body .hz .hz-slide{transform:none;transition:opacity .5s ease-in-out,visibility .5s}
html body .hz .hz-slide>*{opacity:0;translate:0 80px;transition:opacity .4s ease-in-out .1s,translate .4s ease-in-out .1s}
html body .hz .hz-slide.is-on>*{opacity:1;translate:0 0}
html body .hz .hz-slide.is-on>:nth-child(1){transition:opacity .7s ease-in-out .3s,translate .7s ease-in-out .3s}
html body .hz .hz-slide.is-on>:nth-child(2){transition:opacity .7s ease-in-out .5s,translate .7s ease-in-out .5s}
html body .hz .hz-slide.is-on>:nth-child(3){transition:opacity .7s ease-in-out .6s,translate .7s ease-in-out .6s}
html body .hz .hz-slide.is-on>:nth-child(4){transition:opacity .7s ease-in-out .7s,translate .7s ease-in-out .7s}
@media (prefers-reduced-motion:reduce){
  .hz.hz-anim .hz-img,.hz.hz-anim .hz-img.is-on{transform:none;transition:opacity .6s ease}
  html body .hz .hz-slide>*,html body .hz .hz-slide.is-on>*{translate:none;transition:opacity .4s ease}
}
/* fix-144e: drag the banner left / right (mouse or finger), like the reference theme */
.hz.hz-drag,.hz.hz-drag .hero{touch-action:pan-y}
/* fix-144g (owner, like the reference theme): normal arrow over the banner, the closed 'grabbing' hand only while the mouse button is held
   and the banner is being dragged; the pointing finger only on buttons / links; text cursor in the search box. */
.hz.hz-drag,.hz.hz-drag .hero{cursor:default}
.hz.hz-drag :is(a,button,.hz-dot){cursor:pointer}
.hz.hz-drag input{cursor:text}
.hz.is-dragging,.hz.is-dragging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}