/* Public home page */

/* Home: drop main's header offset so the hero can start at the true top */
main:has(.hero-slider){
  margin-top:0;
}

/* Full-bleed hero under fixed header */
.hero-slider{
  position:relative;
  width:100%;
  height:100vh;
  min-height:560px;
  margin-top:0;
  overflow:hidden;
}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;z-index:0;transition:opacity 1s ease;pointer-events:none;padding-top:var(--header-height);box-sizing:border-box}
.hero-slide.active{opacity:1;z-index:5;pointer-events:auto}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.72) 45%,rgba(5,5,5,.9) 100%);z-index:1;pointer-events:none}
.hero-slide-content{position:relative;z-index:2;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-slide-heading{font-family:var(--font);font-size:clamp(2.1rem,4.6vw,3.75rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--ink-on-solid);margin:0 auto 1.25rem;max-width:780px}
.hero-slide-heading .highlight{color:var(--accent)}
.hero-slide-sub{font-size:1.05rem;font-weight:500;color:rgba(255,255,255,.72);max-width:580px;line-height:1.7;margin:0 auto 2.25rem}
.hero-search-block{max-width:560px;width:100%;margin:0 auto}
.hero-search-form{display:flex;align-items:center;gap:6px;background:var(--surface);border-radius:var(--r-pill);padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-search-form > i{color:var(--ink-muted);margin:0 10px 0 14px;font-size:.9rem;flex-shrink:0}
.hero-search-form input{flex:1;min-width:0;border:none;outline:none;padding:.75rem 0;font-size:.92rem;font-family:var(--font);font-weight:500;background:transparent;color:var(--ink-strong);text-align:left}
.hero-search-form input::placeholder{color:var(--ink-muted)}
.hero-search-form .btn{flex-shrink:0;height:var(--control-h);padding:0 1.35rem}
.hero-search-form .btn .fa-arrow-right{display:none}
.hero-search-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.1rem}
.hero-search-chips a{display:inline-flex;align-items:center;gap:6px;padding:.4rem .9rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.3);color:var(--ink-on-solid);font-size:.8rem;font-weight:600;background:rgba(255,255,255,.08);transition:var(--transition-base)}
.hero-search-chips a:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:var(--ink-on-solid)}

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.hub-card{background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--r-card);padding:2.25rem 1.75rem;transition:border-color .2s ease,box-shadow .2s ease,transform .25s ease;box-shadow:var(--shadow-soft);text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%}
.hub-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card);color:inherit;transform:translateY(-3px)}
.hub-icon{width:52px;height:52px;border-radius:var(--r-inner);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1.25rem}
.hub-card h3{font-family:var(--font);font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.55rem}
.hub-card p{color:var(--ink-soft);font-size:.92rem;line-height:1.65;margin-bottom:1.25rem;flex:1}
.hub-link{color:var(--accent);font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;gap:.4rem;justify-content:center}

.home-domain{padding:clamp(3.5rem,6vw,5.5rem) 0}
.home-domain-inner{background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--r-card);padding:clamp(2rem,4vw,2.75rem);text-align:center;max-width:720px;margin:0 auto;box-shadow:var(--shadow-soft)}
.home-domain-inner h2{font-family:var(--font);font-weight:700;letter-spacing:-.02em;margin-bottom:.75rem}
.home-domain-inner > p{color:var(--ink-soft);margin:0 auto 1.5rem;max-width:480px;line-height:1.65;font-weight:500}
.home-domain-form{display:flex;gap:10px;max-width:520px;width:100%;margin:0 auto;align-items:center}
.home-domain-form input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:var(--control-h);
  background:var(--surface-sunken);
  border:1px solid var(--border-hairline);
  border-radius:var(--r-pill);
  padding:0 1.15rem;
  font-size:1rem;
  font-family:var(--font);
  font-weight:500;
  color:var(--ink-strong);
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
}
.home-domain-form input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:var(--focus-ring)}
.home-domain-form .btn{flex-shrink:0}
.home-domain-note{margin-top:.85rem;font-size:.8rem;color:var(--ink-muted);font-weight:500}

