/* TW Leads: the home page hero (templates/sections/home_hero.php). Loaded only on the home record. */
.hhero{position:relative;margin:14px 16px 0;border-radius:var(--r-xl);background:var(--ink);color:var(--on-navy);overflow:hidden;isolation:isolate;min-height:600px;display:grid;align-items:center;padding-block:0}
.hhero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hhero-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;will-change:transform}
.hhero-bg .b1{width:620px;height:620px;left:-160px;top:-220px;background:radial-gradient(circle at 30% 30%,#0A7BC4,transparent 65%)}
.hhero-bg .b2{width:560px;height:560px;right:-120px;top:-140px;background:radial-gradient(circle at 60% 40%,#1E9E62,transparent 65%);opacity:.5}
.hhero-bg .b3{width:700px;height:700px;right:10%;bottom:-420px;background:radial-gradient(circle at 50% 50%,#3FA9F5,transparent 65%);opacity:.45}
.hhero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 60% 50%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 60% 50%,#000 20%,transparent 75%)}
.hhero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-block:72px 64px;width:100%}
.hhero-copy h1{color:#fff;margin-top:16px;max-width:13ch;font-size:clamp(38px,5vw,62px)}
.hhero-copy .sub{font-size:19px;color:var(--on-navy-soft);max-width:34rem;margin-top:18px;line-height:1.5}
.hhero-copy .cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px}
.hhero-copy .proof{margin-top:28px}
.hhero-copy .eyebrow.light{color:var(--sky)}
/* the art: a stack of cards that float */
.hhero-art{position:relative;height:460px;min-width:0}
.hcard{position:absolute;background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 30px 60px -24px rgba(4,26,48,.6),0 2px 0 rgba(255,255,255,.6) inset;padding:18px 20px;will-change:transform}
.hc-chart{left:0;right:0;top:50%;transform:translateY(-50%);padding:22px 24px 18px}
.hc-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:15px}
.hc-head em{font-style:normal;color:var(--muted);font-weight:600;font-size:13px}
.hchart{display:block;width:100%;height:240px;margin-top:12px}
.hline{stroke-dasharray:600;stroke-dashoffset:600}
.hline2{stroke-dasharray:600;stroke-dashoffset:600}
.hfill{opacity:0}
.hdot{opacity:0}
.hhero.in .hline{animation:hdraw 1.6s .3s cubic-bezier(.2,.7,.2,1) forwards}
.hhero.in .hline2{animation:hdraw 1.6s .5s cubic-bezier(.2,.7,.2,1) forwards}
.hhero.in .hfill{animation:hfade .8s 1.4s ease forwards}
.hhero.in .hdot{animation:hfade .4s 1.8s ease forwards}
@keyframes hdraw{to{stroke-dashoffset:0}}
@keyframes hfade{to{opacity:1}}
.hc-foot{display:flex;gap:16px;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:8px;flex-wrap:wrap;align-items:center}
.hc-foot em{font-style:normal;margin-left:auto;color:var(--ink-soft);font-weight:500}
.hc-foot i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.hc-foot .k1{background:#0A7BC4}.hc-foot .k2{background:rgba(11,35,65,.3)}
.hc-stat{display:flex;flex-direction:column;gap:2px;min-width:150px}
.hc-stat b{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em}
.hc-stat small{color:var(--muted);font-weight:600;font-size:13px}
.hc-stat .stars{display:inline-flex;gap:1px;margin-top:4px}
.hc-stat .stars svg{width:14px;height:14px;fill:var(--amber)}
.hc-stat .mi{margin-bottom:8px}
.s1{right:0;top:0}
.s2{right:16px;bottom:96px}
.s3{left:24px;bottom:40px}
.hc-adv{left:180px;right:0;bottom:-6px;display:flex;align-items:center;gap:12px;padding:12px 14px}
.hc-adv img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:top}
.hc-adv b{display:block;font-size:14px}
.hc-adv small{color:var(--muted);font-size:12.5px}
.hc-adv .tick{margin-left:auto}
/* entrance + float */
.hhero .hcard{opacity:0;transform:translateY(30px)}
.hhero.in .hcard{animation:hrise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hhero.in .hc-chart{animation:hrisec .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hrisec{from{opacity:0;transform:translateY(calc(-50% + 30px))}to{opacity:1;transform:translateY(-50%)}}
.hhero.in.settled .hc-chart{opacity:1;transform:translateY(-50%);animation:hfloatc 7s ease-in-out infinite}
@keyframes hfloatc{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 8px))}}
.hhero.in .hc-chart{animation-delay:.1s}
.hhero.in .s1{animation-delay:.35s}
.hhero.in .s2{animation-delay:.5s}
.hhero.in .s3{animation-delay:.65s}
.hhero.in .hc-adv{animation-delay:.8s}
@keyframes hrise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hhero.in.settled .hcard{opacity:1;transform:none;animation:none}
.hhero.in.settled .s1{animation:hfloat 6s ease-in-out infinite}
.hhero.in.settled .s2{animation:hfloat 7s .8s ease-in-out infinite}
.hhero.in.settled .s3{animation:hfloat 6.5s 1.4s ease-in-out infinite}
@keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hhero.in.settled .b1{animation:hdrift 18s ease-in-out infinite}
.hhero.in.settled .b2{animation:hdrift 22s 3s ease-in-out infinite reverse}
.hhero.in.settled .b3{animation:hdrift 26s 6s ease-in-out infinite}
@keyframes hdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@media (max-width:1100px){.hhero-in{grid-template-columns:1fr;gap:36px}.hhero-art{height:420px;max-width:560px;margin:0 auto;width:100%}}
@media (max-width:700px){.hhero{margin:8px 8px 0;border-radius:24px;min-height:0}.hhero-in{padding-block:44px 40px}.hhero-art{height:340px}.hchart{height:190px}.s1{top:auto;bottom:110px;right:0}.s2{display:none}.s3{left:0;bottom:46px}.hc-adv{left:0;right:0;bottom:-8px}.hc-stat{min-width:130px}.hc-stat b{font-size:26px}}
@media (prefers-reduced-motion:reduce){.hhero .hcard{opacity:1;transform:none;animation:none !important}.hline,.hline2{stroke-dashoffset:0;animation:none !important}.hfill,.hdot{opacity:1;animation:none !important}.hhero-bg .blob{animation:none !important}}