*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#0a1d34;background:#fff}a{text-decoration:none;color:inherit}header{height:84px;display:flex;align-items:center;padding:7px 5.5%;gap:30px;position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 8px #0002}.brand{margin-right:auto}.brand img{width:245px;height:68px;object-fit:contain}.hamb{display:none;border:0;background:transparent;font-size:28px}nav{display:flex;align-items:center;gap:27px;font-size:14px}nav>.active{color:#0879ef;border-bottom:3px solid #0879ef;padding:27px 0}.wa,.blue,.green{color:#fff;padding:13px 20px;border-radius:7px;font-weight:700}.wa,.green{background:#09b95e}.blue{background:#0879ef}.dd{position:relative}.dd>button{border:0;background:transparent;font:inherit;color:#0879ef;cursor:pointer}.drop{display:none;position:absolute;top:27px;left:-20px;width:220px;background:#fff;padding:10px;border-radius:9px;box-shadow:0 12px 35px #00152b45}.dd:hover .drop,.dd:focus-within .drop,.dd.show .drop{display:block}.drop a{display:block;padding:10px;border-radius:5px}.drop a:hover{background:#eef6ff}.drop small{display:block;color:#6d7782;margin-top:3px}.radarlink{color:#0879ef}.hero{height:510px;position:relative;background:url('assets/hero-v4.jpg') center/cover no-repeat;color:#fff;overflow:hidden}.heroShade{position:absolute;inset:0;background:linear-gradient(90deg,#03152fe6 0%,#06294ca8 48%,transparent 76%)}.heroText{position:relative;z-index:2;width:62%;padding:62px 6%}.cap{font-size:12px;letter-spacing:4px;font-weight:800}.hero h1{font-size:59px;line-height:.96;letter-spacing:-2px;margin:18px 0}.hero h1 span,.radar h2 span,em{color:#55aaff;font-style:normal}.hero p{font-size:19px;line-height:1.5;max-width:620px}.buttons{display:flex;gap:15px;margin-top:27px}.outline{border:2px solid #fff;color:#fff;padding:12px 20px;border-radius:7px;font-weight:700}.hero aside{position:absolute;right:0;top:0;width:15%;height:100%;padding:45px 18px;background:#063b75df;display:flex;flex-direction:column;justify-content:space-around}.hero aside b{font-size:13px}.strength{display:grid;grid-template-columns:repeat(5,1fr);padding:18px 5%;text-align:center;font-weight:600;border-bottom:1px solid #ddd}.strength span+span{border-left:1px solid #bbb}.section{padding:30px 4.5%}.heading{display:flex;align-items:center;gap:45px}.section h2,.licenses h2{font-size:34px;margin:4px 0 22px}.heading p{color:#64717d}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.cards article{border-radius:7px;overflow:hidden;background:#fff;box-shadow:0 2px 12px #00152b25}.cards img{display:block;width:100%;height:145px;object-fit:cover}.cards h3,.cards p{margin:12px 14px}.cards p{font-size:14px;line-height:1.4;color:#5e6974}.radar{min-height:325px;padding:28px 5.5%;display:grid;grid-template-columns:1.15fr .95fr .7fr;align-items:center;gap:30px;color:#fff;background:linear-gradient(100deg,#06192d,#063f72)}.radar h2{font-size:48px;margin:3px 0}.radar p{line-height:1.5}.radarVisual{height:270px;border-radius:15px;overflow:hidden}.radarVisual img{width:100%;height:100%;object-fit:cover;object-position:center}.radar li{margin:18px 0}.projects{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}.projects article{height:170px;position:relative;overflow:hidden;border-radius:7px;background:#06192d}.projects img{width:100%;height:100%;object-fit:cover}.projects article:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#00162de8)}.projects article div{position:absolute;z-index:2;left:13px;right:13px;bottom:13px;color:#fff}.projects small{display:block;margin-top:5px}.licenses{padding:8px 5.5% 27px;display:grid;grid-template-columns:2fr repeat(4,1fr);align-items:center;gap:25px}.licenses b{text-align:center;font-size:37px;color:#087f91}.licenses small{display:block;font-size:10px}footer{background:#062c55;color:#fff;padding:18px 5.5%;display:flex;align-items:center;gap:55px}footer img{width:245px;height:76px;object-fit:contain;background:#fff;border-radius:4px}footer div{margin-right:auto}footer h2{margin:0 0 5px}
@media(max-width:900px){header{height:76px;padding:5px 5%}.brand img{width:190px}.top{display:none}.hamb{display:block;order:3}nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:15px 25px;box-shadow:0 10px 20px #0002}.open nav{display:flex}nav>.active{padding:8px 0}.dd>button{padding:8px 0}.drop{position:static;width:100%;box-shadow:none;background:#f2f7fb;margin-top:7px}.hero{height:620px;background-position:center}.heroText{width:100%;height:100%;padding:55px 7%;background:#031b34a8}.hero h1{font-size:46px}.hero aside{display:none}.strength{grid-template-columns:1fr 1fr;font-size:12px}.strength span+span{border:0}.heading{display:block}.cards,.projects{grid-template-columns:1fr 1fr}.radar{grid-template-columns:1fr}.radarVisual{height:250px}.licenses{grid-template-columns:1fr 1fr}.licenses>div{grid-column:1/-1}footer{flex-direction:column;align-items:flex-start;gap:15px}}
@media(max-width:520px){.brand img{width:165px}.hero h1{font-size:41px}.hero p{font-size:17px}.buttons{flex-direction:column;align-items:flex-start}.cards,.projects{grid-template-columns:1fr}.radar h2{font-size:40px}.radarVisual{height:200px}footer img{width:200px}}
/* === V4.2: corrected header + premium 3D CTA buttons === */
header{padding-left:4.2%;padding-right:4.2%;gap:20px}
header .brand{flex:0 0 205px;margin-right:auto;overflow:visible}
header .brand img{width:205px;height:68px;object-fit:contain;display:block}
header nav{gap:20px;white-space:nowrap}
header .top{flex:0 0 auto;min-width:158px;white-space:nowrap}
.btn3d{display:inline-flex!important;align-items:center;justify-content:center;gap:9px;position:relative;border-radius:14px!important;font-weight:800!important;line-height:1.05;white-space:nowrap;transform:translateY(0);transition:transform .13s ease,box-shadow .13s ease,filter .13s ease}
.btn3d-green{background:linear-gradient(180deg,#39df72 0%,#14c85c 48%,#08a94a 100%)!important;border:1px solid #069a42!important;box-shadow:inset 0 2px 0 #ffffff75,inset 0 -2px 0 #057f37,0 6px 0 #067b38,0 10px 18px #002b1838!important;color:#fff!important}
.btn3d-blue{background:linear-gradient(180deg,#34b3ff 0%,#168ff1 48%,#0870d7 100%)!important;border:1px solid #0871d5!important;box-shadow:inset 0 2px 0 #ffffff75,inset 0 -2px 0 #0759ad,0 6px 0 #0756a8,0 10px 18px #001d3d42!important;color:#fff!important}
.btn3d-dark{background:linear-gradient(180deg,#173b60,#082844 55%,#061c31)!important;border:1px solid #dbe9f5!important;box-shadow:inset 0 2px 0 #ffffff45,inset 0 -2px 0 #020d18,0 6px 0 #03111e,0 10px 18px #00132645!important;color:#fff!important}
.btn3d:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn3d:active{transform:translateY(5px);box-shadow:inset 0 1px 0 #ffffff55,0 1px 0 #032e1b,0 4px 8px #00152b30!important}
.wa3d-icon{width:30px;height:30px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #00341e55;flex:0 0 30px}
.wa3d-icon img{width:28px!important;height:28px!important;display:block;object-fit:contain!important}
.btn3d .arr{font-size:20px;line-height:1}
.hero .btn3d{min-height:48px;padding:11px 17px}
.radar .btn3d{min-height:48px;padding:11px 17px}
header .btn3d{min-height:46px;padding:9px 14px}
@media(max-width:1100px) and (min-width:901px){
 header{padding-left:2.5%;padding-right:2.5%;gap:12px}
 header .brand{flex-basis:170px}
 header .brand img{width:170px}
 header nav{gap:13px;font-size:12px}
 header .top{min-width:142px;padding:8px 11px}
}
@media(max-width:900px){
 header .brand{flex:0 0 auto}
 header .brand img{width:190px;height:64px}
 header .top{display:none!important}
 .wa3d-icon{width:28px;height:28px;flex-basis:28px}
 .wa3d-icon img{width:26px!important;height:26px!important}
}
@media(max-width:520px){
 header .brand img{width:168px;height:60px}
 .hero .btn3d,.radar .btn3d{width:auto;max-width:100%}
}

/* === V4.5 phone-style Tender Radar example === */
.radar-example{padding:42px 5.5%;display:grid;grid-template-columns:.85fr minmax(300px,390px) .85fr;gap:42px;align-items:center;background:linear-gradient(135deg,#f4f9fd,#eaf3fa);border-bottom:1px solid #dce6ef}.radar-example h2{font-size:34px;line-height:1.08;margin:9px 0 14px}.radar-example p{line-height:1.55;color:#536474}.example-head .cap{color:#0879ef}.example-copy h3{font-size:24px;margin:0 0 9px}.example-copy .btn3d{margin-top:13px}.phone-shell{width:100%;max-width:390px;margin:auto;background:#111820;border:3px solid #263441;border-radius:38px;padding:10px;box-shadow:0 22px 45px #00172d38,0 5px 0 #06101a;position:relative}.phone-notch{position:absolute;z-index:4;top:10px;left:50%;transform:translateX(-50%);width:105px;height:20px;border-radius:0 0 14px 14px;background:#111820}.phone-screen{height:610px;border-radius:28px;overflow:hidden;background:#e7dfd2;display:flex;flex-direction:column}.wa-phone-head{height:70px;background:#075e54;color:#fff;padding:20px 12px 8px;display:flex;align-items:center;gap:8px;flex:0 0 auto}.wa-phone-head .back{font-size:28px;line-height:1}.avatar{width:34px;height:34px;border-radius:50%;background:#fff;color:#075e54;font-weight:900;display:grid;place-items:center;font-size:12px}.wa-phone-head div{display:flex;flex-direction:column;min-width:0}.wa-phone-head b{font-size:13px;white-space:nowrap}.wa-phone-head small{font-size:9px;opacity:.8}.dots{margin-left:auto;font-size:23px}.wa-chat{flex:1;overflow-y:auto;padding:13px 10px 18px;background:linear-gradient(#eee8dcdd,#eee8dcdd),repeating-linear-gradient(45deg,#e6ded0 0 8px,#f0eadf 8px 16px);scrollbar-width:thin}.wa-bubble{position:relative;background:#fff;border-radius:4px 10px 10px 10px;padding:12px 12px 24px;color:#172534;font-size:11.5px;line-height:1.38;box-shadow:0 1px 2px #0003}.wa-bubble:before{content:"";position:absolute;left:-7px;top:0;border-top:8px solid #fff;border-left:8px solid transparent}.wa-bubble b{font-weight:800}.msg-time{position:absolute;right:8px;bottom:5px;font-size:9px;color:#7b858b}.wa-input{height:49px;background:#f3f3f3;padding:7px 9px;display:flex;align-items:center;gap:8px;flex:0 0 auto}.wa-input div{flex:1;background:#fff;border-radius:18px;padding:8px 13px;color:#8b9298;font-size:11px}.wa-input span{font-size:16px}.example-copy .btn3d{padding:11px 16px}
@media(max-width:900px){.radar-example{grid-template-columns:1fr 1fr;gap:28px}.example-head{grid-column:1/-1}.radar-example h2{font-size:30px}.phone-shell{max-width:360px}}
@media(max-width:620px){.radar-example{grid-template-columns:1fr;padding:32px 6%;gap:24px}.example-head{grid-column:auto}.radar-example h2{font-size:28px}.phone-shell{max-width:340px;border-radius:34px}.phone-screen{height:570px;border-radius:25px}.example-copy{text-align:center}.example-copy .btn3d{margin-left:auto;margin-right:auto}}

/* V4.7: Tender Radar master-image section. Phone example below remains untouched. */
.radar-master{position:relative;width:100%;background:#052b55;overflow:hidden;line-height:0}
.radar-master>img{display:block;width:100%;height:auto}
.radar-hotspot{position:absolute;display:block;z-index:3}
.radar-hotspot.subscribe{left:5.1%;top:74.1%;width:24.5%;height:17.5%}
.radar-hotspot.learn{left:31.0%;top:74.1%;width:11.5%;height:17.5%}
@media(max-width:620px){
  /* Mobile: keep the complete Tender Radar artwork visible; scale proportionally only. */
  .radar-master{overflow:hidden}
  .radar-master>img{display:block;width:100%;max-width:100%;height:auto;transform:none;object-fit:contain}
  .radar-hotspot.subscribe{left:5.1%;top:74.1%;width:24.5%;height:17.5%}
  .radar-hotspot.learn{left:31.0%;top:74.1%;width:11.5%;height:17.5%}
}


/* V4.9 FINAL — Tender Radar example only. Desktop composition is the master.
   On tablet/mobile the entire section (text, phone, button and spacing) scales together. */
@media (max-width:900px){
  .radar-example{
    width:1280px; max-width:none;
    grid-template-columns:.85fr 390px .85fr;
    gap:42px; align-items:center; padding:42px 70px;
  }
  .radar-example .example-head{grid-column:auto}
  .radar-example h2{font-size:34px;line-height:1.08}
  .radar-example .phone-shell{width:390px;max-width:390px;border-radius:38px}
  .radar-example .phone-screen{height:610px;border-radius:28px}
  .radar-example .example-copy{text-align:left}
  .radar-example .example-copy .btn3d{margin-left:0;margin-right:0}
}

/* === V5.0 LOCKED mobile header ===
   Mobile only: logo + WhatsApp CTA + hamburger. Desktop remains untouched. */
@media(max-width:900px){
  header{display:flex;align-items:center;gap:10px;padding-left:5%;padding-right:5%}
  header .brand{margin-right:auto;min-width:0}
  header .top{display:inline-flex!important;order:2;min-width:0!important;padding:8px 11px!important;min-height:42px!important;border-radius:12px!important;font-size:13px}
  header .top .wa3d-icon{width:25px;height:25px;flex-basis:25px}
  header .top .wa3d-icon img{width:23px!important;height:23px!important}
  header .hamb{display:block;order:3;flex:0 0 auto;font-size:30px;padding:4px 2px}
}
@media(max-width:520px){
  header{height:76px;padding-left:4%;padding-right:4%;gap:8px}
  header .brand img{width:128px;height:56px}
  header .top{padding:7px 9px!important;font-size:11.5px;gap:6px!important;min-height:39px!important}
  header .top .wa3d-icon{width:23px;height:23px;flex-basis:23px}
  header .top .wa3d-icon img{width:21px!important;height:21px!important}
  header .hamb{font-size:29px}
}
@media(max-width:380px){
  header .brand img{width:112px}
  header .top{font-size:10.5px;padding:6px 7px!important}
}

/* === V5.2 MOBILE REPAIR: scoped proportional canvases === */
#radar-example-frame{
  width:100%;
}

@media(max-width:900px){
  /* Mobile header: logo left, independent CTA centred, menu right. */
  header{position:sticky}
  header .brand{margin-right:auto;min-width:0;position:relative;z-index:1}
  header .top{
    position:absolute;
    top:50%;
    left:50%;
    margin:0!important;
    z-index:3;
    transform:translate(-50%,-50%);
  }
  header .top.btn3d:hover{transform:translate(-50%,calc(-50% - 2px))}
  header .top.btn3d:active{transform:translate(-50%,calc(-50% + 5px))}
  header .hamb{
    margin-left:auto;
    position:relative;
    z-index:2;
    width:36px;
    height:44px;
    padding:0;
    font-size:0;
  }
  header .hamb::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:26px;
    height:3px;
    border-radius:2px;
    background:#111;
    box-shadow:0 -8px 0 #111,0 8px 0 #111;
    transform:translate(-50%,-50%);
  }

  /* Tender Radar remains one complete proportional artwork. */
  #radar.radar-master{width:100%;max-width:100%;overflow:hidden}
  #radar.radar-master>img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}

  /* Contoh Makluman: the 1280px desktop composition scales as one canvas. */
  #radar-example-frame{
    position:relative;
    width:100%;
    overflow:hidden;
    background:linear-gradient(135deg,#f4f9fd,#eaf3fa);
  }
  #radar-example{margin:0!important;transform-origin:top left}
}

@media(max-width:430px){
  header .brand img{width:104px;height:56px}
}

@media(max-width:380px){
  header .brand img{width:96px}
}

/* === V5.3 PHONE COMPOSITION — scoped to Tender Radar only === */
#radar .radar-mobile{display:none}

@media(max-width:620px){
  /* Keep the untouched master artwork for desktop/tablet and use a dedicated
     phone composition only at actual phone widths. */
  #radar.radar-master{height:auto;background:#031c38;line-height:normal}
  #radar.radar-master>.radar-desktop-art,
  #radar.radar-master>.radar-hotspot{display:none}
  #radar .radar-mobile{
    position:relative;
    display:block;
    width:100%;
    height:86.5vw;
    min-height:302px;
    max-height:372px;
    overflow:hidden;
    color:#fff;
    background-color:#042b56;
    background-image:url('assets/tender-radar-master.png');
    background-repeat:no-repeat;
    background-position:45% center;
    background-size:auto 100%;
  }
  #radar .radar-mobile::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(90deg,rgba(2,16,35,.995) 0%,rgba(3,27,56,.99) 44%,rgba(3,30,61,.76) 57%,rgba(2,28,58,.06) 78%);
    pointer-events:none;
  }
  #radar .radar-mobile-copy{
    position:absolute;
    z-index:1;
    top:5.5%;
    left:4.2%;
    width:52%;
    text-shadow:0 1px 3px #00152b;
  }
  #radar .radar-mobile-kicker{
    margin-bottom:4px;
    font-size:clamp(7px,2vw,9px);
    font-weight:800;
    letter-spacing:.31em;
  }
  #radar .radar-mobile-copy h2{
    margin:0 0 8px;
    color:#fff;
    font-size:clamp(29px,8.3vw,36px);
    line-height:.88;
    letter-spacing:-.035em;
  }
  #radar .radar-mobile-copy h2 span{display:block;color:#43a8ff}
  #radar .radar-mobile-copy h3{
    margin:0 0 7px;
    max-width:190px;
    color:#fff;
    font-size:clamp(10px,2.65vw,12px);
    line-height:1.18;
  }
  #radar .radar-mobile-copy p{
    margin:0;
    max-width:188px;
    color:#f4f8fc;
    font-size:clamp(8px,2.15vw,10px);
    line-height:1.28;
  }
  #radar .radar-mobile-features{
    position:absolute;
    z-index:2;
    left:3.5%;
    right:3.5%;
    bottom:18.6%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    padding:6px 4px;
    background:linear-gradient(90deg,rgba(2,28,57,.85),rgba(3,47,91,.83));
    border-top:1px solid rgba(255,255,255,.16);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  #radar .radar-mobile-feature{
    min-width:0;
    display:flex;
    align-items:center;
    gap:4px;
    color:#fff;
  }
  #radar .radar-mobile-feature small{
    display:block;
    min-width:0;
    font-size:clamp(5.7px,1.55vw,7px);
    font-weight:700;
    line-height:1.13;
  }
  #radar .radar-mobile-icon{
    position:relative;
    width:clamp(23px,6.6vw,29px);
    height:clamp(23px,6.6vw,29px);
    flex:0 0 clamp(23px,6.6vw,29px);
    border:1px solid #31a8ff;
    border-radius:6px;
    background:linear-gradient(145deg,#087fd4,#044a8b);
    box-shadow:0 0 8px #168ff188;
  }
  #radar .radar-mobile-icon.icon-search::before{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    left:6px;
    top:5px;
    border:2px solid #fff;
    border-radius:50%;
  }
  #radar .radar-mobile-icon.icon-search::after{
    content:"";
    position:absolute;
    width:8px;
    height:2px;
    left:14px;
    top:16px;
    border-radius:2px;
    background:#fff;
    transform:rotate(45deg);
  }
  #radar .radar-mobile-icon.icon-pin{border-color:#26d3c3;background:linear-gradient(145deg,#0d968a,#075a65);box-shadow:0 0 8px #18cfba77}
  #radar .radar-mobile-icon.icon-pin::before{
    content:"";
    position:absolute;
    left:7px;
    top:4px;
    width:9px;
    height:13px;
    border:2px solid #fff;
    border-radius:9px 9px 9px 0;
    transform:rotate(-45deg);
  }
  #radar .radar-mobile-icon.icon-pin::after{
    content:"";
    position:absolute;
    left:12px;
    top:8px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#fff;
  }
  #radar .radar-mobile-icon.icon-doc{border-color:#ffd132;background:linear-gradient(145deg,#d79500,#8e5700);box-shadow:0 0 8px #ffd12977}
  #radar .radar-mobile-icon.icon-doc::before{
    content:"";
    position:absolute;
    left:7px;
    top:5px;
    width:12px;
    height:15px;
    border:2px solid #fff;
    border-radius:2px;
  }
  #radar .radar-mobile-icon.icon-doc::after{
    content:"";
    position:absolute;
    left:10px;
    top:11px;
    width:8px;
    height:2px;
    background:#fff;
    box-shadow:0 4px 0 #fff;
  }
  #radar .radar-mobile-icon.icon-wa{border-color:#36ee83;background:linear-gradient(145deg,#17ca65,#078d43);box-shadow:0 0 8px #20e87577;display:grid;place-items:center}
  #radar .radar-mobile-icon.icon-wa img{display:block;width:82%;height:82%;object-fit:contain}
  #radar .radar-mobile-actions{
    position:absolute;
    z-index:2;
    left:4.2%;
    right:4.2%;
    bottom:4.3%;
    height:11.5%;
    display:grid;
    grid-template-columns:1.22fr .9fr;
    gap:10px;
  }
  #radar .radar-mobile-actions a{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    color:#fff;
    font-size:clamp(9.5px,2.7vw,12px);
    font-weight:800;
    line-height:1.05;
    text-align:center;
  }
  #radar .radar-mobile-subscribe{
    gap:6px;
    padding:0 8px;
    background:linear-gradient(180deg,#19dc68,#08a94a);
    border:1px solid #28e779;
    box-shadow:inset 0 1px 0 #ffffff66,0 3px 0 #057a37,0 4px 9px #001b10aa;
  }
  #radar .radar-mobile-subscribe img{display:block;width:22px;height:22px;object-fit:contain}
  #radar .radar-mobile-subscribe b{font-size:15px}
  #radar .radar-mobile-learn{
    padding:0 7px;
    border:1px solid rgba(255,255,255,.92);
    background:rgba(2,27,56,.7);
    box-shadow:inset 0 1px 0 #ffffff33,0 3px 8px #00132677;
  }

  /* The target phone layout is vertical: heading, phone, explanatory copy. */
  #radar-example-frame{
    height:auto!important;
    overflow:hidden;
    background:linear-gradient(135deg,#f4f9fd,#eaf3fa);
  }
  #radar-example{
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    transform-origin:initial!important;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:24px 8% 25px;
  }
  #radar-example .example-head{
    width:100%;
    max-width:360px;
    text-align:center;
  }
  #radar-example .example-head .cap{
    font-size:8px;
    letter-spacing:3px;
  }
  #radar-example .example-head h2{
    margin:7px auto 8px;
    max-width:360px;
    font-size:clamp(22px,6.1vw,26px);
    line-height:1.06;
  }
  #radar-example .example-head h2 em{display:block}
  #radar-example .example-head p{
    margin:0 auto;
    max-width:330px;
    font-size:11px;
    line-height:1.38;
  }
  #radar-example .phone-shell{
    width:126px;
    max-width:126px;
    margin:0 auto;
    padding:5px;
    border-width:2px;
    border-radius:20px;
    box-shadow:0 11px 24px #00172d38,0 3px 0 #06101a;
  }
  #radar-example .phone-notch{
    top:5px;
    width:46px;
    height:9px;
    border-radius:0 0 7px 7px;
  }
  #radar-example .phone-screen{height:202px;border-radius:14px}
  #radar-example .wa-phone-head{
    height:30px;
    padding:9px 5px 3px;
    gap:3px;
  }
  #radar-example .wa-phone-head .back{font-size:15px}
  #radar-example .avatar{width:15px;height:15px;font-size:5px}
  #radar-example .wa-phone-head b{font-size:5.2px}
  #radar-example .wa-phone-head small{font-size:4.5px}
  #radar-example .dots{font-size:12px}
  #radar-example .wa-chat{padding:6px 5px 8px}
  #radar-example .wa-bubble{
    padding:6px 6px 12px;
    font-size:4.3px;
    line-height:1.31;
    border-radius:3px 6px 6px 6px;
  }
  #radar-example .wa-bubble:before{left:-4px;border-top-width:5px;border-left-width:5px}
  #radar-example .msg-time{right:4px;bottom:3px;font-size:4.5px}
  #radar-example .wa-input{height:21px;padding:3px 4px;gap:3px}
  #radar-example .wa-input div{padding:3px 5px;font-size:4.8px}
  #radar-example .wa-input span{font-size:7px}
  #radar-example .example-copy{
    width:100%;
    max-width:350px;
    text-align:center;
  }
  #radar-example .example-copy h3{margin:0 0 7px;font-size:14px;line-height:1.2}
  #radar-example .example-copy p{margin:0 auto;font-size:10.5px;line-height:1.38}
  #radar-example .example-copy .btn3d{
    min-height:39px;
    margin:14px auto 0;
    padding:8px 13px;
    font-size:11.5px;
    border-radius:10px!important;
  }
  #radar-example .example-copy .wa3d-icon{width:23px;height:23px;flex-basis:23px}
  #radar-example .example-copy .wa3d-icon img{width:21px!important;height:21px!important}
}

