/* Vook v11: recut-style hero (short-form default) + best work, with Vook signature touches */
:root{--vk:#6c47ff}
.mark{background:var(--vk)}

/* ---------- hero ---------- */
.hero11{padding:150px 0 0;text-align:center;background:#f2f2f2;position:relative;overflow:hidden}
.hero11:before{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 0%,#fff,rgba(255,255,255,0) 70%);pointer-events:none}
.hero11 .col,.vk .hero11 .e-con.col{display:flex;flex-direction:column;align-items:center;max-width:820px;margin:0 auto;position:relative}
.fmt{display:inline-flex;align-items:center;gap:12px;font:700 12.5px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase}
.fmt button{border:0;background:none;padding:6px 2px;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:#9a9a9a;transition:color .25s ease}
.fmt button.on{color:#000}
.tg{width:44px;height:24px;border-radius:999px;background:#000;position:relative;cursor:pointer;flex:none}
.tg i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transform:translateX(20px);transition:transform .45s cubic-bezier(.5,1.5,.4,1)}
.hero11.long .tg i{transform:none}
.hero11 h1{font-size:clamp(42px,5.6vw,76px);line-height:1.06;letter-spacing:-.055em;margin-top:24px;display:flex;flex-direction:column;align-items:center}
.hero11 h1 .l1{display:inline-flex;align-items:center;gap:.25em;white-space:nowrap}
.lead-w{display:inline-block;transition:opacity .3s ease}
.rotp{position:relative;display:inline-grid;height:1.1em;overflow:hidden;vertical-align:bottom}
.pw{grid-area:1/1;display:inline-flex;align-items:center;gap:.14em;opacity:0;transform:translate3d(0,.7em,0);transition:opacity .45s var(--eo),transform .6s var(--eo)}
.pw svg{width:.78em;height:.78em;flex:none}
.pw b{font-weight:800}
.pw.on{opacity:1;transform:none}
.pw.out{opacity:0;transform:translate3d(0,-.7em,0)}
.p-tiktok{color:#000}.p-tiktok svg{color:#000;filter:drop-shadow(1.5px 1px 0 #ff0050) drop-shadow(-1.5px -1px 0 #00f2ea)}
.p-reels b{background:linear-gradient(90deg,#f9a12e,#e1306c 45%,#833ab4);-webkit-background-clip:text;background-clip:text;color:transparent}.p-reels svg{color:#e1306c}
.p-shorts{color:#ff0033}
.p-youtube{color:#ff0033}
.p-podcast{color:var(--vk)}
.p-brand{color:#0a84ff}
.hero11 .sub{font-size:18px;color:#555;max-width:540px;margin:22px auto 0;line-height:1.55;transition:opacity .3s ease}
.vk .hero11 .ctas,.vk .hero11 .e-con.ctas{justify-content:center;margin-top:30px!important;gap:10px}
.cta.ghost{box-shadow:inset 0 0 0 1.5px #000}

/* stage: short row (default) / long coverflow */
.stage11{position:relative;height:560px;margin-top:64px}
.shortrow,.longflow{position:absolute;inset:0;transition:opacity .5s ease,transform .7s var(--eo)}
.longflow{opacity:0;transform:translate3d(0,30px,0) scale(.97);pointer-events:none}
.hero11.long .shortrow{opacity:0;transform:translate3d(0,30px,0) scale(.97);pointer-events:none}
.hero11.long .longflow{opacity:1;transform:none;pointer-events:auto}
.shortrow .track{gap:16px;animation-duration:60s;padding-top:10px}
.sv{position:relative;width:260px;aspect-ratio:9/16;flex:none;border-radius:26px;background:#fff;padding:6px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.sv img{width:100%;height:100%;object-fit:cover;border-radius:21px;display:block}
.svm{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:999px;padding:7px 12px;font:600 13.5px/1 var(--fb);color:#444}
.svm b{color:#000;font-weight:800}
.shortrow:hover .track{animation-play-state:paused}
.lfr{position:absolute;left:50%;top:20px;width:min(760px,80vw);aspect-ratio:16/9;transform:translateX(-50%);perspective:1400px}
.lv2{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#fff;padding:6px;transition:transform .8s var(--eo),opacity .6s ease,filter .6s ease;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.lv2 img{width:100%;height:100%;object-fit:cover;border-radius:17px}
.lplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#fff;display:grid;place-items:center}
.lplay svg.i{width:22px;height:22px;margin-left:3px}
.lfa{position:absolute;top:calc(20px + min(760px,80vw)*.28);z-index:20;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font:400 28px/1 var(--fb);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .16s var(--eo)}
.lfa:active{transform:scale(.94)}
.lfa.prev{left:calc(50% - min(760px,80vw)/2 - 90px)}.lfa.next{right:calc(50% - min(760px,80vw)/2 - 90px)}
.stage11:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:120px;background:linear-gradient(180deg,rgba(242,242,242,0),#f2f2f2);pointer-events:none;z-index:5}
.hero11 .spills{background:#f2f2f2}
.hero11 .spills:before{background:linear-gradient(90deg,#f2f2f2,rgba(242,242,242,0))}
.hero11 .spills:after{background:linear-gradient(270deg,#f2f2f2,rgba(242,242,242,0))}
.hero11 .sp{background:#fff}
.js .hero11 .r{animation:h4in 1s var(--eo) both}
.js .hero11 h1.r{animation-delay:.06s}.js .hero11 .sub.r{animation-delay:.12s}.js .hero11 .ctas.r{animation-delay:.18s}
.js .stage11{animation:wallin 1.3s var(--eo) .25s both}

/* ---------- best work ---------- */
.wf{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-24px auto 40px}
.wf button{border:0;border-radius:999px;padding:11px 18px;font:600 14.5px/1 var(--fb);background:#111;color:#fff;cursor:pointer;transition:background .2s ease,transform .16s var(--eo)}
.wf button:active{transform:scale(.96)}
.wf button.on{background:var(--vk)}
@media(hover:hover){.wf button:not(.on):hover{background:#333}}
.wg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wv{margin:0;transition:opacity .35s ease,transform .35s var(--eo)}
.wv.hide{display:none}
.wvi{position:relative;aspect-ratio:9/16;border-radius:22px;background:#fff;padding:5px;box-shadow:0 0 0 1px rgba(0,0,0,.08);cursor:pointer;overflow:hidden}
.wvi img,.wvi video{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block}
.wvi:after{content:'';position:absolute;inset:5px;border-radius:18px;background:rgba(0,0,0,.18);transition:opacity .3s ease;pointer-events:none}
.ctl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(40,40,40,.55);z-index:2;transition:transform .3s var(--eo),opacity .3s ease}
.ctl span{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#000}
.ctl svg{width:18px;height:18px}
.ctl .pl svg.i{margin-left:2px}
@media(hover:hover){.wvi:hover .ctl{transform:translate(-50%,-50%) scale(1.06)}.wvi:hover:after{opacity:.6}}
.wv.playing .ctl,.wv.playing .wvi:after{opacity:0;pointer-events:none}
.wv figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:12px 4px 0}
.wv figcaption b{font-size:16px;letter-spacing:-.02em}
.wv figcaption span{font-size:13.5px;color:#777;font-weight:600}

/* ---------- alignment polish ---------- */
.head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.head h2{margin-left:auto;margin-right:auto}
.wkmore{display:flex;justify-content:center;margin-top:44px}

@media(max-width:1080px){.wg{grid-template-columns:repeat(3,1fr)}.lfa{display:none}}
@media(max-width:720px){
 .hero11{padding:118px 0 0}
 .hero11 h1{font-size:clamp(34px,10vw,46px)}
 .fmt{font-size:11px;gap:8px}
 .hero11 .sub{font-size:16px}
 .stage11{height:430px;margin-top:44px}
 .sv{width:200px;border-radius:22px}.sv img{border-radius:17px}
 .lfr{width:88vw}
 .wg{grid-template-columns:1fr 1fr;gap:10px}
 .wf{margin-top:-14px;gap:6px}.wf button{padding:9px 14px;font-size:13px}
 .ctl span{width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){.pw,.lv2,.shortrow,.longflow{transition:none}}

.pw{justify-self:start;width:max-content}
.rotp{justify-items:start}