/* Layout C: same Hostinger visual language, new module layouts */

/* ---------- Hero: centered -> split (copy left, 3D props clustered right) ---------- */
[data-layout=c] .homepage-sale-hero__content{align-items:flex-start!important;text-align:left!important;max-width:620px;margin-right:auto!important;justify-self:start!important}
[data-layout=c] .homepage-sale-hero__offer{align-items:flex-start!important;text-align:left!important}
[data-layout=c] .homepage-sale-hero__heading{font-size:clamp(56px,6.4vw,96px)!important;line-height:1!important}
[data-layout=c] .homepage-sale-hero__discount{justify-content:flex-start!important;margin-left:44px}
[data-layout=c] .homepage-sale-hero__desc{font-size:20px!important;margin-top:8px}
[data-layout=c] .homepage-sale-hero__guarantee{justify-content:flex-start!important}
@media (min-width:1024px){
  [data-layout=c] .homepage-sale-hero__prop{left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;inset:auto!important}
  [data-layout=c] .homepage-sale-hero__prop--top-end{top:150px!important;right:4%!important;width:170px!important;height:auto!important}
  [data-layout=c] .homepage-sale-hero__prop--bottom-start{top:200px!important;right:21%!important;width:300px!important;height:auto!important;z-index:1}
  [data-layout=c] .homepage-sale-hero__prop--bottom-end{bottom:40px!important;right:8%!important;width:240px!important;height:auto!important}
}
@media (min-width:1024px) and (max-width:1279px){
  [data-layout=c] .homepage-sale-hero__prop--bottom-start{right:17%!important;width:220px!important}
  [data-layout=c] .homepage-sale-hero__prop--bottom-end{width:190px!important;right:4%!important}
}

/* ---------- Section headlines: centered -> left aligned with lead text on the right ---------- */
@media (min-width:1024px){
  [data-layout=c] .h-slots-section .hw-headline__top,
  [data-layout=c] .homepage-reviews-masonry .hw-headline__top{display:grid!important;grid-template-columns:1.1fr .9fr;column-gap:64px;align-items:end;text-align:left!important;width:100%}
  [data-layout=c] .h-slots-section .hw-headline__title,
  [data-layout=c] .homepage-reviews-masonry .hw-headline__title{max-width:none!important;margin:0!important;text-align:left!important}
  [data-layout=c] .h-slots-section .hw-headline__description,
  [data-layout=c] .homepage-reviews-masonry .hw-headline__description{max-width:none!important;margin:0!important;text-align:left!important}
  [data-layout=c] .homepage-reviews-masonry .hw-headline{align-items:flex-start!important;padding:0 80px;max-width:1440px;margin-left:auto;margin-right:auto}
  [data-layout=c] .homepage-reviews-masonry .hw-headline__slot--bottom{justify-content:flex-start!important}
}

/* ---------- Deals: expanding accordion -> four equal open cards ---------- */
@media (min-width:1024px){
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panels{display:grid!important;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:16px;padding:0 80px;max-width:1440px;margin:0 auto}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panel{width:auto!important;flex:none!important;min-height:440px}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panel-inner{width:auto!important;max-width:none!important}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panel-title,
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panel-description,
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panel-price{width:auto!important;max-width:100%!important;opacity:1!important;visibility:visible!important;transform:none!important}
}

/* ---------- Agent prompt: centered -> two columns ---------- */
@media (min-width:1024px){
  [data-layout=c] .homepage-kodee-prompt__inner{display:grid!important;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;max-width:1280px!important;width:calc(100% - 160px)!important;margin:0 auto}
  [data-layout=c] .homepage-kodee-prompt__heading{align-items:flex-start!important;text-align:left!important}
  [data-layout=c] .homepage-kodee-prompt__title{text-align:left!important}
  [data-layout=c] .homepage-kodee-prompt__controls{align-items:flex-start!important;width:100%!important}
  [data-layout=c] .homepage-kodee-prompt__field{width:100%!important;height:64px!important}
  [data-layout=c] .homepage-kodee-prompt__description{text-align:left!important}
}

