/* NexForge Tender Radar | Mobile premium hero V1 | 13 Oct 2026
   Real DOM text/buttons, existing hosted artwork and responsive overlay cards.
   Scoped to #radar.nf-premium-hero; desktop and all data modules untouched. */

/* New promotional elements only appear on mobile. */
#radar .nf-hero-eyebrow,
#radar .nf-mobile-benefits,
#radar .nf-mobile-showcase{display:none!important}

@media screen and (max-width:620px){
  #radar.nf-premium-hero{
    position:relative!important;
    isolation:isolate!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100vh - 76px)!important;
    min-height:calc(100svh - 76px)!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    color:#fff!important;
    background:
      radial-gradient(ellipse at 85% 26%,rgba(0,107,193,.32),transparent 48%),
      linear-gradient(180deg,#03122a 0%,#031126 64%,#071e37 100%)!important;
    border-bottom:3px solid #ff7b28!important;
  }
  /* Preserve the approved background asset on desktop, but replace the
     poorly cropped mobile cover with a real two-layer visual composition. */
  #radar.nf-premium-hero .nf-hero-photo,
  #radar.nf-premium-hero .nf-hero-art,
  #radar.nf-premium-hero .nf-circuit-overlay,
  #radar.nf-premium-hero .radar-desktop-art,
  #radar.nf-premium-hero .radar-hotspot,
  #radar.nf-premium-hero .radar-mobile{display:none!important}
  #radar.nf-premium-hero::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    top:0!important;left:0!important;right:0!important;
    bottom:auto!important;
    width:100%!important;
    height:clamp(285px,54svh,510px)!important;
    opacity:.68!important;
    pointer-events:none!important;
    background-image:
      linear-gradient(180deg,rgba(2,14,33,.31) 0%,rgba(2,14,33,.61) 50%,#031126 97%),
      url("/assets/nexforge-hero-bg.webp?v=1")!important;
    background-size:100% 100%,auto 100%!important;
    background-repeat:no-repeat!important;
    background-position:center,54% 12%!important;
    filter:saturate(1.15)!important;
    transform:none!important;
    animation:none!important;
  }
  #radar.nf-premium-hero::after{
    content:none!important;
    display:none!important;
  }
  #radar.nf-premium-hero .radar-desktop-copy{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    inset:auto!important;
    z-index:2!important;
    box-sizing:border-box!important;
    flex:1 0 auto!important;
    width:calc(100% - 36px)!important;
    max-width:440px!important;
    margin:0 auto!important;
    padding:clamp(24px,4.1svh,38px) 0 0!important;
    text-align:left!important;
    text-shadow:none!important;
    color:#fff!important;
  }
  #radar.nf-premium-hero .nf-hero-eyebrow{
    display:inline-flex!important;
    align-items:center!important;
    gap:10px!important;
    width:max-content!important;
    max-width:100%!important;
    min-height:37px!important;
    box-sizing:border-box!important;
    margin:0 0 19px!important;
    padding:8px 15px!important;
    border:1px solid rgba(104,194,251,.35)!important;
    border-radius:28px!important;
    background:linear-gradient(125deg,rgba(22,57,91,.79),rgba(5,26,54,.74))!important;
    box-shadow:0 5px 20px rgba(0,6,20,.28),inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(6px);
    color:#edf7ff!important;
    font:700 12.5px/1.2 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
    letter-spacing:.02em!important;
  }
  #radar.nf-premium-hero .nf-hero-radar-icon{
    display:inline-flex!important;
    width:21px!important;height:21px!important;
    align-items:center!important;justify-content:center!important;
    flex:0 0 21px!important;
    color:#ff8828!important;
    font-size:21px!important;
    line-height:1!important;
    text-shadow:0 0 13px rgba(255,127,28,.53)!important;
  }
  #radar.nf-premium-hero .radar-desktop-copy h1{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0 0 15px!important;
    text-align:left!important;
    font-family:"Oxanium","Arial Black",system-ui,sans-serif!important;
    font-size:clamp(29px,8.15vw,37px)!important;
    font-weight:800!important;
    line-height:1.15!important;
    letter-spacing:-.035em!important;
    overflow-wrap:normal!important;
    text-wrap:balance!important;
    text-shadow:0 3px 15px rgba(0,7,18,.6)!important;
    color:#fff!important;
  }
  #radar.nf-premium-hero .nf-hero-orange{color:#ff7926!important}
  #radar.nf-premium-hero .nf-hero-whatsapp{color:#12d26b!important}
  #radar.nf-premium-hero .radar-desktop-copy>p{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0!important;
    color:#d6e3f2!important;
    font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
    font-size:clamp(12.6px,3.47vw,14.7px)!important;
    font-weight:400!important;
    line-height:1.5!important;
    letter-spacing:.006em!important;
    text-align:left!important;
    text-wrap:pretty!important;
    text-shadow:0 2px 7px rgba(0,7,20,.48)!important;
  }
  #radar.nf-premium-hero .radar-desktop-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:0!important;
    margin:21px 0 0!important;
  }
  #radar.nf-premium-hero .radar-desktop-actions a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    position:relative!important;
    min-width:0!important;
    width:100%!important;
    min-height:51px!important;
    padding:8px 6px!important;
    margin:0!important;
    border-radius:11px!important;
    font:750 clamp(11px,3.13vw,13px)/1.18 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
    text-align:center!important;
    text-decoration:none!important;
    white-space:normal!important;
    box-shadow:0 6px 20px rgba(0,5,15,.28)!important;
    transition:transform .18s ease,box-shadow .18s ease!important;
  }
  #radar.nf-premium-hero .radar-desktop-actions a:active{transform:scale(.98)!important}
  #radar.nf-premium-hero .radar-desktop-subscribe{
    background:linear-gradient(135deg,#0fcb63 0%,#07a852 100%)!important;
    border:1px solid rgba(90,255,166,.90)!important;
    color:#fff!important;
    box-shadow:0 7px 22px rgba(5,133,67,.23),inset 0 1px 0 rgba(255,255,255,.19)!important;
  }
  #radar.nf-premium-hero .radar-desktop-subscribe::before{
    content:""!important;
    flex:0 0 19px!important;
    height:19px!important;width:19px!important;
    margin-right:5px!important;
    background:url("/assets/whatsapp-official.svg") center/contain no-repeat!important;
  }
  #radar.nf-premium-hero .radar-desktop-subscribe span{
    margin-left:2px!important;
    font-size:14px!important;
  }
  #radar.nf-premium-hero .radar-desktop-learn{
    background:rgba(2,16,37,.78)!important;
    border:1px solid rgba(237,247,255,.84)!important;
    color:#fff!important;
  }
  #radar.nf-premium-hero .radar-desktop-learn::after{
    content:" →"!important;
    font-size:16px!important;
    padding-left:3px!important;
  }
  #radar.nf-premium-hero .nf-mobile-benefits{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    margin:21px 0 9px!important;
    padding:0!important;
    color:#f1f5fc!important;
    font:650 clamp(9px,2.55vw,11px)/1.24 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
    text-align:center!important;
  }
  #radar.nf-premium-hero .nf-mobile-benefits span{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    min-height:40px!important;
    gap:6px!important;
    white-space:nowrap!important;
    padding:0 2px!important;
    border-right:1px solid rgba(177,208,237,.23)!important;
  }
  #radar.nf-premium-hero .nf-mobile-benefits span:last-child{border-right:0!important}
  #radar.nf-premium-hero .nf-mobile-benefits b{
    font:800 21px/1 system-ui,sans-serif!important;
    color:#ff8c39!important;
    text-shadow:0 0 18px rgba(255,128,34,.18)!important;
  }
  #radar.nf-premium-hero .nf-mobile-showcase{
    position:relative!important;
    isolation:isolate!important;
    display:flex!important;
    align-items:flex-start!important;
    box-sizing:border-box!important;
    width:calc(100% + 36px)!important;
    height:clamp(185px,27svh,255px)!important;
    min-height:185px!important;
    margin:auto -18px 0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background-color:#07162a!important;
    background-image:
      linear-gradient(180deg,#031126 0%,rgba(3,17,38,.52) 20%,rgba(3,17,38,.06) 60%,rgba(3,17,38,.15) 100%),
      linear-gradient(90deg,rgba(3,16,36,.54),rgba(3,16,36,.08) 74%),
      url("/assets/hero-mobile-portrait.png")!important;
    background-position:center,center,center bottom!important;
    background-size:100% 100%,100% 100%,100% auto!important;
    background-repeat:no-repeat!important;
  }
  #radar.nf-premium-hero .nf-mobile-showcase::after{
    content:""!important;
    position:absolute!important;
    z-index:1!important;
    display:block!important;
    left:0!important;right:0!important;bottom:0!important;
    height:42px!important;
    background:linear-gradient(180deg,transparent,rgba(0,12,30,.51))!important;
    pointer-events:none!important;
  }
  #radar.nf-premium-hero .nf-showcase-cards{
    position:relative!important;
    z-index:2!important;
    display:grid!important;
    gap:8px!important;
    width:53%!important;
    max-width:224px!important;
    margin:23px 0 0 13px!important;
    text-align:left!important;
  }
  #radar.nf-premium-hero .nf-showcase-card{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    min-height:40px!important;
    box-sizing:border-box!important;
    padding:8px 19px 8px 10px!important;
    border:1px solid rgba(103,203,255,.62)!important;
    border-radius:8px!important;
    background:linear-gradient(112deg,rgba(7,39,83,.88),rgba(17,63,112,.64))!important;
    box-shadow:0 4px 16px rgba(0,7,28,.26),inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(6px);
    color:#f1f7ff!important;
    font:750 clamp(9px,2.6vw,12px)/1.21 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
    letter-spacing:.025em!important;
    text-shadow:0 1px 2px rgba(0,0,0,.5)!important;
  }
  #radar.nf-premium-hero .nf-showcase-card::after{
    content:""!important;
    position:absolute!important;
    right:7px!important;
    width:6px!important;height:6px!important;
    border-radius:50%!important;
    background:#ff912d!important;
    box-shadow:0 0 10px rgba(255,133,41,.92)!important;
  }
  @media(prefers-reduced-motion:reduce){
    #radar.nf-premium-hero .radar-desktop-actions a{transition:none!important}
  }
}
@media screen and (max-width:340px){
  #radar.nf-premium-hero .radar-desktop-copy{width:calc(100% - 28px)!important}
  #radar.nf-premium-hero .radar-desktop-copy h1{font-size:27px!important}
  #radar.nf-premium-hero .radar-desktop-copy>p{font-size:12px!important}
  #radar.nf-premium-hero .radar-desktop-actions{gap:7px!important}
  #radar.nf-premium-hero .radar-desktop-actions a{font-size:10.8px!important;padding:6px 3px!important}
  #radar.nf-premium-hero .radar-desktop-subscribe::before{width:16px!important;height:16px!important;flex-basis:16px!important;margin-right:2px!important}
  #radar.nf-premium-hero .nf-mobile-benefits{font-size:8.7px!important}
  #radar.nf-premium-hero .nf-mobile-showcase{width:calc(100% + 28px)!important;margin:0 -14px!important}
}
@media screen and (min-width:621px){
  #radar.nf-premium-hero .nf-hero-eyebrow,
  #radar.nf-premium-hero .nf-mobile-benefits,
  #radar.nf-premium-hero .nf-mobile-showcase{display:none!important}
}


