/* Vook v6: simple, premium. Less noise, more space, refined type. */

/* calm the surface */
body.vk:after{display:none}
.hero4:after,#results:before,.sec.dark:after,.final:after{display:none}
.progress{height:1.5px;background:var(--ink);opacity:.6}
.sec{padding:140px 0}
.head{margin-bottom:72px}
.head h2{font-size:clamp(40px,5vw,64px);letter-spacing:-.045em;line-height:1}
.head p{font-size:17.5px;line-height:1.55}
.eyebrow{font-size:12px;letter-spacing:.02em;padding:7px 12px;box-shadow:none;background:transparent;border-color:var(--line2)}
.eyebrow:before{width:5px;height:5px}
.stat,.bx,.wc,.rv,.pc,.cc,.case,.faq details,.lform.solo{box-shadow:0 1px 2px rgba(13,13,16,.04)}
.bx:hover,.wc:hover,.stat:hover{box-shadow:0 1px 2px rgba(13,13,16,.04),0 18px 40px -24px rgba(13,13,16,.25)}
.pc.pop,.cc.win{box-shadow:0 30px 60px -36px rgba(13,13,16,.6)}
.pc.pop:before,.cc.win:before{opacity:.55}
.nav{background:rgba(245,245,242,.78);border-color:var(--line);height:60px}
.nav.scrolled{box-shadow:0 8px 30px -20px rgba(13,13,16,.3)}
.mark{box-shadow:none}
.bi{box-shadow:none}

/* ---------- hero v6 ---------- */
.hero6{padding:168px 0 40px;text-align:center;position:relative;overflow:hidden}
.hero6:before{content:'';position:absolute;left:50%;top:-10%;width:1100px;height:760px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(106,77,255,.10),transparent 70%);pointer-events:none}
.hero6 .col,.vk .hero6 .e-con.col{display:flex;flex-direction:column;align-items:center;max-width:900px;margin:0 auto;position:relative}
.hero6 .pill{background:transparent;box-shadow:none;border-color:var(--line2);font-size:13px;padding:7px 14px;gap:9px}
.hero6 h1{font-size:clamp(56px,9vw,132px);line-height:.9;letter-spacing:-.055em;margin-top:30px;font-weight:500}
.hero6 h1 em{letter-spacing:-.02em;padding-right:.02em}
.hero6 .sub{font-size:19px;line-height:1.55;color:var(--mute);max-width:520px;margin:28px auto 0;text-align:center}
.hero6 .ctas{justify-content:center;margin-top:38px}
.vk .hero6 .e-con.ctas{justify-content:center}
.note{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:14px;color:var(--mute)}
.note b{color:var(--ink);font-weight:600}
.note .stars svg{width:13px;height:13px}

/* video lineup */
.lineup{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:18px;margin:88px auto 0;max-width:1120px}
.lc{margin:0;flex:0 0 auto;width:188px;display:flex;flex-direction:column;align-items:center}
.lc .lv{width:100%;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#e6e5e0;box-shadow:0 1px 2px rgba(13,13,16,.05),0 30px 60px -34px rgba(13,13,16,.45)}
.lc img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--eo)}
.lc figcaption{margin-top:16px;font-size:13.5px;color:var(--mute);white-space:nowrap}
.lc figcaption b{color:var(--ink);font-weight:600}
.lc.l1,.lc.l3{width:214px}
.lc.l2{width:248px}
.lc.l2 .lv{border-radius:28px;box-shadow:0 1px 2px rgba(13,13,16,.05),0 50px 90px -40px rgba(40,25,130,.55)}
.lc.l0,.lc.l4{opacity:.9}
@media(hover:hover) and (pointer:fine){.lc:hover img{transform:scale(1.04)}}
/* entrance: rise in sequence from the center out (CSS, off main thread) */
.js .lc{animation:lcin 1.1s var(--eo) both}
.js .lc.l2{animation-delay:.35s}.js .lc.l1,.js .lc.l3{animation-delay:.45s}.js .lc.l0,.js .lc.l4{animation-delay:.55s}
@keyframes lcin{from{opacity:0;transform:translate3d(0,48px,0) scale(.97)}to{opacity:1;transform:none}}
.js .lc.l0,.js .lc.l4{animation-name:lcin2}
@keyframes lcin2{from{opacity:0;transform:translate3d(0,48px,0) scale(.97)}to{opacity:.9;transform:none}}
.js .hero6 .r{animation:h4in 1s var(--eo) both}
.js .hero6 h1.r{animation-delay:.05s}.js .hero6 .sub.r{animation-delay:.12s}.js .hero6 .ctas.r{animation-delay:.19s}.js .hero6 .note.r{animation-delay:.26s}

/* logo strip directly under the hero, quieter */
.logos{padding:70px 0 10px}
.logos p{font-size:13px;letter-spacing:.02em}
.lg{font-size:22px;color:#b4b4bb}

@media(max-width:1080px){.lineup{gap:12px}.lc{width:150px}.lc.l1,.lc.l3{width:170px}.lc.l2{width:200px}}
@media(max-width:720px){
 .sec{padding:96px 0}
 .hero6{padding:120px 0 20px}
 .hero6 h1{font-size:clamp(50px,15vw,72px)}
 .hero6 .sub{font-size:16.5px}
 .note{flex-direction:column;gap:6px}
 .lineup{margin-top:56px;gap:10px}
 .lc.l0,.lc.l4{display:none}
 .lc,.lc.l1,.lc.l3{width:31%}
 .lc.l2{width:36%}
 .lc .lv{border-radius:18px}
 .lc figcaption{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.js .lc,.js .hero6 .r{animation:none;opacity:1;transform:none}}

.hero6 .col,.vk .hero6 .e-con.col{max-width:1200px}
.hero6 h1{font-size:clamp(52px,8.4vw,124px);white-space:normal}
@media(min-width:721px){.hero6 h1 br{display:block}}
.vk .sticky i{display:block;width:38px;height:38px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9m0 0L8.5 4m4 4l-4 4' stroke='%230d0d10' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}