@media(max-width:370px){
  #radar .radar-mobile-copy p{font-size:7.6px}
  #radar .radar-mobile-features{left:2.7%;right:2.7%;gap:2px}
  #radar .radar-mobile-feature{gap:3px}
  #radar .radar-mobile-actions{gap:7px}
}

/* V5.4 hero image trial — isolated to the main hero only. */
#utama.hero{background-image:url('assets/hero-v5.jpg')}
@media(max-width:900px){
  #utama.hero{background-position:75% center}
}

/* V5.5 compact phone hero — scoped to #utama only. */
@media(max-width:620px){
  #utama.hero{
    height:92vw;
    min-height:350px;
    max-height:400px;
    background-position:75% center;
  }
  #utama .heroShade{
    background:linear-gradient(90deg,rgba(3,21,47,.96) 0%,rgba(4,37,72,.78) 57%,rgba(3,29,57,.34) 100%);
  }
  #utama .heroText{
    width:100%;
    height:100%;
    padding:30px 5.5% 28px;
    background:transparent;
  }
  #utama .cap{
    max-width:340px;
    font-size:9px;
    line-height:1.35;
    letter-spacing:3px;
  }
  #utama h1{
    max-width:360px;
    margin:12px 0 14px;
    font-size:clamp(33px,9.3vw,39px);
    line-height:.94;
    letter-spacing:-1px;
  }
  #utama p{
    max-width:365px;
    margin:0;
    font-size:16px;
    line-height:1.4;
  }
  #utama .buttons{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:10px;
    margin-top:18px;
  }
  #utama .buttons .btn3d,
  #utama .buttons .outline{
    width:auto;
    min-height:42px;
    padding:8px 11px;
    border-radius:10px!important;
    font-size:13px;
  }
  #utama .buttons .wa3d-icon{
    width:24px;
    height:24px;
    flex-basis:24px;
  }
  #utama .buttons .wa3d-icon img{
    width:22px!important;
    height:22px!important;
  }
  #utama .buttons .arr{font-size:17px}
}