.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.how-step{background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--r-card);padding:2rem 1.5rem;box-shadow:var(--shadow-soft);transition:transform .25s ease,box-shadow .2s ease;height:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.how-step:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.how-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:.9rem;margin-bottom:1rem}
.how-step h3{font-family:var(--font);font-size:1.1rem;font-weight:700;margin-bottom:.5rem}
.how-step p{color:var(--ink-soft);font-size:.92rem;line-height:1.65;margin:0}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.feat-card{background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--r-card);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:border-color .2s ease,box-shadow .2s ease,transform .25s ease;box-shadow:var(--shadow-soft);height:100%}
.feat-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card);color:inherit;transform:translateY(-3px)}
.feat-card__image{aspect-ratio:16/10;background:var(--surface-sunken);overflow:hidden}
.feat-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.feat-card:hover .feat-card__image img{transform:scale(1.04)}
.feat-card__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:2rem}
.feat-card__body{padding:1.25rem 1.35rem;text-align:center}
.feat-card__title{font-family:var(--font);font-size:1.05rem;font-weight:700;margin:0 0 .4rem;letter-spacing:-.01em}
.feat-card__summary{color:var(--ink-soft);font-size:.88rem;line-height:1.55;margin:0}
.feat-empty{text-align:center;color:var(--ink-muted);padding:2rem 1rem}

.hosting-promo{padding:clamp(3.5rem,6vw,5.5rem) 0}
.hosting-promo-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:center;background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--r-card);padding:clamp(2rem,4vw,3rem);position:relative;overflow:hidden;box-shadow:var(--shadow-soft)}
.hosting-promo-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 15% 20%,rgba(var(--accent-rgb),.12) 0%,transparent 60%);z-index:0}
.hosting-feature-card{position:relative;z-index:1;background:var(--surface-sunken);border:1px solid var(--border-hairline);border-radius:var(--r-inner);padding:2rem 1.75rem}
.hosting-icon-wrap{width:56px;height:56px;border-radius:var(--r-inner);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.25rem}
.hosting-feature-list{list-style:none;margin:0;padding:0}
.hosting-feature-list li{display:flex;align-items:flex-start;gap:.85rem;padding:.8rem 0;border-bottom:1px solid var(--border-hairline);font-size:.95rem;font-weight:600;color:var(--ink-strong)}
.hosting-feature-list li:last-child{border-bottom:none;padding-bottom:0}
.hosting-feature-list li i{color:var(--accent);margin-top:.2rem;flex-shrink:0}
.hosting-feature-list li small{display:block;font-weight:500;font-size:.8rem;color:var(--ink-muted);margin-top:.2rem}
.hosting-copy{position:relative;z-index:1}
.hosting-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.hosting-heading{font-family:var(--font);font-size:clamp(1.65rem,3.5vw,2.35rem);font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--ink-strong);margin-bottom:1rem}
.hosting-sub{font-size:1.05rem;line-height:1.75;color:var(--ink-soft);margin-bottom:1.75rem;max-width:480px;font-weight:500}