/* ---------- AI co-worker: horizontal accordion -> five open cards; rose glow instead of purple backdrop ---------- */
body[data-layout=c] section.homepage__agents.h-slots-section{background-image:radial-gradient(55% 50% at 88% 18%,rgba(225,29,72,.45),transparent 70%),radial-gradient(45% 45% at 8% 88%,rgba(190,18,60,.35),transparent 70%)!important;background-color:#000!important}
body[data-layout=c] section.homepage__ai-tools.h-slots-section{background-image:radial-gradient(70% 45% at 70% 100%,rgba(225,29,72,.45),transparent 70%)!important;background-color:#000!important}
body[data-layout=c] .homepage__agents article.h-expanding-panels__panel::before{background-image:linear-gradient(160deg,#E11D48 0%,#9F1239 100%)!important}
body[data-layout=c] .homepage__agents article.h-expanding-panels__panel:not(.h-expanding-panels__panel--active)::before{opacity:0!important}
body[data-layout=c] .homepage__agents article.h-expanding-panels__panel:not(.h-expanding-panels__panel--active){background:#141018!important;border:1px solid rgba(255,255,255,.08)}
@media (min-width:1024px){
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panels{display:grid!important;grid-template-columns:repeat(5,1fr);gap:16px;padding:0 80px;max-width:1440px;margin:0 auto;align-items:stretch!important}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel{width:auto!important;height:auto!important;min-height:420px;flex:none!important;margin:0!important;transform:none!important;align-self:stretch!important}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel-inner{width:auto!important;max-width:none!important;height:100%}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel-title,
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel-description{width:auto!important;opacity:1!important;visibility:visible!important;transform:none!important}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel-button-container{display:none!important}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel-image{width:100%!important;height:auto!important;margin-top:auto!important;opacity:1!important;transform:none!important}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel-image img{width:100%!important;height:auto!important;object-fit:contain!important}
}

/* ---------- Customer stories: single long column -> three-column masonry with every story visible ---------- */
@media (min-width:768px){
  [data-layout=c] .homepage-reviews-masonry__card--hidden{display:flex!important}
  [data-layout=c] .homepage-reviews-masonry > .h-button-v2{display:none!important}
  [data-layout=c] .homepage-reviews-masonry__grid{display:block!important;max-width:1440px;margin:0 auto;padding:0 80px}
  [data-layout=c] .homepage-reviews-masonry__column{display:block!important;columns:3;column-gap:16px;width:100%!important}
  [data-layout=c] .homepage-reviews-masonry__card{break-inside:avoid;margin:0 0 16px!important;width:100%!important;height:auto!important}
  [data-layout=c] .homepage-reviews-masonry__card--showcase .h-image,
  [data-layout=c] .homepage-reviews-masonry__card--showcase img{width:100%!important;height:auto!important;aspect-ratio:4/5;object-fit:cover}
  [data-layout=c] .homepage-reviews-masonry__card--quote{min-height:0!important;gap:32px}
}
@media (min-width:768px) and (max-width:1023px){
  [data-layout=c] .homepage-reviews-masonry__column{columns:2}
  [data-layout=c] .homepage-reviews-masonry__grid{padding:0 24px}
}

/* ---------- More power: carousel -> heading row + five-column grid ---------- */
@media (min-width:1024px){
  [data-layout=c] .homepage__ai-tools .h-carousel__track{display:block!important;width:auto!important;max-width:1280px;margin:0 auto}
  [data-layout=c] .homepage__ai-tools .h-carousel__track-controls{width:100%!important;justify-content:flex-start!important;margin:0 0 32px!important;height:auto!important}
  [data-layout=c] .homepage__ai-tools .h-cards-carousel-section__header{width:100%!important;max-width:none!important}
  [data-layout=c] .homepage__ai-tools .h-cards-carousel-section__header *{white-space:normal;max-width:none!important}
  [data-layout=c] .homepage__ai-tools .h-carousel__inner-container,
  [data-layout=c] .homepage__ai-tools .h-carousel__container{width:100%!important;max-width:none!important;overflow:visible!important;transform:none!important}
  [data-layout=c] .homepage__ai-tools .h-carousel__overflow-container{display:grid!important;grid-template-columns:repeat(5,1fr);gap:16px;width:100%!important;transform:none!important;overflow:visible!important}
  [data-layout=c] .homepage__ai-tools .h-carousel__overflow-container > *{width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;flex:none!important}
  [data-layout=c] .homepage__ai-tools .h-carousel__dots{display:none!important}
  [data-layout=c] .homepage__ai-tools .h-carousel__card{display:block!important}
  [data-layout=c] .homepage__ai-tools .h-content-card{width:100%!important;min-width:0!important;max-width:none!important;height:100%!important;min-height:280px;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.09)}
  [data-layout=c] .homepage__ai-tools .h-content-card *{max-width:100%}
}

/* ---------- FAQ: centered list -> title column + questions column ---------- */
@media (min-width:1024px){
  [data-layout=c] .hw-faq-section .h-grid-item{display:grid!important;grid-template-columns:.75fr 1.25fr;column-gap:80px;align-items:start}
  [data-layout=c] .hw-faq-section .hw-headline{grid-column:1;grid-row:1 / span 20;position:sticky;top:120px;margin:0!important;align-items:flex-start!important}
  [data-layout=c] .hw-faq-section .hw-headline__top,[data-layout=c] .hw-faq-section .hw-headline__title{text-align:left!important;align-items:flex-start!important}
  [data-layout=c] .hw-faq-section .hw-accordion{grid-column:2;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
}

/* ---------- Closing banner: image left, copy right ---------- */
@media (min-width:1024px){
  [data-layout=c] .h-banner-with-image__wrapper{flex-direction:row-reverse!important}
  [data-layout=c] .h-banner-with-image__left-content{padding-left:64px!important}
}

@media (min-width:1024px){
  [data-layout=c] .homepage-reviews-masonry .hw-headline__slot--bottom{justify-content:flex-start!important;width:100%}
}

/* ---------- Pricing header: title left, plan toggle + highlights right ---------- */
@media (min-width:1024px){
  [data-layout=c] .h-pricing-table > .hw-headline{display:grid!important;grid-template-columns:1fr auto;align-items:end;column-gap:48px;max-width:1112px;margin-left:auto!important;margin-right:auto!important;padding:0!important;width:calc(100% - 160px)}
  [data-layout=c] .h-pricing-table > .hw-headline .hw-headline__top{width:auto!important;padding:0!important;align-items:flex-start!important}
  [data-layout=c] .h-pricing-table > .hw-headline .hw-headline__title{text-align:left!important;max-width:560px!important;margin:0!important}
  [data-layout=c] .h-pricing-table > .hw-headline .hw-headline__slot--bottom{width:auto!important;padding:0!important;align-items:flex-end!important;gap:16px}
  [data-layout=c] .h-pricing-table__headline-lead{justify-content:flex-end!important;width:auto!important}
  [data-layout=c] .h-pricing-table__additional-top-features-container{justify-content:flex-end!important;width:auto!important}
}

/* ---------- Build/Grow/Manage tabs: no longer floats over content; sits under the section title ---------- */
@media (min-width:1024px){
  [data-layout=c] .hw-sub-menu__badges{position:relative!important;top:auto!important;justify-content:flex-start!important;max-width:1440px;margin:0 auto 8px!important;padding:0 80px!important}
}
[data-layout=c] .homepage-reviews-masonry .hw-headline__slot--bottom > a{margin-left:0!important;margin-right:auto!important}
@media (max-width:1023px){[data-layout=c] .homepage-reviews-masonry .hw-headline__slot--bottom > a{margin-right:auto!important;margin-left:auto!important}}
/* ---------- Closing banner: keep the button with its copy ---------- */
[data-layout=c] .h-banner-with-image__button-wrapper{margin-top:28px!important;padding-top:0!important}
[data-layout=c] .h-banner-with-image__left-content{justify-content:center!important}
@media (min-width:1024px){
  [data-layout=c] .hw-sub-menu__badges .h-badges-section__track-wrapper{justify-content:flex-start!important}
  [data-layout=c] .hw-sub-menu__badges .h-badges-section__track{margin-left:0!important;margin-right:auto!important}
}

/* =====================================================================
   Motion layer (restores the original's live feel inside the new layout)
   ===================================================================== */
@media (min-width:1024px){
  /* Deals: hovered/focused card widens, like the original accordion, but every card stays readable */
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panels{transition:grid-template-columns .55s cubic-bezier(.2,.8,.2,1)}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panels:has(> :nth-child(1).h-expanding-panels__panel--active){grid-template-columns:1.6fr 1fr 1fr 1fr}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panels:has(> :nth-child(2).h-expanding-panels__panel--active){grid-template-columns:1fr 1.6fr 1fr 1fr}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panels:has(> :nth-child(3).h-expanding-panels__panel--active){grid-template-columns:1fr 1fr 1.6fr 1fr}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panels:has(> :nth-child(4).h-expanding-panels__panel--active){grid-template-columns:1fr 1fr 1fr 1.6fr}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panel img{transition:transform .8s cubic-bezier(.2,.8,.2,1)!important}
  [data-layout=c] .h-expanding-panels--campaign .h-expanding-panels__panel--active img{transform:scale(1.06)}

  /* AI co-worker: active card widens and the rose fill travels between cards */
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panels{transition:grid-template-columns .55s cubic-bezier(.2,.8,.2,1)}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panels:has(> :nth-child(1).h-expanding-panels__panel--active){grid-template-columns:1.7fr 1fr 1fr 1fr 1fr}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panels:has(> :nth-child(2).h-expanding-panels__panel--active){grid-template-columns:1fr 1.7fr 1fr 1fr 1fr}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panels:has(> :nth-child(3).h-expanding-panels__panel--active){grid-template-columns:1fr 1fr 1.7fr 1fr 1fr}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panels:has(> :nth-child(4).h-expanding-panels__panel--active){grid-template-columns:1fr 1fr 1fr 1.7fr 1fr}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panels:has(> :nth-child(5).h-expanding-panels__panel--active){grid-template-columns:1fr 1fr 1fr 1fr 1.7fr}
  body[data-layout=c] .homepage__agents article.h-expanding-panels__panel:not(.h-expanding-panels__panel--active)::before{opacity:0!important}
  body[data-layout=c] .homepage__agents article.h-expanding-panels__panel::before{transition:opacity .45s ease!important}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel-image{transition:transform .55s cubic-bezier(.2,.8,.2,1)!important;transform-origin:left bottom}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel--active .h-expanding-panels__panel-image{transform:scale(1.12)!important}
  [data-layout=c] .homepage__expanding-panels .h-expanding-panels__panel{cursor:pointer}

  /* Build / Grow / Manage tabs: sit under the section title, then dock into the header bar while scrolling */
  [data-layout=c] .hw-sub-menu__badges{position:sticky!important;top:11px!important;z-index:10000!important;pointer-events:none;background:none!important}
  [data-layout=c] .hw-sub-menu__badges .h-badges-section__track{pointer-events:auto;margin-left:auto!important;margin-right:0!important}
}
@media (min-width:1200px){
  [data-layout=c] .hw-sub-menu__badges .h-badges-section__track{margin-right:120px!important}
}
@media (min-width:1024px) and (max-width:1199px){
  [data-layout=c] .hw-sub-menu__badges{position:relative!important;top:auto!important}
}

/* Hover life on cards */
[data-layout=c] .homepage__ai-tools .h-content-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,background-color .35s!important}
[data-layout=c] .homepage__ai-tools .h-content-card:hover{transform:translateY(-6px);border-color:rgba(225,29,72,.55)!important;background:rgba(225,29,72,.08)!important}
[data-layout=c] .homepage-reviews-masonry__card--showcase{overflow:hidden}
[data-layout=c] .homepage-reviews-masonry__card--showcase img{transition:transform .9s cubic-bezier(.2,.8,.2,1)!important}
[data-layout=c] .homepage-reviews-masonry__card--showcase:hover img{transform:scale(1.05)}
[data-layout=c] .homepage-control__card{transition:transform .35s cubic-bezier(.2,.8,.2,1)!important}
[data-layout=c] .homepage-control__card:hover{transform:translateY(-4px)}

/* Scroll reveal (classes added by layout-c.js only, so content never hides without JS) */
.lc-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--lc-d,0ms)}
.lc-reveal.lc-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .lc-reveal{opacity:1!important;transform:none!important;transition:none!important}
  [data-layout=c] *{transition-duration:.01ms!important}
}

/* ---------- SITXO brand ---------- */
[data-layout=c] .sx-logo{display:block;height:30px;width:auto}
[data-layout=c] .hw-logo-row,
[data-layout=c] .h-expanding-panels__badge,
[data-layout=c] .homepage-overlapping-card__avatar:has(img[src*="2f24703e16"]){display:none!important}
[data-layout=c] img.sx-still{width:100%;height:100%;object-fit:cover;display:block}
