.problem-hook{padding:104px 40px 88px;background:#fff;color:#191f28}
.hook-inner{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:24px;max-width:1240px;margin:0 auto}
.hook-copy{position:relative;z-index:1;padding:10px 0}
.hook-eyebrow{margin:0 0 24px;color:#2861e7;font-size:13px;font-weight:750;letter-spacing:.13em}
.hook-copy h2{margin:0;font-size:clamp(30px,3.05vw,44px);font-weight:750;line-height:1.32;letter-spacing:-.055em;word-break:keep-all}
.hook-title-line,.hook-statement>span{display:block}
.hook-title-line em{color:#2861e7;font-style:normal}
.hook-lead{margin:30px 0 0;color:#6b7684;font-size:19px;line-height:1.7;letter-spacing:-.025em;word-break:keep-all}
.hook-rule{display:block;width:30px;height:2px;margin:28px 0;background:#3869ec}
.hook-statement{margin:0;font-size:23px;line-height:1.55;letter-spacing:-.04em;font-weight:700;word-break:keep-all}
.hook-context{margin:22px 0 0;font-size:16px;line-height:1.8;color:#6b7684;letter-spacing:-.02em;word-break:keep-all}
.hook-network{position:relative;width:100%;aspect-ratio:1;background:radial-gradient(ellipse at 56% 52%,#f1f6ff 0,rgba(247,250,255,.65) 43%,rgba(255,255,255,0) 72%)}
.hook-connections{position:absolute;inset:0;width:100%;height:100%;color:#bdd2fc;overflow:visible}
.hook-cards{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.hook-card{position:absolute;width:40.67%;height:13%;white-space:nowrap}
.hook-card-face{display:flex;align-items:center;gap:12px;width:100%;height:100%;padding:10px 14px;background:#fff;border:1px solid #edf2f9;border-radius:18px;box-shadow:0 14px 30px -15px #7d9ec640,0 3px 9px #2b569508;white-space:nowrap}
.hook-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;background:#f1f6ff;border-radius:13px;color:#2f65ec}
.hook-icon svg{display:block;width:28px;height:28px}
.hook-card-label{font-size:17px;font-weight:620;letter-spacing:-.035em;line-height:1.3}
.hook-card-1{left:14%;top:1.17%}
.hook-card-2{left:57%;top:11.17%}
.hook-card-3{left:1.33%;top:24%}
.hook-card-4{left:57.33%;top:36%}
.hook-card-5{left:7.33%;top:48%}
.hook-card-6{left:58.33%;top:60%}
.hook-card-7{left:16%;top:72%}
.hook-card-8{left:54%;top:86%}
/* Inner faces float independently of the outer cards' one-time entrance. */
.hook-card-face{animation:hookFloat 6.4s ease-in-out infinite;animation-play-state:paused}
.hook-card-2 .hook-card-face{animation-duration:7.1s;animation-delay:.35s}
.hook-card-3 .hook-card-face{animation-duration:6.8s;animation-delay:.7s}
.hook-card-4 .hook-card-face{animation-duration:7.6s;animation-delay:.15s}
.hook-card-5 .hook-card-face{animation-duration:7.3s;animation-delay:1.05s}
.hook-card-6 .hook-card-face{animation-duration:6.6s;animation-delay:.5s}
.hook-card-7 .hook-card-face{animation-duration:7.8s;animation-delay:.9s}
.hook-card-8 .hook-card-face{animation-duration:7.2s;animation-delay:1.3s}
.hook-signals{opacity:0;transition:opacity .4s}
.hook-signals path{stroke-dasharray:16 84;stroke-dashoffset:100;animation:hookSignal 3.2s linear infinite;animation-play-state:paused}
.hook-signals path:nth-child(2n){animation-delay:.8s}
.hook-signals path:nth-child(3n){animation-delay:1.6s}
.hook-signals path:nth-child(5n){animation-delay:2.3s}
.problem-hook.is-network-active .hook-card-face,.problem-hook.is-network-active .hook-signals path{animation-play-state:running}
.problem-hook.is-network-active .hook-signals{opacity:.8}
@keyframes hookFloat{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-3%)}75%{transform:translateY(3%)}}
@keyframes hookSignal{to{stroke-dashoffset:0}}
/* Entry is timed once in view; the layout itself never follows scroll progress. */
.problem-hook .pop-ready{scale:1;translate:0 16px}
.problem-hook .pop-ready.is-popped{animation:hookReveal .62s cubic-bezier(.22,.72,.2,1) var(--pop-delay,0ms) both}
.problem-hook .hook-card.pop-ready{translate:0 18px;scale:.96}
.problem-hook .hook-card.pop-ready.is-popped{animation:hookCardIn .7s cubic-bezier(.22,.72,.2,1) var(--pop-delay,0ms) both}
.problem-hook .hook-connections.pop-ready{translate:none;scale:1}
.problem-hook .pop-ready.pop-done,.problem-hook .hook-card.pop-ready.pop-done{opacity:1;translate:none;scale:1;animation:none}
@keyframes hookReveal{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes hookCardIn{0%{opacity:0;translate:0 18px;scale:.96}70%{opacity:1;translate:0 -2px;scale:1.008}100%{opacity:1;translate:0 0;scale:1}}
@media(min-width:901px) and (max-width:1180px){
 .problem-hook{padding:88px 28px 72px}
 .hook-copy h2{font-size:34px}
 .hook-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
 .hook-card-face{gap:8px;padding:8px 10px;border-radius:15px}
 .hook-icon{flex-basis:36px;width:36px;height:36px;border-radius:11px}
 .hook-icon svg{width:24px;height:24px}
 .hook-card-label{font-size:14px}
 .hook-statement{font-size:20px}
 .hook-lead{font-size:17px}
}
@media(max-width:900px){
 .problem-hook{padding:76px 28px 64px}
 .hook-inner{grid-template-columns:1fr;gap:38px;max-width:620px}
 .hook-copy h2{font-size:clamp(30px,5.1vw,42px)}
 .hook-network{max-width:560px;margin:0 auto}
}
@media(max-width:600px){
 .problem-hook{padding:60px 22px 52px}
 .hook-inner{gap:34px}
 .hook-copy{padding:0}
 .hook-eyebrow{font-size:11px;margin-bottom:18px}
 .hook-copy h2{font-size:clamp(27px,6.85vw,36px);line-height:1.38}
 .hook-lead{margin-top:22px;font-size:16px;line-height:1.7}
 .hook-rule{width:26px;margin:24px 0}
 .hook-statement{font-size:clamp(17px,4.5vw,22px);line-height:1.6}
 .hook-context{font-size:14px;margin-top:18px;line-height:1.75}
 .hook-card-face{gap:7px;padding:7px 8px;border-radius:13px;box-shadow:0 10px 24px -12px #7d9ec645,0 2px 6px #2b569508}
 .hook-icon{flex-basis:30px;width:30px;height:30px;border-radius:9px}
 .hook-icon svg{width:21px;height:21px}
 .hook-card-label{font-size:clamp(11px,3.05vw,15px)}
}
@media(max-width:360px){
 .problem-hook{padding-left:18px;padding-right:18px}
 .hook-card-face{gap:5px;padding:5px 6px;border-radius:11px}
 .hook-icon{flex-basis:25px;width:25px;height:25px;border-radius:8px}
 .hook-icon svg{width:18px;height:18px}
 .hook-context br{display:none}
}
@media(prefers-reduced-motion:reduce){.problem-hook .pop-ready,.problem-hook .pop-ready.is-popped{opacity:1;translate:none;scale:1;animation:none!important}}

@media(prefers-reduced-motion:reduce){.hook-card-face,.hook-signals path{animation:none!important;transform:none}.problem-hook .hook-signals{opacity:0;transition:none}}