/* Mobile visual correction V3 — 13 Oct 2026
   Match the approved mockup composition: constructor on LEFT, slim
   floating tender cards on RIGHT. Keep real HTML and both working CTAs. */
@media screen and (max-width:620px){
  #radar.nf-premium-hero .nf-hero-eyebrow{
    min-height:34px!important;
    margin-bottom:17px!important;
    padding:7px 14px!important;
    font-size:12px!important;
  }
  #radar.nf-premium-hero .nf-hero-radar-icon{
    position:relative!important;
    font-size:0!important;
    width:20px!important;height:20px!important;
    border-radius:50%!important;
    border:2px solid #ff932f!important;
    box-sizing:border-box!important;
    box-shadow:inset 0 0 0 4px rgba(255,147,47,.15),0 0 12px rgba(255,147,47,.2)!important;
  }
  #radar.nf-premium-hero .nf-hero-radar-icon::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:3px!important;right:3px!important;
    width:6px!important;height:6px!important;
    border-radius:50%!important;
    background:#ff932f!important;
    box-shadow:0 0 7px #ff932f!important;
  }
  #radar.nf-premium-hero .nf-mobile-benefits{
    margin:15px 0 4px!important;
    padding:3px 0 6px!important;
  }
  #radar.nf-premium-hero .nf-mobile-benefits span{
    min-height:52px!important;
    gap:4px!important;
  }
  #radar.nf-premium-hero .nf-mobile-benefits b{
    font-size:19px!important;
  }
  #radar.nf-premium-hero .nf-mobile-benefits span::after{
    font-size:clamp(8px,2.1vw,9.2px)!important;
    line-height:1.1!important;
    font-weight:400!important;
    color:#adc7df!important;
    text-align:center!important;
  }
  #radar.nf-premium-hero .nf-mobile-benefits span:nth-child(1)::after{content:"Dari pelbagai sumber"!important}
  #radar.nf-premium-hero .nf-mobile-benefits span:nth-child(2)::after{content:"Jimat masa anda"!important}
  #radar.nf-premium-hero .nf-mobile-benefits span:nth-child(3)::after{content:"Terima terus di telefon"!important}

  /* The former layout showed the back of a tiny figure on the right and
     three bulky blue boxes on the left. Reverse both, without flipping text. */
  #radar.nf-premium-hero .nf-mobile-showcase{
    background-image:linear-gradient(180deg,#031126 0%,#07192f 100%)!important;
    background-position:center!important;
    background-size:cover!important;
    border:0!important;
    box-shadow:none!important;
  }
  #radar.nf-premium-hero .nf-mobile-showcase::before{
    content:""!important;
    position:absolute!important;
    display:block!important;
    z-index:0!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background-image:url("/assets/hero-mobile-portrait.png")!important;
    background-position:center 67%!important;
    background-size:110% auto!important;
    background-repeat:no-repeat!important;
    filter:brightness(.88) contrast(1.07) saturate(.95)!important;
    transform:scaleX(-1)!important;
    animation:none!important;
    pointer-events:none!important;
  }
  #radar.nf-premium-hero .nf-mobile-showcase::after{
    content:""!important;
    position:absolute!important;
    display:block!important;
    z-index:1!important;
    inset:0!important;
    width:100%!important;height:100%!important;
    background:linear-gradient(180deg,
      #031126 0%,
      rgba(3,17,38,.75) 10%,
      rgba(3,17,38,.24) 32%,
      rgba(3,17,38,.02) 69%,
      rgba(1,12,29,.42) 100%)!important;
    pointer-events:none!important;
  }
  #radar.nf-premium-hero .nf-showcase-cards{
    position:relative!important;
    z-index:2!important;
    margin:32px 14px 0 auto!important;
    width:45%!important;
    max-width:182px!important;
    gap:9px!important;
    transform:perspective(440px) rotateY(-7deg)!important;
    transform-origin:right center!important;
  }
  #radar.nf-premium-hero .nf-showcase-card{
    min-height:37px!important;
    padding:9px 20px 9px 11px!important;
    border-radius:9px!important;
    border:1px solid rgba(100,196,255,.52)!important;
    background:linear-gradient(125deg,rgba(8,35,75,.85),rgba(21,70,121,.53))!important;
    box-shadow:
      0 9px 17px rgba(0,8,27,.38),
      inset 0 1px 0 rgba(255,255,255,.10)!important;
    font-size:clamp(8.5px,2.34vw,10.4px)!important;
    font-weight:750!important;
    line-height:1.25!important;
    letter-spacing:.01em!important;
    overflow-wrap:normal!important;
    text-wrap:pretty!important;
  }
  #radar.nf-premium-hero .nf-showcase-card:nth-child(2){margin-left:-13px!important}
  #radar.nf-premium-hero .nf-showcase-card:nth-child(3){margin-left:-4px!important}
  #radar.nf-premium-hero .nf-showcase-card::after{
    width:6px!important;height:6px!important;
    right:7px!important;
    box-shadow:0 0 7px rgba(255,142,44,.76)!important;
  }
}