/* HyperFocusOZ homepage — BOLD revamp (Electric Teal + Amber, Geist).
 * Builds on home.css (.hm-wrap/.hm-tag/.hm-btn). Prefix: .hb-
 * Motif: the logo's dot, scaled up as a "focus lens". */
.hb h1,.hb h2,.hb h3{margin:0;text-wrap:balance;letter-spacing:-.055em}
.hb p{text-wrap:pretty}
.hb-full{overflow-x:clip}
/* ── hero ── */
.hb-hero{padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(40px,5vw,72px);overflow:clip}
.hb-hero-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.hb-h1{font-size:clamp(52px,9.4vw,168px);font-weight:700;line-height:.86;margin-top:clamp(28px,3.4vw,52px);letter-spacing:-.065em}
.hb-h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hb-h1 .ln>span{display:inline-block;transform:translateY(105%);animation:hb-up .9s cubic-bezier(.2,.8,.2,1) forwards}
.hb-h1 .ln:nth-child(2)>span{animation-delay:.08s}.hb-h1 .ln:nth-child(3)>span{animation-delay:.16s}.hb-h1 .ln:nth-child(4)>span{animation-delay:.24s}
@keyframes hb-up{to{transform:none}}
.hb-h1 .soft{color:var(--fg-muted)}
.hb-dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--acc);margin-left:.04em;vertical-align:baseline;transform:scale(0);animation:hf-dot-snap .9s cubic-bezier(.2,.7,.2,1) .7s forwards}
@keyframes hf-dot-snap{0%{transform:scale(0)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
.hb-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(32px,4vw,56px)}
@media (max-width:980px){.hb-stage{grid-template-columns:minmax(0,1fr)}}
.hb-lede{font-size:clamp(18px,1.6vw,22px);line-height:1.5;margin:0;color:var(--fg-muted);max-width:520px}
.hb-lede b{color:var(--fg);font-weight:600}
.hb-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hb-btn-xl{padding:19px 28px;font-size:16px;border-radius:12px}
.hb-cred{display:flex;gap:14px;align-items:center;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.hb-cred .av{width:44px;height:44px;background:var(--fg);color:var(--bg);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:0 0 44px;border-radius:50%;letter-spacing:-.02em}
.hb-cred strong{display:block;font-size:14px;font-weight:600;line-height:1.35}
.hb-cred .sub{display:block;font:400 11px/1.5 var(--mono);color:var(--fg-muted);margin-top:4px}
/* the lens */
.hb-lens-wrap{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(360px,40vw,600px)}
.hb-lens{position:relative;width:min(100%,clamp(320px,38vw,560px));aspect-ratio:1;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 40px 120px -40px var(--acc);transform:scale(.6);opacity:0;animation:hb-focus 1.1s cubic-bezier(.2,.8,.2,1) .25s forwards}
@keyframes hb-focus{0%{transform:scale(.6);opacity:0;filter:blur(14px)}60%{filter:blur(2px)}100%{transform:none;opacity:1;filter:none}}
.hb-lens::before,.hb-lens::after{content:"";position:absolute;inset:-7%;border-radius:50%;border:1px dashed color-mix(in oklab,var(--fg) 22%,transparent);animation:hb-spin 60s linear infinite;pointer-events:none}
.hb-lens::after{inset:-16%;border-style:solid;border-color:color-mix(in oklab,var(--fg) 8%,transparent);animation-duration:90s;animation-direction:reverse}
@keyframes hb-spin{to{transform:rotate(360deg)}}
.hb-lens .k{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.hb-lens .v{font-size:clamp(64px,8.4vw,132px);font-weight:700;letter-spacing:-.065em;line-height:.9;margin-top:10px}
.hb-lens .d{font:500 12px var(--mono);margin-top:12px;opacity:.8}
.hb-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--bg-elevated);border:1px solid var(--line);box-shadow:var(--shadow-lift);color:var(--fg);white-space:nowrap;animation:hb-float 6s ease-in-out infinite;opacity:0}
.hb-chip strong{font-size:22px;font-weight:700;letter-spacing:-.04em;line-height:1}
.hb-chip>span{font:500 10.5px/1.35 var(--mono);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em}
.hb-chip i{width:8px;height:8px;border-radius:50%;background:var(--sig);flex:0 0 8px}
.hb-chip.c1{top:6%;left:0;animation-delay:.9s;animation-name:hb-in,hb-float;animation-duration:.6s,6s;animation-fill-mode:forwards,none;animation-iteration-count:1,infinite;animation-timing-function:cubic-bezier(.2,.8,.2,1),ease-in-out}
.hb-chip.c2{bottom:12%;left:-2%;animation-name:hb-in,hb-float;animation-duration:.6s,7s;animation-delay:1.05s,1.6s;animation-fill-mode:forwards,none;animation-iteration-count:1,infinite}
.hb-chip.c3{top:44%;right:-2%;max-width:240px;white-space:normal;animation-name:hb-in,hb-float;animation-duration:.6s,8s;animation-delay:1.2s,2s;animation-fill-mode:forwards,none;animation-iteration-count:1,infinite}
.hb-chip.c3>div{font-size:13.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.hb-chip.c3>div small{display:block;font:500 10.5px var(--mono);color:var(--fg-muted);margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
@keyframes hb-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:560px){.hb-chip.c3{display:none}.hb-chip{padding:10px 12px}.hb-chip strong{font-size:18px}}
/* ── big ticker band ── */
.hb-band{background:var(--acc);color:var(--acc-ink);overflow:hidden}
.hb-band-track{display:flex;width:max-content;animation:hf-marquee 42s linear infinite}
.hb-band:hover .hb-band-track{animation-play-state:paused}
.hb-band a{display:flex;align-items:center;gap:clamp(24px,3vw,48px);padding:clamp(18px,2.2vw,30px) clamp(12px,1.5vw,24px);font-size:clamp(30px,4.4vw,68px);font-weight:700;letter-spacing:-.05em;white-space:nowrap;color:var(--acc-ink);line-height:1}
.hb-band a:hover{color:var(--acc-ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.hb-band a::after{content:"";width:.22em;height:.22em;border-radius:50%;background:var(--acc-ink);flex:0 0 auto}
/* ── section heads ── */
.hb-sec{padding-block:clamp(80px,10vw,150px)}
.hb-kicker{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:clamp(28px,3vw,44px)}
.hb-kicker .count{font:500 12px var(--mono);color:var(--fg-muted);letter-spacing:.08em;text-transform:uppercase}
.hb-h2{font-size:clamp(34px,8.6vw,124px);font-weight:700;line-height:.9;letter-spacing:-.06em;max-width:16ch}
.hb-h2 .acc{color:var(--acc-text)}
.hb-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,36px);margin-bottom:clamp(40px,5vw,80px)}
.hb-intro .hb-h2{max-width:15ch}
.hb-intro p{max-width:560px;justify-self:end;font-size:18px;line-height:1.6;color:var(--fg-muted);margin:0}
/* ── flows: giant index ── */
.hb-flows{border-top:2px solid var(--fg)}
.hb-flow{display:grid;grid-template-columns:72px minmax(0,1fr) auto 64px;gap:clamp(14px,2vw,32px);align-items:center;padding:clamp(20px,2.4vw,34px) clamp(8px,1.4vw,22px);border-bottom:1px solid var(--line);color:var(--fg);background:linear-gradient(var(--acc),var(--acc)) no-repeat left/0% 100%;transition:background-size .5s cubic-bezier(.2,.8,.2,1),color .25s}
.hb-flow:hover{background-size:100% 100%;color:var(--acc-ink)}
.hb-flow .n{font:500 13px var(--mono);color:var(--fg-muted);align-self:start;padding-top:.9em}
.hb-flow h3{font-size:clamp(32px,4.8vw,76px);font-weight:700;line-height:.95;letter-spacing:-.055em}
.hb-flow .sub{display:block;font-size:clamp(14px,1.2vw,17px);font-weight:500;letter-spacing:-.01em;margin-top:10px;color:var(--acc-text)}
.hb-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.hb-reveal>div{overflow:hidden}
.hb-reveal p{margin:0;padding-top:14px;font-size:15.5px;line-height:1.55;max-width:58ch}
.hb-flow:hover .hb-reveal,.hb-flow:focus-visible .hb-reveal{grid-template-rows:1fr}
.hb-proof{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);padding:8px 12px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.hb-proof i{width:7px;height:7px;border-radius:50%;background:var(--sig);flex:0 0 7px}
.hb-go{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;justify-self:end;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,color .25s,border-color .25s}
.hb-flow:hover .n,.hb-flow:hover .sub{color:var(--acc-ink)}
.hb-flow:hover .hb-proof{border-color:color-mix(in oklab,var(--acc-ink) 35%,transparent)}
.hb-flow:hover .hb-go{background:var(--acc-ink);color:var(--acc);border-color:transparent;transform:rotate(-45deg)}
@media (hover:none),(max-width:900px){.hb-reveal{grid-template-rows:1fr}}
@media (max-width:900px){.hb-flow{grid-template-columns:40px minmax(0,1fr) 48px}.hb-flow .hb-proof{grid-column:2/3;justify-self:start}.hb-go{width:48px;height:48px;grid-row:1;grid-column:3}}
/* audience */
.hb-aud{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(56px,6vw,96px);align-items:start}
@media (max-width:980px){.hb-aud{grid-template-columns:repeat(3,minmax(0,1fr))}.hb-aud>.lead{grid-column:1/-1}}
@media (max-width:640px){.hb-aud{grid-template-columns:minmax(0,1fr)}}
.hb-aud .lead h3{font-size:clamp(26px,2.6vw,38px);font-weight:700;line-height:1;margin-top:14px}
.hb-aud .st{border-top:2px solid var(--fg);padding-top:18px}
.hb-aud .num{font-size:clamp(56px,6vw,96px);font-weight:700;letter-spacing:-.07em;line-height:.85;color:var(--acc-text)}
.hb-aud .k{font-weight:600;font-size:16px;margin-top:18px}
.hb-aud .v{font-size:14.5px;line-height:1.55;color:var(--fg-muted);margin-top:6px}
/* ── Quick Wins: amber band ── */
.hb-qw{background:var(--sig);color:var(--sig-ink);position:relative;overflow:hidden}
.hb-qw::after{content:"";position:absolute;width:min(70vw,900px);aspect-ratio:1;right:-18vw;top:50%;transform:translateY(-50%);border-radius:50%;border:2px solid color-mix(in oklab,var(--sig-ink) 14%,transparent);box-shadow:0 0 0 clamp(40px,6vw,90px) color-mix(in oklab,var(--sig-ink) 4%,transparent);pointer-events:none}
.hb-qw .hm-wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end;padding-block:clamp(72px,9vw,140px)}
@media (max-width:900px){.hb-qw .hm-wrap{grid-template-columns:minmax(0,1fr)}}
.hb-qw:hover{color:var(--sig-ink)}
.hb-qw .hm-tag{color:var(--sig-ink)}
.hb-qw h2{font-size:clamp(64px,12vw,220px);font-weight:700;line-height:.82;letter-spacing:-.07em;margin-top:18px}
.hb-qw .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;margin:26px 0 0;max-width:540px}
.hb-price{border-top:2px solid var(--sig-ink);padding-top:18px}
.hb-price .k{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hb-price .v{font-size:clamp(56px,6.4vw,104px);font-weight:700;letter-spacing:-.065em;line-height:.9;margin-top:10px}
.hb-price .v small{font-size:.24em;letter-spacing:-.01em;font-weight:600;margin-left:.3em}
.hb-qw-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:0}
.hb-qw-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid color-mix(in oklab,var(--sig-ink) 20%,transparent);font-size:15px;font-weight:600}
.hb-qw-list li span:first-child{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding-top:3px;font-weight:500}
.hb-qw-list li span:last-child{text-align:right}
.hb-btn-sig{background:var(--sig-ink);color:var(--sig);margin-top:26px}.hb-btn-sig:hover{color:var(--sig)}
/* ── outcomes ── */
.hb-dark{background:var(--bg-inverted);color:var(--fg-on-inverted);position:relative;overflow:hidden}
.hb-dark .hm-tag{color:var(--fg-on-inverted-muted)}.hb-dark .hm-tag b{color:var(--sig)}
.hb-dark .hb-kicker{border-color:var(--inv-line)}
.hb-dark .hb-kicker .count{color:var(--fg-on-inverted-muted)}
.hb-dark .hb-h2 .acc{color:var(--acc)}
.hb-dark .hb-intro p{color:var(--fg-on-inverted-muted)}
.hb-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--inv-line)}
.hb-nums>div{padding:clamp(24px,3vw,44px) clamp(0px,2vw,32px) clamp(24px,3vw,44px) 0;border-bottom:1px solid var(--inv-line)}
.hb-nums>div:nth-child(odd){border-right:1px solid var(--inv-line)}
.hb-nums>div:nth-child(even){padding-left:clamp(20px,3vw,44px)}
.hb-nums strong{display:block;font-size:clamp(64px,10vw,176px);font-weight:700;letter-spacing:-.07em;line-height:.85}
.hb-nums>div:first-child strong{color:var(--acc)}
.hb-nums>div>span{display:block;font:400 12px/1.6 var(--mono);color:var(--fg-on-inverted-muted);margin-top:16px;max-width:30ch;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:560px){.hb-nums{grid-template-columns:minmax(0,1fr)}.hb-nums>div:nth-child(odd){border-right:0}.hb-nums>div:nth-child(even){padding-left:0}}
.hb-pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(48px,6vw,88px)}
.hb-pills>div{border-top:2px solid var(--acc);padding-top:20px}
.hb-pills .n{font:500 11px var(--mono);color:var(--sig)}
.hb-pills strong{display:block;font-size:20px;font-weight:600;letter-spacing:-.025em;margin-top:14px;line-height:1.2}
.hb-pills p{font-size:14.5px;line-height:1.55;color:var(--fg-on-inverted-muted);margin:10px 0 0}
@media (max-width:980px){.hb-pills{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hb-pills{grid-template-columns:minmax(0,1fr)}}
/* ── process ── */
.hb-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);position:relative}
.hb-steps::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.hb-steps::after{content:"";position:absolute;left:0;top:0;height:2px;width:25%;background:var(--acc)}
.hb-step{padding-top:clamp(24px,3vw,40px)}
.hb-step .n{font-size:clamp(72px,9vw,160px);font-weight:700;letter-spacing:-.08em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px color-mix(in oklab,var(--fg) 40%,transparent)}
.hb-step.first .n{color:var(--acc-text);-webkit-text-stroke:0}
.hb-step h3{font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.035em;margin-top:28px}
.hb-step .meta{font:500 11px var(--mono);color:var(--acc-text);margin-top:10px;text-transform:uppercase;letter-spacing:.08em}
.hb-step p{font-size:15px;line-height:1.55;color:var(--fg-muted);margin:12px 0 0}
@media (max-width:900px){.hb-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}.hb-steps::after{width:50%}}
@media (max-width:520px){.hb-steps{grid-template-columns:minmax(0,1fr)}.hb-steps::after{width:100%}}
/* ── CTA ── */
.hb-cta{background:var(--acc);color:var(--acc-ink);position:relative;overflow:hidden}
.hb-cta::before,.hb-cta::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hb-cta::before{width:min(80vw,1100px);aspect-ratio:1;right:-30vw;bottom:-60%;background:color-mix(in oklab,var(--acc-ink) 7%,transparent)}
.hb-cta::after{width:min(46vw,620px);aspect-ratio:1;right:-8vw;bottom:-30%;border:2px solid color-mix(in oklab,var(--acc-ink) 16%,transparent)}
.hb-cta .hm-wrap{position:relative;z-index:1;padding-block:clamp(80px,10vw,160px)}
.hb-cta .hm-tag{color:var(--acc-ink)}
.hb-cta .hm-tag i{width:8px;height:8px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 2px var(--acc-ink)}
.hb-cta h2{font-size:clamp(56px,10.4vw,188px);font-weight:700;line-height:.84;letter-spacing:-.07em;margin-top:24px;max-width:12ch}
.hb-cta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,72px);padding-top:28px;border-top:2px solid var(--acc-ink);align-items:start}
@media (max-width:860px){.hb-cta-row{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.hb-h1 .ln>span,.hb-dot,.hb-lens,.hb-chip{animation:none!important;transform:none!important;opacity:1!important;filter:none!important}.hb-lens::before,.hb-lens::after,.hb-band-track{animation:none}}

@media (max-width:900px){.hb-intro p{justify-self:start}}