@media(max-width:370px){
  #utama .heroText{padding-left:5%;padding-right:5%}
  #utama h1{font-size:32px}
  #utama p{font-size:15px}
  #utama .buttons{gap:7px}
  #utama .buttons .btn3d,
  #utama .buttons .outline{padding-left:9px;padding-right:9px;font-size:12px}
}

/* === V5.6 MOBILE PORTRAIT HERO ===
   Main hero only. Desktop remains unchanged; Tender Radar remains LOCKED.
   On phones the landscape hero becomes a portrait composition and all copy/CTAs
   scale with the viewport instead of behaving like a cropped desktop banner. */
@media(max-width:620px){
  #utama.hero{
    height:clamp(560px,156vw,720px);
    min-height:0;
    max-height:none;
    background-image:url('assets/hero-v5.jpg');
    background-size:auto 100%;
    background-position:68% center;
    background-repeat:no-repeat;
  }
  #utama .heroShade{
    background:linear-gradient(180deg,
      rgba(3,21,47,.94) 0%,
      rgba(3,28,55,.78) 40%,
      rgba(3,29,57,.40) 70%,
      rgba(3,21,47,.20) 100%);
  }
  #utama .heroText{
    width:100%;
    height:auto;
    padding:clamp(30px,8vw,44px) 5.5% 24px;
    background:transparent;
  }
  #utama .cap{
    max-width:92%;
    font-size:clamp(8px,2.35vw,10px);
    line-height:1.35;
    letter-spacing:clamp(2px,.75vw,3px);
  }
  #utama h1{
    max-width:94%;
    margin:12px 0 14px;
    font-size:clamp(31px,9.4vw,42px);
    line-height:.95;
    letter-spacing:-1px;
  }
  #utama p{
    max-width:92%;
    margin:0;
    font-size:clamp(13px,3.75vw,16px);
    line-height:1.42;
  }
  #utama .buttons{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:clamp(7px,2.3vw,10px);
    margin-top:18px;
  }
  #utama .buttons .btn3d,
  #utama .buttons .outline{
    width:auto;
    min-height:40px;
    padding:8px clamp(8px,2.5vw,12px);
    border-radius:10px!important;
    font-size:clamp(11px,3vw,13px);
  }
  #utama .buttons .wa3d-icon{
    width:clamp(21px,6vw,24px);
    height:clamp(21px,6vw,24px);
    flex-basis:clamp(21px,6vw,24px);
  }
  #utama .buttons .wa3d-icon img{
    width:calc(clamp(21px,6vw,24px) - 2px)!important;
    height:calc(clamp(21px,6vw,24px) - 2px)!important;
  }
}
@media(max-width:370px){
  #utama.hero{height:158vw;background-position:69% center}
  #utama .heroText{padding-top:27px}
}