.gmb-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;flex-direction:column;gap:1.25rem;margin-bottom:1.75rem;text-align:center}
.gmb-head-copy{min-width:0;width:100%;display:flex;flex-direction:column;align-items:center}
.gmb-title{font-family:var(--font);font-size:clamp(1.65rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink-strong);margin:0 0 0.85rem;position:relative;padding-bottom:0.65rem}
.gmb-title:after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:2.5rem;height:3px;border-radius:var(--r-pill);background:var(--accent)}
.gmb-rating{display:flex;align-items:center;justify-content:center;gap:.65rem;flex-wrap:wrap}
.gmb-score{font-size:1.75rem;font-weight:800;color:var(--ink-strong);line-height:1;font-family:var(--font)}
.gmb-stars{color:#f59e0b;letter-spacing:1px;font-size:1rem;line-height:1}
.gmb-meta{color:var(--ink-muted);font-size:.88rem;font-weight:500}
.gmb-source{font-size:.82rem;color:var(--ink-muted);margin:.45rem 0 0;font-weight:500;display:flex;align-items:center;justify-content:center;gap:.4rem}
.gmb-source .fa-google{color:#4285f4}
.gmb-cta{flex-shrink:0}
.gmb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.gmb-card{background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--r-card);padding:1.5rem;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:.85rem;height:100%;transition:transform .25s ease,box-shadow .2s ease}
.gmb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.gmb-card-stars{color:#f59e0b;font-size:.85rem;letter-spacing:1px}
.gmb-quote{color:var(--ink-soft);font-size:.92rem;line-height:1.7;margin:0;flex:1}
.gmb-person{font-weight:700;font-size:.92rem;color:var(--ink-strong)}
.gmb-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:600;color:var(--ink-muted)}
.gmb-badge i{color:#4285f4}

.home-showcase{padding:clamp(2.25rem,4vw,3.5rem) 0}
.home-showcase .section-header-block{margin-bottom:clamp(1rem,2vw,1.5rem)}
.home-showcase-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0.35rem;
}
.home-showcase-item{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:var(--r-inner, 10px);
  border:1px solid var(--border-hairline);
  background:var(--surface-sunken);
  box-shadow:var(--shadow-soft);
  aspect-ratio:4 / 3;
  width:100%;
  animation:homeShowcaseIn .45s ease both;
  animation-delay:var(--delay,0ms);
}
.home-showcase-item button{
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
}
.home-showcase-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.home-showcase-item:hover img{transform:scale(1.05)}
@keyframes homeShowcaseIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.home-showcase-lightbox{
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  background:rgba(8,10,14,.82);
  backdrop-filter:blur(6px);
  cursor:zoom-out;
}
.home-showcase-lightbox.show{display:flex}
.home-showcase-lightbox img{
  max-width:min(960px,94vw);
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  cursor:default;
}
.home-showcase-lightbox-close{
  position:absolute;
  top:1rem;
  right:1rem;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.home-showcase-lightbox-close:hover{background:rgba(255,255,255,.22)}


.app-strip{padding:clamp(3.5rem,6vw,5.5rem) 0}
.app-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:1.75rem 2.5rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.25rem);box-shadow:var(--shadow-soft)}
.app-strip-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.55rem}
.app-strip-copy{min-width:0;flex:1;max-width:34rem}
.app-strip-copy h2{font-family:var(--font);font-weight:700;letter-spacing:-.02em;margin:0 0 .45rem;font-size:clamp(1.25rem,2.2vw,1.5rem)}
.app-strip-copy p{color:var(--ink-soft);margin:0;line-height:1.65;font-weight:500;font-size:.95rem}
.app-badge{display:inline-block;line-height:0;flex-shrink:0;transition:transform .2s ease,opacity .2s ease}
.app-badge:hover{transform:translateY(-2px);opacity:.92}
.app-badge img{height:52px;width:auto;display:block}

.final-cta{text-align:center;background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--r-card);padding:clamp(2.25rem,5vw,3.25rem) clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-soft)}
.final-cta-eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.85rem}
.final-cta h2{font-family:var(--font);font-weight:700;letter-spacing:-.02em;margin:0 0 .75rem}
.final-cta p{color:var(--ink-soft);max-width:520px;margin:0 auto 1.5rem;font-weight:500;line-height:1.65}
.final-cta .hero-cta{justify-content:center}
.hero-cta{display:flex;gap:0.85rem;flex-wrap:wrap;align-items:center}

/* Home FAQ — Soft Neutral accordion (works with PublicUI.initFaqAccordion) */
.home-faq.faq-list{
  max-width:760px;
  margin:2rem auto 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.65rem;
}
.home-faq .faq-item{
  background:var(--surface);
  border:1px solid var(--border-hairline);
  border-radius:var(--r-inner);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  margin:0;
  border-left:none;
  opacity:1;
  transform:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.home-faq .faq-item:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
  transform:none;
}
.home-faq .faq-item.active{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}
.home-faq .faq-question{
  padding:1.05rem 1.2rem;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  background:transparent;
  border:none;
  width:100%;
  text-align:left;
  font-family:var(--font);
  transition:background-color .15s ease;
}
.home-faq .faq-question:hover{background:var(--surface-sunken)}
.home-faq .faq-item.active .faq-question{background:var(--surface-sunken)}
.home-faq .faq-question h3{
  font-family:var(--font);
  font-size:0.98rem;
  font-weight:600;
  color:var(--ink-strong);
  margin:0;
  flex:1;
  line-height:1.4;
  letter-spacing:-.01em;
}
.home-faq .faq-question i{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--surface-sunken);
  color:var(--ink-muted);
  font-size:0.7rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background-color .15s ease,color .15s ease,transform .2s ease;
}
.home-faq .faq-item.active .faq-question i{
  background:var(--accent-soft);
  color:var(--accent);
  transform:none;
}
.home-faq .faq-answer{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 1.2rem;
  background:transparent;
  transition:max-height .35s ease,opacity .25s ease;
}
.home-faq .faq-answer p{
  padding:0 0 1.15rem;
  margin:0;
  color:var(--ink-soft);
  line-height:1.7;
  font-size:0.92rem;
  font-weight:500;
}
@media (max-width:576px){
  .home-faq .faq-question{padding:0.95rem 1rem}
  .home-faq .faq-answer{padding:0 1rem}
  .home-faq .faq-question h3{font-size:0.92rem}
}

