.hs { position: relative; z-index: 2; height: 80rem; display: flex; align-items: center; justify-content: center; padding: 80px; overflow: hidden; background: var(--yvo-black); }
.hs-bg { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, rgba(154, 218, 33, .35), rgba(0, 77, 67, .45) 45%, #000 85%), var(--yvo-black); pointer-events: none; }
.hs-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .1) 30%, transparent 55%, rgba(0, 0, 0, .6) 85%, #000 100%); }
.hs-wrap { position: relative; z-index: 2; width: 100%; padding: 160px 0; perspective: 1000px; }

.hs-head { max-width: 1024px; margin: 0 auto; text-align: center; will-change: transform; }
.hs-title { font-size: clamp(44px, 6.4vw, 104px); line-height: 1; letter-spacing: -.03em; font-weight: 300; color: var(--yvo-goldenrod); padding-bottom: 72px; }
.hs-title .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hs-title .li { display: inline-block; }
.hs-title .b { font-weight: 800; color: var(--yvo-yellow-green); }

.hs-card { max-width: 1024px; height: 40rem; margin: -48px auto 0; padding: 24px; border: 4px solid #6c6c6c; border-radius: 30px; background: #222;
  transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003; }

.hs-screen { position: relative; height: 100%; overflow: hidden; border-radius: 16px; container-type: inline-size;
  background:
    radial-gradient(70% 90% at 100% 60%, rgba(212, 231, 126, .95) 0%, rgba(154, 218, 33, .75) 25%, rgba(0, 87, 76, .55) 55%, transparent 80%),
    linear-gradient(90deg, #000 0%, #000 34%, #00211c 52%, #004d43 70%, #6fb81f 100%); }
.hs-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.hs-arc { position: absolute; top: 50%; width: 62cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(240, 254, 220, .28); translate: 0 -50%; }
.hs-arc.a1 { left: 4cqw; }
.hs-arc.a2 { right: 4cqw; border-color: rgba(0, 0, 0, .22); }
.hs-word { position: absolute; top: 50%; translate: 0 -50%; font-size: 6.2cqw; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.hs-word.w1 { left: 8cqw; font-weight: 300; color: var(--yvo-goldenrod); }
.hs-word.w2 { right: 8cqw; font-weight: 500; color: var(--yvo-brunswick); }
.hs-lens { position: absolute; left: 50%; top: 50%; width: 30cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 55%, rgba(0, 0, 0, .12));
  border: 1px solid rgba(240, 254, 220, .45); box-shadow: inset 0 0 40px rgba(240, 254, 220, .12), 0 30px 60px -20px rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hs-lens .logo-h { width: 60%; height: auto; }

.hs-ask { position: absolute; left: 50%; bottom: 6cqw; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 9px 16px 9px 12px; border-radius: 999px; font-size: max(12px, 1.5cqw); font-weight: 500; color: var(--yvo-goldenrod);
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(240, 254, 220, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hs-ask i { width: 8px; height: 8px; border-radius: 50%; background: var(--yvo-yellow-green); box-shadow: 0 0 0 0 rgba(154, 218, 33, .6); animation: hs-ping 2s var(--e-sine) infinite; }
@keyframes hs-ping { 0% { box-shadow: 0 0 0 0 rgba(154, 218, 33, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(154, 218, 33, 0); } }

@media (max-width: 768px) {
  .hs { height: 60rem; padding: 8px; }
  .hs-wrap { padding: 40px 0; }
  .hs-title { font-size: 44px; padding-bottom: 60px; }
  .hs-card { height: 30rem; padding: 8px; }
  .hs-screen { background:
    radial-gradient(90% 60% at 50% 100%, rgba(212, 231, 126, .95) 0%, rgba(154, 218, 33, .75) 25%, rgba(0, 87, 76, .55) 55%, transparent 80%),
    linear-gradient(180deg, #000 0%, #000 30%, #00211c 50%, #004d43 68%, #6fb81f 100%); }

  .hs-arc { width: 120cqw; left: 50% !important; right: auto !important; translate: -50% 0; }
  .hs-arc.a1 { top: -70cqw; } .hs-arc.a2 { top: auto; bottom: -70cqw; }
  .hs-word { font-size: 11cqw; left: 50% !important; right: auto !important; translate: -50% 0; }
  .hs-word.w1 { top: 12%; } .hs-word.w2 { top: auto; bottom: 22%; }
  .hs-lens { width: 46cqw; }
  .hs-ask { bottom: 5%; font-size: 12px; }
}
html.rm .hs-ask i { animation: none; }

.hs-screen { background: #000; }
.hs-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hs-arc { display: none; }
.hs-lens { width: 13cqw; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; top: 49%; }
.hs-lens .logo-h { width: 100%; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45)); }
.hs-word { top: 47%; }
.hs-word.w1 { left: 6cqw; }
.hs-word.w2 { right: 6cqw; color: var(--yvo-brunswick); }
@media (max-width: 768px) {
  .hs-art { object-position: 50% 50%; }
  .hs-lens { width: 26cqw; top: 49%; }
  .hs-word { font-size: 10cqw; }
  .hs-word.w1 { top: 14%; } .hs-word.w2 { bottom: 20%; color: var(--yvo-brunswick); }
}

.hs-row { position: absolute; left: 6cqw; right: 6cqw; top: 50%; translate: 0 -50%; display: grid; grid-template-columns: 1fr 17cqw 1fr; align-items: center; gap: 3cqw; }
.hs-row .hs-word, .hs-row .hs-lens { position: static; translate: none; }
.hs-row .hs-word { font-size: clamp(22px, 5cqw, 64px); }
.hs-row .w1 { justify-self: start; color: var(--yvo-goldenrod); }
.hs-row .w2 { justify-self: end; color: var(--yvo-brunswick); font-weight: 700; }
.hs-row .hs-lens { width: 100%; justify-self: center; }
@media (max-width: 768px) {
  .hs-row { top: 12%; bottom: 18%; translate: none; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4cqw; }
  .hs-row .w1, .hs-row .w2 { justify-self: center; }
  .hs-row .hs-word { font-size: 10cqw; }
  .hs-row .hs-lens { width: 34cqw; align-self: center; }
}

.hs-row { top: 50.5%; grid-template-columns: 1fr 14cqw 1fr; }
.hs-row .hs-lens .logo-h { width: 74%; }
@media (max-width: 768px) {

  .hs-row { top: 10%; bottom: 20%; translate: none; grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: center; gap: 0; }
  .hs-row .w1 { align-self: end; } .hs-row .w2 { align-self: start; }
  .hs-row .hs-word { font-size: 11cqw; }
  .hs-row .hs-lens { width: 30cqw; }
  .hs-row .w2 { color: var(--yvo-goldenrod); }
}
@media (max-width: 768px) {
  .hs-row { top: 14%; bottom: 14%; row-gap: 9cqw; }
  .hs-row .w1 { align-self: end; } .hs-row .w2 { align-self: start; }
  .hs-ask { bottom: 4%; }
}

.hs-ad { background: #000; }
.hs-ad::after { opacity: .1; }
.hs-ring { position: absolute; left: 30cqw; top: -18cqw; width: 96cqw; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 200deg, #000 0deg, #004d43 40deg, #9ada21 110deg, #d4e77e 150deg, #9ada21 190deg, #004d43 250deg, #000 300deg);
  filter: blur(.4cqw); }
.hs-ring::after { content: ""; position: absolute; inset: 7cqw; border-radius: 50%; background: #000; }
.hs-photo { position: absolute; left: 36cqw; top: -12cqw; width: 84cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden; z-index: 1;
  box-shadow: 0 0 0 1px rgba(240, 254, 220, .12); }
.hs-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.12) translate(-4%, 6%); }
.hs-kick { position: absolute; left: 6cqw; top: 22cqw; z-index: 2; font-size: 2.6cqw; line-height: 1.12; font-weight: 300; color: var(--yvo-white); }
.hs-kick b { font-weight: 800; }
.hs-big { position: absolute; left: 4.5cqw; top: 27cqw; z-index: 2; font-size: 21cqw; line-height: .8; letter-spacing: -.045em; font-weight: 300; }
.hs-big .hs-c1 { color: var(--yvo-yellow-green); }
.hs-big .hs-c2 { color: var(--yvo-brunswick); font-weight: 500; }
.hs-ad .hs-ask { left: auto; right: 4cqw; translate: none; bottom: 4cqw; z-index: 3; }

@media (max-width: 768px) {
  .hs-ring { left: -20cqw; top: 30cqw; width: 140cqw; }
  .hs-ring::after { inset: 10cqw; }
  .hs-photo { left: -12cqw; top: 38cqw; width: 124cqw; }
  .hs-kick { left: 7cqw; top: 8cqw; font-size: 6cqw; }
  .hs-big { left: 5cqw; top: 36cqw; font-size: 30cqw; }
  .hs-big .hs-c2 { color: var(--yvo-brunswick); }
  .hs-ad .hs-ask { right: auto; left: 50%; translate: -50% 0; bottom: 5%; }
}
@media (max-width: 768px) {

  .hs-ring { top: 62cqw; }
  .hs-photo { top: 70cqw; }
  .hs-big { top: 36cqw; font-size: 29cqw; }
  .hs-big .hs-c2 { color: var(--yvo-key-lime); }
}

.hs-card { max-width: 860px; height: 34rem; padding: 18px; }
.hs-head { max-width: 860px; }
.hs-dash { position: absolute; left: 6cqw; bottom: 6cqw; z-index: 3; width: 38cqw; padding: 2cqw; border-radius: 2cqw;
  background: rgba(240, 254, 220, .94); color: var(--yvo-brunswick); box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .7), 0 0 0 1px rgba(154, 218, 33, .35);
  font-size: 1.35cqw; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hs-dash-top { display: flex; align-items: center; gap: .8cqw; margin-bottom: 1.4cqw; }
.hs-dash-top svg { width: 2.4cqw; height: auto; }
.hs-dash-top svg use { color: var(--yvo-brunswick); }
.hs-dash-top b { font-size: 1.6cqw; }
.hs-dash-top em { margin-left: auto; font-style: normal; font-weight: 700; padding: .3cqw 1cqw; border-radius: 99px; background: var(--yvo-yellow-green); color: var(--yvo-brunswick); }
.hs-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; margin-bottom: 1.4cqw; }
.hs-kpis span { padding: 1cqw; border-radius: 1.2cqw; background: #fff; display: grid; }
.hs-kpis b { font-size: 2.1cqw; font-weight: 800; color: #0b1f1c; white-space: nowrap; }
.hs-kpis small { font-size: 1.1cqw; opacity: .7; }
.hs-kpis span:first-child { background: var(--yvo-brunswick); } .hs-kpis span:first-child b { color: var(--yvo-yellow-green); } .hs-kpis span:first-child small { color: var(--yvo-goldenrod); opacity: .85; }
.hs-funnel p { display: grid; grid-template-columns: 9cqw 1fr 3cqw; align-items: center; gap: .8cqw; margin: 0 0 .7cqw; }
.hs-funnel i { height: 1.2cqw; border-radius: 99px; background: rgba(0, 77, 67, .1); position: relative; overflow: hidden; }
.hs-funnel i::after { content: ""; position: absolute; inset: 0; right: auto; width: calc(var(--w) * 100%); border-radius: 99px; background: linear-gradient(90deg, var(--yvo-brunswick), var(--yvo-yellow-green)); }
.hs-funnel b { text-align: right; }
.hs-dash-foot { margin-top: 1.2cqw; display: flex; align-items: center; gap: .7cqw; font-weight: 700; }
.hs-dash-foot i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--yvo-yellow-green); }

.hs-kick { top: 7cqw; } .hs-big { top: 14cqw; }
@media (max-width: 768px) {
  .hs-card { height: 30rem; padding: 8px; }
  .hs-dash { left: 6cqw; right: 6cqw; width: auto; bottom: 6cqw; font-size: 3cqw; padding: 4cqw; border-radius: 4cqw; }
  .hs-dash-top b { font-size: 3.6cqw; } .hs-dash-top svg { width: 5cqw; }
  .hs-kpis b { font-size: 4.4cqw; } .hs-kpis small { font-size: 2.6cqw; } .hs-kpis span { padding: 2cqw; border-radius: 2.5cqw; }
  .hs-funnel { display: none; }
  .hs-dash-foot { margin-top: 2cqw; } .hs-dash-foot i { width: 2cqw; height: 2cqw; }
  .hs-kick { top: 8cqw; } .hs-big { top: 36cqw; }
}

.hs-dash { left: auto; right: 4cqw; bottom: 4cqw; width: 36cqw; }
.hs-kick { top: 9cqw; } .hs-big { top: 17cqw; }
@media (max-width: 768px) {
  .hs-dash { left: 5cqw; right: 5cqw; width: auto; bottom: 4cqw; padding: 2.4cqw; }
  .hs-dash-top, .hs-dash-foot { display: none; }
  .hs-kpis { margin: 0; }
  .hs-kick { top: 8cqw; } .hs-big { top: 36cqw; }
}
.hs-dash { width: 31cqw; bottom: 3cqw; right: 3cqw; }
.hs-big { font-size: 19cqw; }
@media (max-width: 768px) {
  .hs-big { font-size: 29cqw; }
  .hs-photo img { transform: scale(1.05) translate(-6%, -12%); }
  .hs-dash { bottom: 3cqw; }
}