/* V5.7 — exact portrait hero supplied by user; mobile only. */
@media(max-width:520px){
  #utama.hero{
    background-image:url('assets/hero-mobile-portrait.png');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    height:158vw;
  }
}

/* === V5.8 PREMIUM TOP SECTION — SCOPED ===
   Header, hero and the four-category bar only. All approved sections below
   this block, including Tender Radar, keep their existing layout and logic. */
@font-face{
  font-family:"NexForge Wordmark";
  src:url('assets/montserrat-extrabold.woff2') format('woff2');
  font-style:normal;
  font-weight:800;
  font-display:swap;
}
:root{
  --nf-navy:#071b33;
  --nf-navy-deep:#031224;
  --nf-navy-soft:#0d2d50;
  --nf-orange:#f47a20;
  --nf-orange-dark:#d85d0b;
  --nf-green:#10b75a;
}

.site-header{
  width:100%;
  height:86px;
  display:flex;
  align-items:center;
  gap:clamp(18px,2vw,32px);
  padding:0 clamp(24px,4vw,68px);
  background:#fff;
  border-bottom:1px solid #dfe5eb;
  box-shadow:0 5px 20px rgba(3,18,36,.08);
}
.site-header .brand-wordmark{
  flex:0 0 auto;
  min-width:204px;
  margin:0 auto 0 0;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  overflow:visible;
  line-height:1;
}
.site-header .brand-wordmark .brand-wordmark-image{display:block;width:204px;height:auto;max-width:none;object-fit:contain}
.site-header nav{display:flex;align-items:center;gap:clamp(15px,1.65vw,28px);white-space:nowrap;color:#26384a;font-size:14px;font-weight:650}
.site-header nav>a,.site-header .dd>button{position:relative;padding:31px 0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.site-header nav>a::after,.site-header .dd>button::after{content:"";position:absolute;left:0;right:0;bottom:19px;height:2px;background:var(--nf-orange);transform:scaleX(0);transition:transform .18s ease}
.site-header nav>a:hover::after,.site-header nav>a:focus-visible::after,.site-header .dd>button:hover::after,.site-header .dd>button:focus-visible::after,.site-header nav>.active::after{transform:scaleX(1)}
.site-header nav>.active{padding:31px 0;color:var(--nf-navy);border:0}
.site-header .dd>button{color:#26384a}
.site-header .drop{top:67px;left:-24px;border:1px solid #e4e9ee;border-radius:10px;box-shadow:0 18px 45px rgba(3,18,36,.16)}
.site-header .drop a:hover{background:#fff5ed;color:var(--nf-orange-dark)}
.site-header .radarlink{color:var(--nf-orange-dark)}
.site-header .header-whatsapp{
  flex:0 0 auto;
  min-width:151px;
  min-height:44px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid #079247;
  border-radius:999px;
  color:#fff;
  background:var(--nf-green);
  box-shadow:0 7px 16px rgba(16,183,90,.22);
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.site-header .header-whatsapp:hover{transform:translateY(-1px);background:#0da651;box-shadow:0 9px 20px rgba(16,183,90,.28)}
.site-header .header-whatsapp:focus-visible,.top-hero-actions a:focus-visible,.site-header .hamb:focus-visible{outline:3px solid rgba(244,122,32,.42);outline-offset:3px}
.site-header .header-whatsapp .wa3d-icon{width:27px;height:27px;flex-basis:27px;background:transparent;box-shadow:none}
.site-header .header-whatsapp .wa3d-icon img{width:25px!important;height:25px!important}
.site-header .hamb{display:none}

#utama.top-hero{
  position:relative;
  isolation:isolate;
  height:550px;
  min-height:550px;
  overflow:hidden;
  color:#fff;
  background-color:var(--nf-navy-deep);
  background-image:url('assets/hero-v5.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center right;
}
#utama.top-hero .heroShade{
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(2,14,29,.97) 0%,rgba(4,26,50,.93) 34%,rgba(5,32,61,.58) 57%,rgba(3,21,42,.08) 78%);
}
#utama .top-hero-content{
  width:min(760px,62%);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px 0 52px clamp(34px,6vw,96px);
  background:transparent;
}
#utama .top-hero-content .cap{
  position:relative;
  width:max-content;
  max-width:100%;
  padding-left:42px;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.28em;
  line-height:1.4;
}
#utama .top-hero-content .cap::before{content:"";position:absolute;left:0;top:50%;width:27px;height:2px;background:var(--nf-orange);transform:translateY(-50%)}
#utama .top-hero-content h1{
  margin:19px 0 18px;
  color:#fff;
  font-size:clamp(47px,4.6vw,69px);
  line-height:.91;
  letter-spacing:-.035em;
  text-wrap:balance;
}
#utama .top-hero-content h1>span{display:block;color:#fff}
#utama .top-hero-content h1>.accent{color:var(--nf-orange)}
#utama .top-hero-content p{max-width:650px;margin:0;color:#e5ebf2;font-size:17px;line-height:1.58;text-shadow:0 1px 2px rgba(0,0,0,.24)}
#utama .top-hero-actions{display:flex;flex-direction:row;align-items:center;gap:13px;margin-top:27px}
#utama .top-hero-actions a{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:7px;font-size:14px;font-weight:800;letter-spacing:.01em;transition:transform .18s ease,background .18s ease,border-color .18s ease}
#utama .top-hero-actions a:hover{transform:translateY(-2px)}
#utama .hero-primary{color:#fff;background:var(--nf-orange);border:1px solid var(--nf-orange-dark);box-shadow:0 8px 20px rgba(244,122,32,.25)}
#utama .hero-primary:hover{background:#ff862c}
#utama .hero-secondary{color:#fff;background:rgba(3,18,36,.56);border:1.5px solid rgba(255,255,255,.86)}
#utama .hero-secondary:hover{background:rgba(3,18,36,.82);border-color:#fff}

.top-categories{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  min-height:112px;
  padding:0 clamp(24px,4.8vw,78px);
  color:#fff;
  background:var(--nf-navy);
  border-top:3px solid var(--nf-orange);
}
.top-category{min-width:0;display:flex;align-items:center;justify-content:center;gap:15px;padding:24px 25px}
.top-category+.top-category{border-left:1px solid rgba(255,255,255,.14)}
.top-category svg{width:38px;height:38px;flex:0 0 38px;fill:none;stroke:var(--nf-orange);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.top-category div{min-width:0}
.top-category h2{margin:0 0 6px;color:#fff;font-size:18px;line-height:1.05}
.top-category p{margin:0;color:#aebccc;font-size:12.5px;line-height:1.25;white-space:nowrap}

@media(max-width:1180px) and (min-width:901px){
  .site-header{gap:14px;padding-left:28px;padding-right:28px}
  .site-header .brand-wordmark{min-width:174px}
  .site-header .brand-wordmark .brand-wordmark-image{width:174px;height:auto}
  .site-header nav{gap:13px;font-size:12.5px}
  .site-header .header-whatsapp{min-width:136px;padding-left:11px;padding-right:11px;font-size:12.5px}
  #utama .top-hero-content{width:65%;padding-left:6%}
  .top-categories{padding-left:18px;padding-right:18px}
  .top-category{padding-left:16px;padding-right:16px;gap:11px}
  .top-category svg{width:33px;height:33px;flex-basis:33px}
  .top-category h2{font-size:16px}
  .top-category p{font-size:11px}
}

@media(max-width:900px){
  .site-header{height:72px;gap:9px;padding:0 4%;}
  .site-header .brand-wordmark{position:static;z-index:auto;min-width:0;margin:0;flex:0 1 auto}
  .site-header .brand-wordmark .brand-wordmark-image{width:clamp(105px,28.4vw,145px);height:auto;max-width:100%}
  .site-header .header-whatsapp{
    position:static;
    order:2;
    min-width:42px!important;
    width:42px;
    min-height:42px!important;
    height:42px;
    margin:0 auto 0 0!important;
    padding:6px!important;
    border-radius:50%;
    transform:none;
  }
  .site-header .header-whatsapp:hover{transform:translateY(-1px)}
  .site-header .header-whatsapp .wa-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .site-header .header-whatsapp .wa3d-icon{width:28px;height:28px;flex-basis:28px;background:transparent}
  .site-header .header-whatsapp .wa3d-icon img{width:28px!important;height:28px!important}
  .site-header .hamb{display:block;position:relative;z-index:auto;order:3;flex:0 0 42px;width:42px;height:42px;margin:0;padding:0;border:1px solid #dbe2e8;border-radius:9px;background:#fff;font-size:0}
  .site-header .hamb::before,.site-header .hamb::after,.site-header .hamb span::before{content:"";position:absolute;left:10px;width:20px;height:2px;border-radius:2px;background:var(--nf-navy);box-shadow:none;transition:transform .18s ease,top .18s ease,opacity .18s ease}
  .site-header .hamb::before{top:13px;transform:none}
  .site-header .hamb span::before{top:20px}
  .site-header .hamb::after{top:27px}
  body.open .site-header .hamb::before{top:20px;transform:rotate(45deg)}
  body.open .site-header .hamb span::before{opacity:0}
  body.open .site-header .hamb::after{top:20px;transform:rotate(-45deg)}
  .site-header nav{display:none;position:absolute;top:72px;left:0;right:0;z-index:60;max-height:calc(100vh - 72px);overflow:auto;flex-direction:column;align-items:stretch;gap:0;padding:12px 5% 18px;background:#fff;border-top:1px solid #e5eaef;box-shadow:0 16px 28px rgba(3,18,36,.16);font-size:14px}
  body.open .site-header nav{display:flex}
  .site-header nav>a,.site-header nav>.active,.site-header .dd>button{width:100%;padding:12px 2px;text-align:left;border-bottom:1px solid #eef1f4}
  .site-header nav>a::after,.site-header .dd>button::after{display:none}
  .site-header .drop{position:static;width:100%;margin:6px 0 8px;border:0;box-shadow:none;background:#f5f7f9}

  #utama.top-hero{height:575px;min-height:575px;background-position:70% center}
  #utama.top-hero .heroShade{background:linear-gradient(90deg,rgba(2,14,29,.97) 0%,rgba(3,24,48,.87) 49%,rgba(4,31,60,.36) 100%)}
  #utama .top-hero-content{width:76%;height:100%;justify-content:center;padding:46px 0 48px 6%}
  #utama .top-hero-content h1{font-size:clamp(43px,7.5vw,60px)}
  #utama .top-hero-content p{font-size:16px}
  .top-categories{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 4%}
  .top-category{justify-content:flex-start;padding:20px 18px}
  .top-category:nth-child(odd){border-left:0}
  .top-category:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}

@media(max-width:620px){
  .site-header{height:68px;padding:0 4%;gap:8px}
  .site-header nav{top:68px;max-height:calc(100vh - 68px)}
  .site-header .header-whatsapp{width:38px;height:38px;min-width:38px!important;min-height:38px!important}
  .site-header .header-whatsapp .wa3d-icon{width:25px;height:25px;flex-basis:25px}
  .site-header .header-whatsapp .wa3d-icon img{width:25px!important;height:25px!important}
  .site-header .hamb{width:38px;height:38px;flex-basis:38px}
  .site-header .hamb::before,.site-header .hamb::after,.site-header .hamb span::before{left:9px;width:18px}
  .site-header .hamb::before{top:11px}.site-header .hamb span::before{top:18px}.site-header .hamb::after{top:25px}
  body.open .site-header .hamb::before,body.open .site-header .hamb::after{top:18px}

  #utama.top-hero{
    height:clamp(535px,148vw,660px);
    min-height:0;
    background-image:url('assets/hero-mobile-portrait.png');
    background-size:cover;
    background-position:center center;
  }
  #utama.top-hero .heroShade{
    background:linear-gradient(180deg,rgba(2,14,29,.98) 0%,rgba(3,23,46,.88) 34%,rgba(3,23,46,.48) 55%,rgba(3,18,36,.04) 82%),linear-gradient(90deg,rgba(3,18,36,.44),transparent 78%);
  }
  #utama .top-hero-content{
    width:100%;
    height:auto;
    justify-content:flex-start;
    padding:clamp(27px,7.5vw,38px) 5% 18px;
  }
  #utama .top-hero-content .cap{padding-left:30px;font-size:clamp(7.5px,2.05vw,9px);letter-spacing:.19em;white-space:nowrap}
  #utama .top-hero-content .cap::before{width:20px}
  #utama .top-hero-content h1{max-width:100%;margin:13px 0 14px;font-size:clamp(34px,9.45vw,42px);line-height:.92;letter-spacing:-.03em}
  #utama .top-hero-content p{max-width:94%;font-size:clamp(12.8px,3.55vw,15px);line-height:1.43}
  #utama .top-hero-actions{flex-direction:row;align-items:stretch;gap:8px;margin-top:18px}
  #utama .top-hero-actions a{min-height:42px;padding:9px clamp(10px,3vw,14px);font-size:clamp(11px,3vw,13px);border-radius:6px}

  .top-categories{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;padding:0 3.5%}
  .top-category{min-height:100px;gap:10px;padding:17px 9px}
  .top-category svg{width:29px;height:29px;flex-basis:29px;stroke-width:2.3}
  .top-category h2{margin-bottom:5px;font-size:clamp(14px,4vw,16px)}
  .top-category p{font-size:clamp(8.5px,2.45vw,10.5px);white-space:normal}
}

@media(max-width:370px){
  .site-header{gap:6px;padding-left:3.4%;padding-right:3.4%}
  .site-header .brand-wordmark .brand-wordmark-image{width:105px;height:auto}
  #utama .top-hero-content{padding-left:4.5%;padding-right:4.5%}
  #utama .top-hero-content h1{font-size:33px}
  #utama .top-hero-content p{font-size:12.5px}
  #utama .top-hero-actions{gap:6px}
  #utama .top-hero-actions a{padding-left:9px;padding-right:9px;font-size:10.5px}
  .top-category{padding-left:7px;padding-right:7px;gap:7px}
  .top-category svg{width:27px;height:27px;flex-basis:27px}
}

/* === V5.8.4 APPROVED MOBILE HEADER MOCKUP ===
   Exact approved composition: dominant wordmark, short icon-only WhatsApp bar,
   and right-aligned hamburger. Hero and every section below remain unchanged. */
@media(max-width:620px){
  .site-header{
    height:68px;
    gap:clamp(10px,3vw,12px);
    padding:0 4%;
  }
  .site-header nav{top:68px;max-height:calc(100vh - 68px)}
  .site-header .brand-wordmark{
    flex:0 0 auto;
    min-width:0;
    margin:0;
  }
  .site-header .brand-wordmark .brand-wordmark-image{
    width:clamp(165px,47.5vw,185px);
    height:auto;
    max-width:none;
  }
  .site-header .header-whatsapp{
    width:clamp(54px,14.5vw,58px);
    min-width:clamp(54px,14.5vw,58px)!important;
    height:40px;
    min-height:40px!important;
    margin:0 auto 0 0!important;
    padding:6px 12px!important;
    border-radius:10px;
  }
  .site-header .header-whatsapp .wa-label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .site-header .header-whatsapp .wa3d-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
    background:transparent;
  }
  .site-header .header-whatsapp .wa3d-icon img{
    width:28px!important;
    height:28px!important;
  }
  .site-header .hamb{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:10px;
  }
  .site-header .hamb::before,.site-header .hamb::after,.site-header .hamb span::before{
    left:10px;
    width:20px;
  }
  .site-header .hamb::before{top:12px}
  .site-header .hamb span::before{top:19px}
  .site-header .hamb::after{top:26px}
  body.open .site-header .hamb::before,body.open .site-header .hamb::after{top:19px}
}

@media(max-width:350px){
  .site-header{gap:6px;padding-left:3%;padding-right:3%}
  .site-header .brand-wordmark .brand-wordmark-image{width:160px}
  .site-header .header-whatsapp{width:52px;min-width:52px!important;padding-left:10px!important;padding-right:10px!important}
  .site-header .hamb{width:40px;height:40px;flex-basis:40px}
}