/* Homepage Meta Ads promo (Pages/Shared/_HomeMetaPromo.cshtml).
   Ported from the TR/EN/PT-BR Claude Artifacts (identical markup and CSS); class prefix hmp. */

.hmpSection{
  --navy:#1C2841; --ink:#0F1420; --orange:#F94C10; --orange-d:#D93D08; --green:#22B573; --green-d:#17835A;
  --meta:#0866FF; --line:#ECECF3; --muted-2:#7C8AA3; --r:20px;
  position:relative; overflow:hidden; isolation:isolate; background:var(--navy); color:#fff;
  font-family:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; padding:88px 0;
}
.hmpSection::before,.hmpSection::after{content:""; position:absolute; border-radius:50%; z-index:-1; pointer-events:none}
.hmpSection::before{width:720px; height:720px; right:-260px; top:-320px; background:radial-gradient(circle, rgba(8,102,255,.22) 0%, rgba(8,102,255,0) 68%)}
.hmpSection::after{width:560px; height:560px; left:-260px; bottom:-80px; background:radial-gradient(circle, rgba(249,76,16,.16) 0%, rgba(249,76,16,0) 68%)}
.hmpSection *,.hmpSection *::before,.hmpSection *::after{box-sizing:border-box}
/* layout.css sets `*{font-family:Mulish}`; keep the design font */
.hmpSection *{font-family:inherit}
.hmpWrap{max-width:1120px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:52px; align-items:center}
.hmpPill{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); border-radius:999px; padding:6px 14px 6px 10px; font-size:13px; font-weight:800; color:#fff}
.hmpPill svg{width:18px; height:18px; color:#5B9BFF}
.hmpSection h2{margin:18px 0 0; font-size:clamp(28px,3.4vw,40px); line-height:1.15; font-weight:800; letter-spacing:-.015em; color:#fff; max-width:16ch}
.hmpLede{margin:16px 0 0; color:#C3CEE1; font-size:17px; line-height:1.65; max-width:46ch}
.hmpFeats{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.hmpFeat{height:100%; display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:14px}
.hmpFeat i{flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center}
.hmpFeat i svg{width:19px; height:19px}
.hmpFeat i.hmpIcoS{background:rgba(91,155,255,.16); color:#7FB0FF}
.hmpFeat i.hmpIcoF{background:rgba(249,76,16,.16); color:#FF9A70}
.hmpFeat i.hmpIcoL{background:rgba(34,181,115,.16); color:#4FD69A}
.hmpFeat i.hmpIcoB{background:rgba(167,139,250,.16); color:#C4B5FD}
.hmpFeat b{display:block; font-size:15px; font-weight:800; line-height:1.3}
.hmpFeat span{display:block; margin-top:3px; font-size:13.5px; line-height:1.45; color:#B9C2D2}
.hmpActs{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hmpBtn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:13px 20px; border-radius:10px; font-size:16px; font-weight:800; text-decoration:none; transition:background .15s ease, color .15s ease}
.hmpBtn svg{width:17px; height:17px}
.hmpBtn.hmpBtnP{background:var(--orange); color:#fff}
.hmpBtn.hmpBtnP:hover{background:var(--orange-d)}
.hmpBtn.hmpBtnG{border:1.6px solid rgba(255,255,255,.35); color:#fff}
.hmpBtn.hmpBtnG:hover{background:#fff; color:var(--navy)}
.hmpBtn.hmpBtnG:hover em{background:#EDF0F6}
.hmpSection a:focus-visible{outline:2px solid #FFB08F; outline-offset:3px}

/* dashboard */
.hmpVis{position:relative; padding-top:26px; margin:0}
.hmpFloat{position:absolute; top:0; right:-6px; z-index:2; display:flex; align-items:center; gap:12px; background:#fff; color:var(--navy); border-radius:14px; padding:10px 16px 10px 10px; box-shadow:0 18px 44px rgba(0,0,0,.28)}
.hmpFloat i{width:38px; height:38px; border-radius:11px; background:var(--green); color:#fff; display:grid; place-items:center}
.hmpFloat i svg{width:20px; height:20px}
.hmpFloat small{display:block; font-size:11.5px; font-weight:700; color:var(--muted-2); line-height:1.3}
.hmpFloat b{display:block; font-size:20px; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums}
.hmpDash{background:var(--ink); border-radius:var(--r); padding:12px; box-shadow:0 30px 70px rgba(0,0,0,.35)}
.hmpBar{display:flex; align-items:center; gap:7px; padding:3px 6px 11px}
.hmpBar i{width:10px; height:10px; border-radius:50%; background:#FF5F57}
.hmpBar i:nth-child(2){background:#FEBC2E} .hmpBar i:nth-child(3){background:#28C840}
.hmpBar span{flex:1; min-width:0; margin-left:6px; background:#232C3E; border-radius:8px; color:#8FA0BE; font-size:12px; padding:6px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hmpScr{background:#F6F7FB; color:var(--navy); border-radius:14px; padding:16px}
.hmpTop{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.hmpTop .hmpBrand{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800}
.hmpTop .hmpBrand span{background:var(--meta); color:#fff; border-radius:99px; padding:2px 10px; font-size:11.5px}
.hmpLive{display:inline-flex; align-items:center; gap:6px; background:#E9F7F0; color:var(--green-d); font-size:11.5px; font-weight:800; border-radius:99px; padding:4px 10px}
.hmpLive em{width:7px; height:7px; border-radius:50%; background:var(--green)}
.hmpKpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:8px}
.hmpKpi{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.hmpKpi span{display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-2); line-height:1.3}
.hmpKpi b{display:block; margin-top:4px; font-size:21px; line-height:1.1; font-weight:800; font-variant-numeric:tabular-nums}
.hmpKpi.hmpKpiF b{color:#E5484D} .hmpKpi.hmpKpiP b{color:var(--green-d)}
.hmpKpi small{font-size:11.5px; font-weight:800; color:var(--green-d)}
.hmpTwo{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:8px}
.hmpBox{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px}
.hmpBox h4{margin:0 0 10px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:800}
.hmpBox h4 em{font-style:normal; display:inline-flex; gap:10px; font-size:11px; font-weight:700; color:var(--muted-2)}
.hmpBox h4 em span::before{content:""; display:inline-block; width:8px; height:8px; border-radius:2px; background:#2AB89A; margin-right:4px}
.hmpBox h4 em span.hmpR::before{background:#E5484D}
.hmpHrs{display:flex; align-items:flex-end; gap:4px; height:88px}
.hmpHrs div{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; background:#EDEFF5; border-radius:3px; overflow:hidden}
.hmpHrs u{display:block; background:#E5484D; text-decoration:none}
.hmpHrs s{display:block; background:#2AB89A; text-decoration:none}
.hmpPl p{display:flex; justify-content:space-between; gap:8px; margin:0 0 4px; font-size:12px; font-weight:700}
.hmpPl p b{color:var(--muted-2); font-weight:900} /* the design's UA `bolder`; layout.css forces b{700} */
.hmpPl .hmpTr{height:5px; background:#EDEFF5; border-radius:3px; margin-bottom:9px; overflow:hidden}
.hmpPl .hmpTr i{display:block; height:100%; background:var(--meta)}
.hmpPl .hmpTr.hmpLast i{background:#E5484D}
.hmpPl .hmpTr.hmpLast{margin-bottom:0}
.hmpPlat{display:flex; gap:8px; margin-top:12px}
.hmpPlat span{font-size:12px; font-weight:800; border-radius:99px; padding:4px 12px; color:#fff; background:var(--meta)}
.hmpPlat span.hmpIg{background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF)}

@media (max-width:980px){
  .hmpWrap{grid-template-columns:minmax(0,1fr); gap:44px}
  .hmpSection h2{max-width:none}
}
@media (max-width:640px){
  .hmpSection{padding:64px 0}
  .hmpWrap{padding:0 20px}
  .hmpFeats{grid-template-columns:minmax(0,1fr)}
  .hmpBtn{width:100%}
  .hmpVis{padding-top:0}
  .hmpFloat{display:none}
  .hmpDash{padding:10px}
  .hmpScr{padding:12px}
  .hmpKpi{padding:9px}
  .hmpKpi b{font-size:17px}
  .hmpKpi span{font-size:9.5px; letter-spacing:.04em}
  .hmpTwo{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.hmpSection *{transition:none !important}}