@media (max-width:991px){
  .hub-grid,.how-grid,.feat-grid,.gmb-grid{grid-template-columns:repeat(2,1fr)}
  .hosting-promo-inner{
    display:flex;
    flex-direction:column;
    padding:1.75rem;
    text-align:center;
    gap:1.5rem;
  }
  .hosting-copy{
    order:-1;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hosting-eyebrow{justify-content:center}
  .hosting-feature-list li{text-align:left}
  .hosting-sub{margin-left:auto;margin-right:auto}
}
@media (max-width:768px){
  /* Content-height hero — avoids tall empty dark band on phones */
  .hero-slider{
    height:auto;
    min-height:0;
  }
  .hero-slide{
    position:relative;
    inset:auto;
    display:none;
    opacity:1;
    padding:calc(var(--header-height) + 1.5rem) 0 2rem;
    min-height:0;
  }
  .hero-slide.active{
    display:flex;
  }
  .hero-slide-heading{
    font-size:clamp(1.7rem,7.2vw,2.35rem);
    margin-bottom:.85rem;
  }
  .hero-slide-sub{
    font-size:.95rem;
    margin-bottom:1.35rem;
    line-height:1.6;
  }
  .hero-search-chips{margin-top:.85rem;gap:.45rem}
  .hero-search-chips a{padding:.35rem .75rem;font-size:.75rem}

  .hub-card{padding:1.35rem 1.2rem}
  .hub-icon{width:44px;height:44px;font-size:1.1rem;margin-bottom:.9rem}
  .how-step{padding:1.35rem 1.2rem}
  .home-domain,
  .hosting-promo,
  .home-showcase,
  .app-strip{padding:2.25rem 0}
  .home-showcase-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0.3rem;
  }
  .home-domain-inner{padding:1.5rem 1.15rem}
  .home-domain-form{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:100%;
  }
  .home-domain-form input{
    width:100%;
    max-width:100%;
    flex:none;
  }
  .home-domain-form .btn{
    width:100%;
    justify-content:center;
  }
  .hosting-feature-card{padding:1.35rem 1.15rem}
  .app-strip-inner{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:1.25rem;
    padding:1.35rem 1.15rem;
  }
  .app-strip-copy{
    max-width:none;
    width:100%;
    order:0;
  }
  .app-strip-eyebrow{justify-content:center}
  .app-strip-copy p{margin-left:auto;margin-right:auto}
  .app-badge{
    order:1;
    margin:0 auto;
  }
  .final-cta{padding:1.75rem 1.15rem}
  .gmb-head{flex-direction:column;align-items:center;gap:1rem;margin-bottom:1.25rem}
  .gmb-cta{align-self:center;width:auto;min-width:min(100%,280px);justify-content:center}
  .gmb-card{padding:1.2rem}
  .home-faq.faq-list{margin-top:1.25rem}
  .feat-card__body{padding:1rem 1.1rem}
}
@media (max-width:640px){
  .hub-grid,.how-grid,.feat-grid,.gmb-grid{grid-template-columns:1fr;gap:0.9rem}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-search-form .btn .btn-label{display:none}
  .hero-search-form .btn .fa-arrow-right{display:inline-block}
  .hero-search-form .btn{padding:0;width:var(--control-h);min-width:var(--control-h)}
  .hub-grid{margin-top:1.25rem}
  .how-grid,.feat-grid{margin-top:1.25rem}
}