/* Workwebsite v4.2.4 — Premium Demo Visual
   Replaces the low-quality demo image and rebalances the Demo section.
   Loaded after prior homepage CSS files.
*/

.h422-demo-section{
  background:
    radial-gradient(circle at 16% 22%,rgba(219,163,56,.055),transparent 29%),
    linear-gradient(90deg,#070706 0%,#0d0b08 48%,#080706 100%)!important;
}

.h422-demo-shell{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(330px,.68fr)!important;
  gap:17px!important;
  width:min(1120px,100%)!important;
  max-width:none!important;
  align-items:stretch!important;
}

.h422-demo-form{
  order:2!important;
  min-width:0!important;
  padding:23px!important;
  border:1px solid rgba(220,166,58,.36)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 86% 9%,rgba(220,166,58,.065),transparent 30%),
    linear-gradient(155deg,#0f0d09,#070706 76%)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.20)!important;
}

.h422-demo-visual{
  order:1!important;
  min-width:0!important;
  padding:13px!important;
  border:1px solid rgba(220,166,58,.30)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 18% 14%,rgba(220,166,58,.065),transparent 30%),
    linear-gradient(155deg,#0e0c08,#070706)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.24)!important;
}

.h422-demo-screen{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  border:1px solid rgba(222,171,62,.42)!important;
  border-radius:17px!important;
  background:#050505!important;
  box-shadow:
    0 20px 38px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.015)!important;
}

.h422-demo-screen:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(255,209,111,.04),transparent 30%),
    linear-gradient(90deg,rgba(4,4,4,.06),transparent 30%,rgba(4,4,4,.08))!important;
}

.h422-demo-screen:after{
  content:""!important;
  position:absolute!important;
  left:15px!important;
  right:15px!important;
  bottom:10px!important;
  height:1px!important;
  z-index:3!important;
  background:linear-gradient(90deg,transparent,rgba(238,190,77,.60),transparent)!important;
}

.h422-demo-screen img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:saturate(.96) contrast(1.03) brightness(.92)!important;
  image-rendering:auto!important;
}

/* Benefits now visually belong to the image panel. */
.h422-demo-benefits{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:10px!important;
}

.h422-demo-benefits>div{
  min-width:0!important;
  min-height:85px!important;
  padding:11px 12px!important;
  border:1px solid rgba(220,166,58,.18)!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#0c0a08,#080706)!important;
  transition:transform .22s ease,border-color .22s ease,background .22s ease!important;
}

.h422-demo-benefits>div:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(230,181,72,.42)!important;
  background:linear-gradient(145deg,#100d09,#090806)!important;
}

.h422-demo-benefits i{
  width:27px!important;
  height:27px!important;
  border-color:rgba(220,166,58,.36)!important;
  color:#e3b348!important;
}

.h422-demo-benefits b{
  margin:8px 0 3px!important;
  color:#e0b34e!important;
  font-size:8.5px!important;
  font-weight:800!important;
}

.h422-demo-benefits span{
  color:#8f7d61!important;
  font-size:7.2px!important;
  line-height:1.8!important;
}

/* Dynamic form: compact and aligned to the premium visual. */
.h422-demo-icon{
  width:49px!important;
  height:49px!important;
  border-color:rgba(220,166,58,.48)!important;
  background:linear-gradient(145deg,#0c0a08,#060606)!important;
  color:#efc45a!important;
  box-shadow:0 8px 20px rgba(0,0,0,.20)!important;
}

.h422-demo-form>span{
  margin-top:14px!important;
  color:#d7a33d!important;
  font-size:6.8px!important;
}

.h422-demo-form h3{
  margin:7px 0 4px!important;
  color:#f2eadc!important;
  font-size:15.5px!important;
  line-height:1.6!important;
}

.h422-demo-form>p{
  margin:0 0 14px!important;
  color:#968469!important;
  font-size:8.3px!important;
  line-height:1.8!important;
}

.h422-demo-form input{
  width:100%!important;
  height:45px!important;
  border-color:rgba(220,166,58,.38)!important;
  background:#050505!important;
  color:#f6efe2!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012)!important;
}

.h422-demo-form input:focus{
  outline:none!important;
  border-color:#dca63a!important;
  box-shadow:0 0 0 3px rgba(220,166,58,.08)!important;
}

.h422-demo-form button{
  height:45px!important;
  margin-top:9px!important;
  background:linear-gradient(180deg,#f0c55d,#d79d2f)!important;
  color:#171006!important;
  box-shadow:0 12px 24px rgba(220,166,58,.12)!important;
  transition:transform .2s ease,filter .2s ease!important;
}

.h422-demo-form button:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.04)!important;
}

.h422-demo-full-link{
  margin-top:12px!important;
  color:#cfa246!important;
  font-size:7.7px!important;
}

/* Tablet */
@media(max-width:1000px){
  .h422-demo-shell{
    grid-template-columns:minmax(0,1.35fr) minmax(310px,.72fr)!important;
  }
}

/* Mobile */
@media(max-width:760px){
  .h422-demo-shell{
    grid-template-columns:1fr!important;
  }

  .h422-demo-form,
  .h422-demo-visual{
    order:initial!important;
  }

  .h422-demo-visual{
    padding:10px!important;
  }

  .h422-demo-benefits{
    grid-template-columns:1fr!important;
  }

  .h422-demo-benefits>div{
    min-height:0!important;
  }
}

@media(max-width:430px){
  .h422-demo-screen{
    border-radius:14px!important;
  }

  .h422-demo-form{
    padding:18px!important;
  }
}