/* ============================================================
   Team TararBari - Hero Admin Text Sync V11.1
   DESIGN-PRESERVING PATCH

   IMPORTANT:
   - Keeps Exact Demo V4 hero image
   - Keeps image position/size
   - Keeps stars / SpaceFX / fixed menu / gap fixes
   - Only exposes the existing live CMS hero text/buttons
   - Masks the baked image text underneath
   ============================================================ */

/* Keep the exact existing demo hero image/background untouched. */
.block-hero{
  position:relative!important;
}

/*
 The Exact Demo V4 stylesheet hides the complete .hero-grid.
 Override only that visibility rule.
*/
.block-hero .hero-grid{
  visibility:visible!important;
  pointer-events:auto!important;
  position:absolute!important;
  inset:0!important;
  z-index:20!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

/* Old right-side live art stays hidden; the approved V4 image remains the art. */
.block-hero .hero-art{
  visibility:hidden!important;
  display:none!important;
  pointer-events:none!important;
}

/*
 Cover ONLY the baked badge/headline/subtitle/buttons area.
 The fade is intentionally soft so the approved space background remains
 visually continuous while old baked letters disappear underneath.
*/
.block-hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  top:16.5%!important;
  width:60%!important;
  height:51%!important;
  z-index:12!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      90deg,
      rgba(2,8,21,.98) 0%,
      rgba(2,8,21,.96) 56%,
      rgba(2,8,21,.82) 75%,
      rgba(2,8,21,.42) 88%,
      rgba(2,8,21,0) 100%
    )!important;
  backdrop-filter:blur(1.5px)!important;
  -webkit-backdrop-filter:blur(1.5px)!important;
}

/* Live editable CMS content positioned over the same approved visual. */
.block-hero .hero-grid > div:first-child{
  visibility:visible!important;
  pointer-events:auto!important;
  position:absolute!important;
  left:7.15%!important;
  top:22.5%!important;
  width:50.5%!important;
  z-index:22!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
  transform:none!important;
}

/* Eyebrow: preserve the same pill appearance. */
.block-hero .hero-grid > div:first-child .eyebrow{
  display:inline-flex!important;
  visibility:visible!important;
  margin:0 0 3.2% 0!important;
  padding:.58em 1.25em!important;
  border:1px solid rgba(32,227,122,.72)!important;
  border-radius:999px!important;
  background:rgba(3,20,28,.62)!important;
  color:#26e58a!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(9px,.78vw,14px)!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* Main editable title. */
.block-hero .hero-grid > div:first-child .block-title{
  display:block!important;
  visibility:visible!important;
  margin:0 0 2.1% 0!important;
  padding:0!important;
  max-width:100%!important;
  color:#f8fafc!important;
  background:none!important;
  -webkit-text-fill-color:initial!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(28px,4.05vw,72px)!important;
  font-weight:850!important;
  line-height:1.03!important;
  letter-spacing:-.045em!important;
  text-align:left!important;
  text-shadow:0 2px 18px rgba(0,0,0,.30)!important;
}

/* Optional accent word inserted by JS only when title contains "Build." */
.block-hero .block-title .tb-hero-accent{
  color:#09ded1!important;
}

/* Admin Subtitle field. */
.block-hero .hero-grid > div:first-child .block-body.lead{
  display:block!important;
  visibility:visible!important;
  margin:0!important;
  max-width:95%!important;
  color:#d6dde7!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(13px,1.55vw,27px)!important;
  font-weight:450!important;
  line-height:1.38!important;
  text-align:left!important;
  text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
}

/* Existing CMS buttons stay editable and clickable. */
.block-hero .hero-grid > div:first-child .actions{
  display:flex!important;
  visibility:visible!important;
  justify-content:flex-start!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:18px!important;
  margin:4.4% 0 0 0!important;
  padding:0!important;
}

.block-hero .hero-grid > div:first-child .btn{
  display:inline-flex!important;
  visibility:visible!important;
  min-height:54px!important;
  padding:0 29px!important;
  border-radius:12px!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-size:clamp(12px,1.12vw,20px)!important;
  font-weight:800!important;
  line-height:1!important;
  transform:none;
}

.block-hero .hero-grid > div:first-child .btn-primary{
  color:#031313!important;
  background:linear-gradient(105deg,#15e28a,#17d8ed)!important;
  border:0!important;
  box-shadow:0 0 22px rgba(19,226,214,.22)!important;
}

.block-hero .hero-grid > div:first-child .btn-ghost{
  color:#f8fafc!important;
  background:rgba(7,14,27,.58)!important;
  border:1px solid rgba(148,163,184,.35)!important;
}

.block-hero .hero-grid > div:first-child .btn:hover{
  transform:translateY(-2px)!important;
}

/* Exact Demo V4 transparent click hotspots are no longer needed. */
.block-hero .tb-demo-hotspot{
  display:none!important;
  pointer-events:none!important;
}

/* Preserve existing glow animation layer from Exact Demo V4. */
.block-hero::after{
  z-index:13!important;
}

/* Live content stays above all hero glow layers. */
.block-hero .hero-grid{
  z-index:22!important;
}

/* Tablet */
@media(max-width:1000px){
  .block-hero::before{
    width:68%!important;
  }

  .block-hero .hero-grid > div:first-child{
    left:6.5%!important;
    top:21.5%!important;
    width:58%!important;
  }

  .block-hero .hero-grid > div:first-child .btn{
    min-height:44px!important;
    padding:0 20px!important;
  }
}

/*
 Mobile keeps the existing full-image composition.
 Text is scaled/positioned without changing hero dimensions or background.
*/
@media(max-width:700px){
  .block-hero::before{
    left:0!important;
    top:14%!important;
    width:78%!important;
    height:60%!important;
  }

  .block-hero .hero-grid > div:first-child{
    left:7%!important;
    top:18%!important;
    width:67%!important;
  }

  .block-hero .hero-grid > div:first-child .eyebrow{
    font-size:clamp(5px,1.35vw,9px)!important;
    padding:.45em .85em!important;
    margin-bottom:3%!important;
  }

  .block-hero .hero-grid > div:first-child .block-title{
    font-size:clamp(15px,5.4vw,31px)!important;
    line-height:1.04!important;
    margin-bottom:2.5%!important;
  }

  .block-hero .hero-grid > div:first-child .block-body.lead{
    font-size:clamp(7px,2.25vw,13px)!important;
    line-height:1.3!important;
  }

  .block-hero .hero-grid > div:first-child .actions{
    gap:7px!important;
    margin-top:4%!important;
  }

  .block-hero .hero-grid > div:first-child .btn{
    min-height:27px!important;
    padding:0 10px!important;
    border-radius:6px!important;
    font-size:clamp(6px,1.9vw,10px)!important;
  }
}